自訂標籤為系列和

1.1 版本

1.2 預期效果

在使用堆積柱形圖或堆積條形圖時，一個分類下有多個系列堆積成一個柱子展示，這時直接顯示標籤，每個系列的標籤分別展示。如下圖所示：

但經常會遇到一個需求：希望堆積的一個柱子只顯示一個匯總值。預期效果如下圖所示：

1.3 實現思路

圖表標籤內容選擇「自訂」，透過 JavaScript 代碼實現。

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

1）堆積柱形圖

點選下載範本：自訂標籤為系列和.cpt

2）組合圖

點選下載範本：堆積柱形-折線組合圖-分類下系列求和.cpt