1. 概述
1.1 版本
報表伺服器版本 |
11.0 |
1.2 問題描述
在圖表「樣式>標籤」中，當內容選擇通用時，有個「百分比」選項，表示的是當前系列值在單個分類下所有系列值和的占比。那麼當圖表是單個系列多個分類時，勾選「百分比」後，每個系列顯示的占比均為 100%。如下圖所示：
那要如何實現單個系列多個分類時，標籤也能正確顯示各分類的占比呢？如下圖所示：
1.3 解決思路
標籤內容選擇「自訂」，輸入 JavaScript 代碼，在代碼中進行計算，並引用公式改變數值格式。
2. 範例
2.1 準備資料
點選設計器左上角「檔案>建立普通報表」，選擇範本主題為「清爽科技」。
建立資料庫查詢 ds1，輸入 SQL 語句為：SELECT * FROM 銷量 WHERE 地區='華東'，取出銷量表中的華東地區的資料。如下圖所示：
2.2 設計報表
2.2.1 插入圖表
先合併一片儲存格區域，再插入「柱形圖」。如下圖所示：
2.2.2 綁定資料
選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料集資料，分類選擇「產品」，系列名使用欄位名「銷量」，這樣就是單個系列多個分類了。如下圖所示：
2.2.3 設定圖表樣式
1）設定標題
選中圖表，選擇「儲存格元素>樣式>標題」，輸入文本「各產品銷量占比」。如下圖所示：
2）設定標籤
選中圖表，選擇「儲存格元素>樣式>標籤」，勾選「使用標籤」，選擇「自訂」，輸入代碼如下：
function() {
var points = this.series.points; //獲取當前系列所有的資料點
var total = 0;
for (var i = 0, len = points.length; i < len; i++) {
total += points[i].value; //求分類下的系列和
}
return FR.contentFormat(this.value/total, '#0%'); //求佔比
}
注：FR.contentFormat 可以對數值格式進行自訂，#0% 即自訂的格式，可根據實際情況替換。
如下圖所示：
注：FVS 視覺化看板、決策報表同樣適用。
2.3 效果預覽
2.3.1 PC 端
儲存範本，點選「分頁預覽」，效果如下圖所示：
2.3.2 行動端
支援 App 端和 HTML5 端，效果如下圖所示：
3. 範本下載
點選下載範本：標籤使用公式求佔比.cpt
