提示點獲取資料集資料

1.1 版本

1.2 預期效果

在製作圖表時，使用者希望提示的內容可以獲取資料集中的資料，且附有上升或下降的三角提示，預期效果如下圖所示：

1.3 實現思路

若只是單純的要顯示資料集中的欄位，某些圖表可以直接使用 富正文 新增。但是富正文編輯器中，不支援再使用公式或者程式碼對內容的樣式做一些自訂，所以只能透過「自訂」程式碼實現。在程式碼中呼叫公式去獲取資料集中的欄位，再自訂三角標樣式。

如下圖所示：

2.1 準備資料

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

建立內建資料集，名稱修改為「ds1」，表設計如下圖所示：

注：「較昨日」欄位中正數表示上升，負數表示下降。

2.2 設計報表

2.2.1 插入圖表

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

2.2.2 綁定資料

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

2.2.3 設定圖表樣式

1）設標度題

選中圖表，選擇「儲存格元素>樣式>標題」，輸入正文「自訂提示內容」，位置選擇「靠左」。如下圖所示：

2）設定圖例

因為只有一個系列，我們可以取消勾選圖例可見。

3）設定提示

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

function(){
var per=(FR.remoteEvaluate("value('ds1',3,1,'"+this.category+"')")*100).toFixed(0);
//獲取資料集 ds1 內的第三列，且與該列對應的第一欄的值是 this.category
return "區間： "+this.category+"<br>客戶數： "+this.value+"家 &nbsp&nbsp 較昨日 "+
(per<0?"<font color='#ea4431'>▼</font>&nbsp":"<font color='#16c153'>▲</font>&nbsp")+Math.abs(per)+"%";
//per小於0時顯示紅色倒三角圖示，per大於0時顯示綠色正三角圖示，並對per取絕對值
}

注：FR.remoteEvaluate 用於呼叫 FR 公式 value 函式，去獲取資料集的值。

輸入程式碼後，需選中「使用html解析正文內容」。如下圖所示：

2.3 腳本呼叫公式限制

程式碼中使用的 FR.remoteEvaluate 腳本呼叫存在限制，需要點選設計器菜單欄的「伺服器>報表平台管理」進入數據決策系統，在「管理系統>安全管理>安全防護」中關閉 腳本呼叫公式限制 。如下圖所示：

若開啟，預覽範本會出現錯誤資料，右側會彈出提示。如下圖所示：

2.4 效果預覽

2.4.1 PC 端

儲存範本，點選「分頁預覽」，其效果如 1.2 預期效果所示。

2.4.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

2.5 FVS視覺化看板範例

在 FVS 中引用表格資料集資料時，程式碼中獲取資料集的API寫法需要改變，使用 duchamp.remoteEvaluate 。

完整程式碼範例如下：

function(){  
var per = (duchamp.remoteEvaluate("value('ds1',3,1,'"+this.category+"')")*100).toFixed(0);
return "區間： "+this.category+"<br>客戶數： "+this.value+"家    較昨日 "+
(per<0?"<font color='#ea4431'>▼</font> ":"<font color='#16c153'>▲</font> ")+Math.abs(per)+"%";
}

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Chart\ColumnChart\資料點提示自訂欄位內容.cpt

點選下載範本：資料點提示自訂段內容.cpt