分類坐标軸顯示數值指标

1.1 應用場景

有時候我們需要對圖表的分類坐标軸設置具體的指标，以便了解當前工作的實際進度，效果如下圖所示：

1.2 實現思路

自定義 X 軸的軸标簽格式，通過接口函數FR.remoteEvaluate( formula )和内置的報表函數VALUE(tableData,targetCol,orgCol,element)實現。

2.1 數據準備

1）新建普通報表，新建内置數據集 ds1，如下圖所示：

2）新建内置數據集 ds2，其中的 percents 字段是各銷售員銷量占總銷量的占比，如下圖所示：

2.2 插入圖表

合并一片區域單元格，插入柱形圖，如下圖所示：

2.3 綁定數據

綁定柱形圖數據，用於顯示每個銷售員每種産品的銷量情況，如下圖所示：

2.4 自定義軸标簽

點擊「樣式>坐标軸>X軸」，軸标簽格式處點擊「自定義」按鈕，填入 JavaScript 代碼後，要選擇「使用html解析文本内容」，如下圖所示：

JavaScript 代碼如下：

function(){ 
        //value函數返回百分比數據，返回經過計算的公式的結果
        var a=(FR.remoteEvaluate("value('ds2',2,1,'" + this+ "')")*100).toFixed(1); 
        //軸标簽同時顯示分類名和百分比，且韓文和張武的軸标簽爲紅色
        if(this=='韓文'||this=='張武'){
        return "<font color='red'>"+this+"："+a+"%"+"</font>"     }else{
        return this+"："+a+"%";
    }
}

2.5 效果預覽

2.5.1 PC端

保存模板，點擊分頁預覽，如下圖所示：

2.5.2 移動端

同時支持 App 端和 H5 端，效果如下圖所示：

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\分類坐标軸顯示數值指标.cpt

點擊下載模板：分類坐标軸顯示數值指标.cpt

預覽模板，如果出現彈窗“此調用存在安全風險，如需使用請在安全管理中修改腳本調用公式限制”，且數據出現“NaN%”，如下圖所示：

那麽需要登錄數據決策系統，點擊管理系統>安全管理>安全防護>腳本調用公式限制，關閉該功能，如下圖所示：