圖表塊

1.1 版本

1.2 應用場景

在製作決策報表時，圖表可謂是主力軍，是企業戰情室中資料視覺化的主要部分。

我們可以將獨立的圖表塊直接拖入 body 中，也可以在報表塊的儲存格中插入圖表，但不支援插入 懸浮元素圖表 。

本文將簡單介紹圖表塊的使用方式及注意事項。

2.1 新增圖表塊

1）點選設計器左上角「檔案>建立決策報表」，在彈出的對話框中選擇「建立空白範本」後點選「確定」進入建立的範本。

2）直接將圖表塊拖入 body 即可。拖入的圖表塊名稱預設為chart+數字，數字從 0 開始累加。

2.2 組件樣式

圖表塊組件屬性預設如下圖所示，具體樣式設定請參考 組件樣式 。

圖表內容的各項設定，例如圖表資料、圖表樣式、圖表特效等等，請參考 圖表簡介 。

3.1 內邊距導致圖表大小不一致

問題描述

body 「自適應佈局」下，兩個圖表塊大小一致，如下圖所示：

在 PC 端預覽時，chart1 與 chart2 的餅圖大小是一樣的，然而在行動端或 HTML5 下預覽時，兩個餅圖的大小是不一致的，如下圖所示：

原因分析

原因在於 body 設定了內邊距的「左內邊距」，設計器的自適應會將左內邊距計入相鄰的組件寬度。

解決方法

解決方法有三種：

1）取消設定範本內邊距的左邊距，並且調整 chart1 與 chart2 的尺寸寬高一致；

2）由於 chart1、chart2 均為餅圖，可以設定餅圖的「樣式>系列>半徑」為相等的固定值，如下圖所示：

3）透過調整元件大小實現，只要邊距加上相鄰組件的寬度跟期望等寬的組件寬度相等，即左內邊距加上 chart1 的寬度等於 chart2 的寬度。

修改後，App 與 HTML5 預覽，餅圖大小是一致的，如下圖所示：