自訂標籤為圖片

1.1 版本

1.2 預期效果

當我們製作圖表時，希望圖表能使用圖片作為標籤，跟隨圖形顯示。

例如用條形圖表示排名時，預期效果如下圖所示：

1.3 實現思路

圖表標籤使用「自訂」，透過 HTML 程式碼實現。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，選擇範本主題為「清爽科技」。

建立資料庫查詢 ds1，輸入 SQL 語句為：SELECT  銷售員,sum(銷量) as 銷量 FROM 銷量 group by 銷售員 order by 銷量 desc，將銷量表中的銷售員及對應的總銷量取出，並降冪排序。如下圖所示：

2.2 設定紙張大小

本例中的圖表會稍微大一些，為了範本在預覽時不分頁展示，先在「範本>頁面設定」中將紙張大小調大一點，如下圖所示：

2.3 設計報表

2.3.1 插入圖表

先合併一片儲存格區域，再插入「條形圖」。如下圖所示：

2.3.2 綁定資料

選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料如下圖所示：

2.3.3 設定儲存格資料

將資料集 ds1 中的「銷售員」和「銷量」欄位分別拖入 I1 儲存格和 J1 儲存格，拖入後選中兩列按一下滑鼠右鍵，將其隱藏。如下圖所示：

2.3.4 設定圖表標籤

選中圖表，點選右側屬性面板「儲存格元素>樣式>標籤」，具體設定如下圖所示：

程式碼如下所示：

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" 定義了寬高。

2.3.5 設定Y軸逆序

完成標籤自訂後，儲存預覽下效果，如下圖所示：

預覽看到條形圖從上往下是升冪而不是降冪，這是因為條形圖的分類是從下往上排列的，所以我們需要開啟 Y軸 的軸逆序。如下圖所示：

2.3.6 其他樣式設定

1）選中圖表，點選「儲存格元素>樣式>標題」，輸入正文「銷量排名」。如下圖所示：

2）取消勾選圖例可見，因為只有一個系列，且標題包含銷量，無需再顯示圖例。

2.4 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.1預期效果 所示。

注：不支援行動端。

在 FVS 範本中，支援圖表和資料在一個表格組件中使用，也支援圖表組件和資料分開時使用，但是 HTML 程式碼中獲取儲存格值的方式不同，需修改為： this.value==duchamp.getWidgetByName("表格1").getCellValue(row,col) 。根據實際情況修改表格名稱和儲存格行列即可。

例如：

function(){
if(this.value==duchamp.getWidgetByName("表格1").getCellValue(1,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(2,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(3,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(4,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(5,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(6,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(7,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(8,2)) 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==duchamp.getWidgetByName("表格1").getCellValue(9,2)) 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;}

詳情請到文末下載查看。

在決策報表中，支援圖表和資料在一個報表塊中使用，也支援圖表和資料分開時使用，但是 HTML 程式碼中獲取儲存格值的方式不同，需修改為： this.value==_g().getWidgetByName("report0").getCellValue("J1")。根據實際情況修改報表塊名稱和儲存格即可。

例如：

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;}

上述範例中的圖片不能直接與分類名匹配，需要先獲取儲存格中的值再匹配。而當標籤引用的圖片名稱和圖表的分類名 this.category 相同時，可以使用如下程式碼：

function(){return'<p><img src ="../../help/picture/emoji/'+this.category+'.gif" width="30" height="30" align="middle"></p>';}

以 FVS 中圖表為例，效果如下圖所示：

注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：程式碼同時支援 FVS視覺化看板、普通報表和決策報表，且支援行動端。

點選下載範本：

自訂標籤為圖片.cpt

自訂標籤為圖片.frm

自訂標簽為圖片.fvs