柱形圖-面積圖

1.1 應用場景

柱形圖-面積圖是由寬度相同的柱形的高度或長短來表示資料多少的柱形圖，以及強調數量隨時間而變化的程度的面積圖，兩者組合起來的一種組合圖表類型。

柱形圖-面積圖適可以直覺地表示資料量的大小並進行比較，可以比較明顯地顯示出各資料之間的比例差異，也可以顯示部分與整體的關係。

柱形圖-面積圖展示效果如下圖所示：

1.2 圖表特點

優點：簡單直覺，不僅適合比較各組資料之間的差別，也能很好的展現沿某個維度的變化趨勢，比較多組資料在同一個維度上的趨勢。

2.1 類型

以 儲存格元素 或 懸浮元素 插入圖表時，圖表類型選擇柱形圖-面積圖，如下圖所示：

2.2 資料

柱形圖-面積圖需分別綁定柱形圖、面積圖的資料，資料綁定的詳細介紹可以參見文檔：圖表資料。

2.3 樣式

柱形圖-面積圖需分別設定柱形圖、面積圖的樣式，基礎樣式設計可以參見文檔：圖表樣式。

在圖表樣式通用功能的基礎上，柱形圖、面積圖新增了堆積和坐標軸屬性自訂設定，如下所示：

注：柱形圖、面積圖兩者自訂設定項一致，此處介紹柱形圖。

1）柱形圖樣式>坐標軸下新增新增坐標軸按鈕，使用者可新增其他的X、Y軸，並對新座標的屬性進行設定。

2）柱形圖樣式>系列下新增堆積和坐標軸功能，使用者可自訂坐標軸的堆積屬性和系列對應關係。

2.4 特效

柱形圖-面積圖特效設定的詳細介紹可以參見文檔：圖表特效。

3.1 報表設計

3.1.1 準備資料

建立資料集ds1、ds2，資料庫查詢語句如下：

ds1：SELECT 產品名稱, 訂購量, 再訂購量 FROM 產品 where 類別ID = 1

ds2：SELECT 產品名稱, 庫存量 FROM 產品 where 類別ID = 1

3.1.2 圖表插入

合併一片區域儲存格，右鍵選擇 A1 儲存格，選擇儲存格元素>插入圖表>柱形圖-面積圖，如下圖所示：

3.1.3 資料綁定

綁定柱形圖-面積圖資料，如下圖所示：

3.1.4 樣式設計

柱形圖-面積圖基礎樣式只需要改個標題，其餘預設設定即可。

1）坐標軸自訂

柱形圖-面積圖屬性面板的樣式>坐標軸下新增新增坐標軸按鈕，使用者可新增其他的X、Y軸，並對新座標的屬性進行設定。

2）柱形圖堆積自訂

新增的坐標軸需要對應到具體系列的值，樣式>系列>柱形圖下新增堆積和坐標軸功能，使用者可自訂坐標軸的堆積屬性和系列對應關係。

3）面積圖堆積自訂

新增的坐標軸需要對應到具體系列的值，樣式>系列>面積圖下新增堆積和坐標軸功能，使用者可自訂坐標軸的堆積屬性和系列對應關係。

3.2 效果預覽

3.2.1 PC 端

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

3.2.2 行動端

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

點選下載範本：柱形图-面积图.cpt