1. 概述
1.1 應用場景
當柱形圖 2 個系列之間是包含關係時,希望 2 個系列的柱形可以重疊在一起,這樣可以直覺看出 2 個系列間的佔比關係。
例如柱形圖存在 2 個系列:應付金額和運貨費,應付金額中包含運貨費,現在想要讓這 2 個系列柱形重疊,進而直覺展示運貨費佔應付金額的比例,如下圖所示:
1.2 功能入口
將柱形圖樣式>系列下的系列間隔設定為-100,即可將所有系列重疊在一起,如下圖所示:
2. 範例
2.1 準備資料
建立內建資料集 Embedded1,欄位和資料如下圖所示:
2.2 插入圖表
合併一篇區域儲存格,插入柱形圖,如下圖所示:
2.3 綁定資料
綁定柱形圖資料,如下圖所示:
2.4 新增標題
柱形圖新增標題:佔比柱形圖,位置靠左,設定好字體樣式,如下圖所示:
2.5 實現柱形重疊
柱形圖 樣式>系列 下,將系列間隔設定為 -100,如下圖所示:
2.6 自訂標籤
柱形圖 特效>條件顯示 下新增一個「標籤」型別的條件屬性,自訂正文內容和字元樣式,如下圖所示:
JavaScript 代碼如下:
function(){
var result=(this.points[1].value/this.points[0].value*100).toFixed(2);
result=result+"%";
return result}
2.7 效果預覽
2.7.1 PC 端
儲存報表,點選「分頁預覽」,效果如下圖所示:
2.7.2 行動端
同時支援 App 端和 H5 端預覽,效果如下圖所示:
3. 範本下載
點選下載範本:占比柱形圖.cpt