1. 概述
1.1 版本
報表伺服器版本 |
11.0 |
1.2 預期效果
在使用堆積柱形圖或堆積條形圖時，一個分類下有多個系列堆積成一個柱子展示，這時直接顯示標籤，每個系列的標籤分別展示。如下圖所示：
但經常會遇到一個需求：希望堆積的一個柱子只顯示一個匯總值。預期效果如下圖所示：
1.3 實現思路
圖表標籤內容選擇「自訂」，透過 JavaScript 代碼實現。
2. 堆積柱形圖範例
2.1 開啟範本
本例直接使用文檔 堆積柱形圖 中的範本。
或點選下載範本 堆積柱形圖.cpt，在設計器左上角點選「檔案>開啟」，即可開啟該範本。
2.2 設計圖表
2.2.1 修改標題
選中圖表，選擇「儲存格元素>樣式>標題」，輸入文本「分類下系列標籤匯總顯示」，位置選擇「靠左」。如下圖所示：
2.2.2 自訂圖表標籤
選中圖表，選擇「儲存格元素>樣式>標籤」，內容選擇「自訂」，輸入代碼如下：
function sumLabel(){
const point = this;
const points = point.points;
const validPoints = points.filter( (point) => point.isVisible() );
if(point == validPoints[validPoints.length - 1])
// validPoints.length 表示一個分類下共有多少個系列， validPoints.length - 1 表示匯總值顯示在頂部（最後一個系列）
// 若想要匯總值顯示在底部，則是 validPoints.length - 5
{
let value = 0;
for(let i = 0; i < validPoints.length; i++) //同一分類下所有系列均求和
// 若为 i<validPoints.length-2，則在本例中求的是從下往上數前 3 個系列的和
{
value += validPoints[i].value;
}
return value;
} else {
return "";
}
}
自訂標籤字元樣式，位置選擇「外側」。如下圖所示：
2.3 效果預覽
2.3.1 PC 端
儲存範本，點選「分頁預覽」，效果如 1.2 節預期的匯總效果所示。
2.3.2 行動端
支援 App 端和 HTML5 端，效果如下圖所示：
3. 組合圖範例
3.1 預期效果
本範例簡單講解下組合圖的設定方法。預期效果如下：
堆積柱形圖的標籤顯示匯總值，折線圖不顯示標籤。
3.2 開啟範本
本例直接使用文檔 堆積柱形圖-折線圖 中的範本。
或點選下載範本 堆積柱形-折線組合圖.cpt，在設計器左上角點選「檔案>開啟」，即可開啟該範本。
3.3 自訂圖表標籤
選中圖表，點選右側屬性面板「儲存格元素>樣式>標籤」，選中「柱形圖」，勾選「使用標籤」。自訂輸入代碼：
function sumLabel(){
const point = this;
const points = point.points;
const validPoints = points.filter( (point) => point.isVisible() );
if(point == validPoints[validPoints.length - 2]) //把匯總值顯示在第2個系列
{
let value = 0;
for(let i = 0; i < validPoints.length-1; i++) //求和的值包含的系列為從下往上數前2個系列
{
value += validPoints[i].value;
}
return value;
} else {
return "";
}
}
注：範例二代碼與範例一代碼相比較，其實就是匯總值顯示的位置和匯總值包含的系列，均需要排除折線圖所在的 系列3 。
自訂標籤字元樣式，位置選擇「內側」。如下圖所示：
3.4 效果預覽
3.4.1 PC 端
儲存範本，點選「分頁預覽」，效果如 3.1 預期效果所示。
3.4.2 行動端
App 端和 HTML5 端均支援，效果如下圖所示：
