反饋已提交
網絡繁忙
報表伺服器版本
11.0
當我們製作圖表時，希望圖表能使用圖片作為標籤，跟隨圖形顯示。
例如用條形圖表示排名時，預期效果如下圖所示：
圖表標籤使用「自訂」，透過 HTML 代碼實現。
點選設計器左上角「檔案>建立普通報表」，選擇範本主題為「清爽科技」。
建立資料庫查詢 ds1，輸入 SQL 語句為：SELECT 銷售員,sum(銷量) as 銷量 FROM 銷量 group by 銷售員 order by 銷量 desc，將銷量表中的銷售員及對應的總銷量取出，並降冪排序。如下圖所示：
本例中的圖表會稍微大一些，為了範本在預覽時不分頁展示，先在「範本>頁面設定」中將紙張大小調大一點，如下圖所示：
先合併一片儲存格區域，再插入「條形圖」。如下圖所示：
選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料如下圖所示：
將資料集 ds1 中的「銷售員」和「銷量」欄位分別拖入 I1 儲存格和 J1 儲存格，拖入後選中兩列按一下滑鼠右鍵，將其隱藏。如下圖所示：
選中圖表，點選右側屬性面板「儲存格元素>樣式>標籤」，具體設定如下圖所示：
代碼如下所示：
function(){if(this.value==_g().getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>'; else if(this.value==_g().getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>'; else if(this.value==_g().getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>'; else if(this.value==_g().getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>'; else if(this.value==_g().getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>'; else if(this.value==_g().getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';else if(this.value==_g().getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>'; else if(this.value==_g().getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>'; else if(this.value==_g().getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';else return this.value;}
注1：設計器或URL 預覽範本時可以透過以上代碼中的相對路徑 img src ="../../help/picture/xxx.png" 獲取圖片資源，但是把範本掛載到數據決策系統後，需要使用絕對路徑獲取圖片，如 img src ="http://IP:port/webroot/help/picture/XXX.png"，其中 IP:port 為使用者自身工程的位址及埠。
注2：this.value==_g().getCellValue("J1") 即獲取儲存格 J1 的內容；標籤值等於 J1 時，標籤顯示為固定圖片 top1-18.png，以此類推。
注3：可透過 HTML 設定標籤內容在大小範圍內上下左右居中顯示，當標籤內容在定義的大小範圍內無法完全顯示時，截斷顯示。
代碼中使用的圖片儲存在 %FR_HOME%\webapps\webroot\help\picture 資料夾下，由於前三名使用的圖片比其他圖片的尺寸大很多，所以在代碼中對前三名的圖片使用 width="62" height="50" 定義了寬高。
完成標籤自訂後，儲存預覽下效果，如下圖所示：
預覽看到條形圖從上往下是升冪而不是降冪，這是因為條形圖的分類是從下往上排列的，所以我們需要開啟 Y軸 的軸逆序。如下圖所示：
1）選中圖表，點選「儲存格元素>樣式>標題」，輸入文本「銷量排名」。如下圖所示：
2）取消勾選圖例可見，因為只有一個系列，且標題包含銷量，無需再顯示圖例。
儲存報表，點選「分頁預覽」，效果如 1.1預期效果 所示。
注：不支援行動端。
在決策報表中，支援圖表和資料在一個報表塊中使用，也支援圖表和資料分開時使用，但是 HTML 代碼中獲取儲存格值的方式不同，需修改為： this.value==_g().getWidgetByName("report0").getCellValue("J1")。根據實際情況修改報表塊名稱和儲存格即可。
如上述普通報表的代碼，在決策報表中為：
注2：不支援行動端。
function(){if(this.value==_g().getWidgetByName("report0").getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';else if(this.value==_g().getWidgetByName("report0").getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>'; else if(this.value==_g().getWidgetByName("report0").getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';else return this.value;}
詳情請到文末下載範本查看。
首先在設計器中開啟範本，直接預覽，效果如下圖所示：
回到範本中，我們雙擊圖表，看一下「標籤」的代碼，如下圖所示：
注1：設計器或URL 預覽範本時可以透過以上代碼中的相對路徑 img src ="../../help/picture/emoji/'+this.category+'.gif" 獲取圖片，但是把範本掛載到數據決策系統後，需要使用絕對路徑獲取圖片，如 img src ="http://IP:port/webroot/help/picture/emoji/'+this.category+'.gif" ，其中 IP:port 為使用者自身工程的位址及埠。
注2：同時支援普通報表和決策報表，且支援行動端。
function(){return'<p><img src ="../../help/picture/emoji/'+this.category+'.gif" width="30" height="30" align="middle"></p>';}
範例二的代碼和範例一的代碼區別在於：範例二中引用的圖片名稱和條形圖的分類名是相同的，所以標籤的圖片直接使用分類名 this.category 即可正確匹配；而範例一的圖片不能直接與分類名匹配，需要先獲取儲存格中的值再匹配。
行動端效果如下圖所示：
1）範例一：
點選下載範本：
自訂標籤為圖片.cpt
自訂標籤為圖片.frm
2）範例二：
點選下載範本：自訂標籤條形圖.frm
文 檔回 饋
滑鼠選中內容，快速回饋問題
滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。
不再提示
10s後關閉