自訂提示顯示系列和

1.1 版本

1.2 預期效果

在文檔 自訂標籤為系列和 中，我們將堆積柱形圖的一個分類下的系列值匯總顯示在柱子最上方。本文則要用提示實現類似效果，即滑鼠懸浮最上方系列時，提示展示匯總值；滑鼠懸浮其他系列時，展示各自的系列值。預期效果如下圖所示：

1.3 實現思路

圖表提示內容選擇「自訂」，透過 JavaScript 程式碼實現。

2.1 開啟範本

點選下載範本：自訂標籤為系列和.cpt 後，點選設計器左上角「檔案>開啟」開啟範本。

2.2 設計報表

2.2.1 修改圖表標題

選中圖表，選擇「儲存格元素>樣式>標題」，修改標題為「自訂提示-分類下系列求和」。如下圖所示：

2.2.2 取消圖表標籤

選中圖表，選擇「儲存格元素>樣式>標籤」，取消勾選「使用標籤」。如下圖所示：

2.2.3 設定圖表提示

選中圖表，選擇「儲存格元素>樣式>提示」，選擇「自訂」，輸入程式碼：

function sumOfPoints() {
  const point = this;
  const points = this.points;
  const len = points.length;
  if (point == points[len - 1]) {
  // points.length 表示一個分類下共有多少個系列， len - 1 表示匯總值顯示在頂部（最後一個系列）
   // 若想要匯總值顯示在底部，則是 len - 5
    let sum = 0;
    for (let i = 0; i < len; i++) { //同一分類下所有系列均求和
    // 若為 i<len-2，則在本例中求的是從下往上數前 3 個系列的和
      if (point.isVisible()) {
        sum += points[i].value;
      }
    }
	return sum;
  }
  return point.value;
}
显示代码

如下圖所示：

2.3 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.2 預期效果所示。

注：自訂時，行動端提示預設只顯示第一個系列。

點選下載範本：自訂提示顯示系列和.cpt