面積圖

1.1 應用場景

面積圖是強調數量隨時間而變化的程度，可用於引起人們對總值趨勢的注意的圖形。

適合展示時間維度上的變化，或者用於展示累積資料。堆積面積圖 和 百分比堆積面積圖 還可以顯示部分與整體的關係。

1.2 圖表特點

1）能很好的展現沿某個維度的變化趨勢，能比較多組資料在同一個維度上的趨勢，適合展現較大數據集。

2）不適合不同分類之間的數值比較。

接下來我們將以範例的形式，介紹如何製作面積圖，以及面積圖的各項屬性。

更多圖表屬性請參見文檔：圖表資料、圖表樣式、圖表特效。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，在範本左下方建立 內建資料集 ，可自行設計表欄位和資料。如下圖所示：

2.2 插入圖表

合併一片儲存格區域，點選上方工具欄插入圖表按鈕，插入「面積圖」。如下圖所示：

2.3 圖表資料

選中面積圖，綁定資料如下圖所示：

2.4 圖表樣式

2.4.1 圖表標題

在圖表屬性配置面板中選擇「樣式>標題」，設定標題內容為正文「2020年產品銷量走勢-面積圖」。

2.4.2 圖表圖例

在圖表屬性配置面板中選擇「樣式>圖例」，設定圖例顯示位置為「靠上」。

2）標籤佈局

2020-07-08 及之後版本的 JAR 包，面積圖示籤佈局有如下變動：

位置：新增自動選項，當選擇自動時，根據視覺設計規則個別標籤會自動切換上下方位置。

重疊調整：當多個標籤重疊在一起時，可以開啟該功能，系統自動錯開標籤位置。

• 標籤重疊在一起：

• 開啟重疊調整：

2.4.4 圖表系列

面積圖系列設定項如下圖所示：

1）線：支援設定線型為無或實線；支援設定線寬；支援設定形態為普通、垂直或曲線；支援開啟「空值斷開」。效果如下圖所示：

2）點樣式預設為「無」，支援選擇「標準」下內建八種樣式，也支援上傳自訂圖片。

3）支援設定面積的填充顏色，預設為「系列色」，可選擇其他顏色。且填充色不透明度 15% 不支援修改。

以上僅對面積圖的部分設定項進行講解，更多內容請參見文檔：圖表系列 。

2.4.5 圖表坐標軸

為了使圖表展示效果更好，本例自訂 Y軸 最小值為 40。如下圖所示：

2.4.6 圖表提示

面積圖可設定資料點提示「顯示所有系列」。

當面積圖有多個系列，未勾選「顯示所有系列」時，不同系列提示點單獨顯示。效果如下圖所示：

.
勾選「顯示所有系列」後，不同系列提示點由直線連結一同顯示。效果如下圖所示：

.
注：只有一個系列時，勾選「顯示所有系列」後，也會出現直線。

2.5 效果預覽

2.5.1 PC 端

儲存報表，點選 分頁預覽，效果如下圖所示：

.

2.5.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

.

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\AreaChart\面積圖.cpt

點選下載範本：面積圖.cpt