自訂提示為圖片

1.1 版本

在製作圖表時，希望滑鼠行動到圖形上時，資料點提示能以圖片的形式展示。如下圖所示：

1.3 實現思路

圖表提示內容選擇「自訂」，透過 HTML 程式碼實現，輸入程式碼後，需選中「使用html解析正文內容」。如下圖所示：

2.1 準備資料

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

建立內建資料集，名稱修改為「水果喜好佔比」，表設計如下圖所示：

2.2 設計報表

2.2.1 插入圖表

先選中一片儲存格區域，點選上方工具欄「合併儲存格」按鈕，再點選「插入圖表」按鈕，選擇「餅圖」。如下圖所示：

2.2.2 綁定資料

選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料集資料，分類選擇「無」，系列名使用欄位值，系列名選擇「水果」，值選擇「佔比」。如下圖所示：

2.2.3 設定圖表樣式

1）設標度題

選中圖表，選擇「儲存格元素>樣式>標題」，輸入正文「水果喜好佔比」。如下圖所示：

2）設標度籤

選中圖表，選擇「儲存格元素>樣式>標籤」，勾選「使用標籤」，值標籤內容選擇「通用」，勾選「值」，設定值的格式為百分比。如下圖所示：

3）設定系列

選中圖表，選擇「儲存格元素>樣式>系列」，修改系列顏色。如下圖所示：

4）設定提示

選中圖表，選擇「儲存格元素>樣式>提示」，內容選擇「自訂」，輸入程式碼如下：

function(){return'<p><img src ="../../help/picture/Fruits/'+this.seriesName+'.png" width="60" height="60" align="middle"></p>';}

輸入程式碼後，選中「使用html解析正文內容」，再將背景填充改為「沒有背景」，陰影選擇「關閉」。如下圖所示：

注：程式碼中使用的圖片儲存在 %FR_HOME%\webapps\webroot\help\picture\Fruits 資料夾下，如下圖所示：

2.3 效果預覽

2.3.1 PC 端

儲存範本，點選「分頁預覽」，效果如下圖所示：

2.3.2 行動端

FVS 視覺化看板與決策報表均不支援行動端，普通報表同時支援 App 端和 HTML 端。效果如下圖所示：

注：若提示的圖片需要根據儲存格展示，可參考文檔 自訂標籤為圖片 中的範例一，其程式碼和邏輯是一致的，也同樣不支援行動端。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Chart\PieChart\自訂提示為圖片.cpt

點選下載範本：自訂提示為圖片.cpt