自訂標籤求佔比

1.1 版本

1.2 問題描述

在圖表「樣式>標籤」中，當內容選擇通用時，有個「百分比」選項，表示的是當前系列值在單個分類下所有系列值和的占比。那麼當圖表是單個系列多個分類時，勾選「百分比」後，每個系列顯示的占比均為 100%。如下圖所示：

那要如何實現單個系列多個分類時，標籤也能正確顯示各分類的占比呢？如下圖所示：

1.3 解決思路

標籤內容選擇「自訂」，輸入 JavaScript 代碼，在代碼中進行計算，並引用公式改變數值格式。

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 端，效果如下圖所示：

點選下載範本：標籤使用公式求佔比.cpt