反饋已提交

網絡繁忙

自訂標籤為系列和

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 端均支援,效果如下圖所示:

4. 範本下載

1)堆積柱形圖

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

2)組合圖

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


附件列表


主題: 圖表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙