自訂組合圖

1.1 版本

1.2 應用場景

組合圖類型選擇「自訂組合」時，可自由選擇柱形圖、折線圖、面積圖、餅圖等 15 種圖表進行組合。如下圖所示：

自訂組合圖適用於多個資料集，可同時比較多個類別的資料，展示不同資料之間的差異，例如將餅圖和柱形圖進行組合，預期效果如下圖所示：

1.3 圖表特點

• 極大提升了圖表設計的自由度，可以根據需要自由選擇適合的圖表組合使用，集合各個圖表的優勢。

• 適合不同資料集之間的對比，可以比較明顯地顯示出各資料之間的比例差異，也可以比較各類別的佔比情況。

下面以「柱形圖-餅圖」的組合圖為例介紹操作步驟。

2.1 準備資料

1）點選設計器左上角「檔案>建立普通報表」，選擇主題為「經典淺灰」。

2）建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 銷量 。如下圖所示：

2.2 插入圖表

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

2.3 設計組合圖

選中圖表，點選右側屬性面板「儲存格元素」，可設定圖表的各個屬性：類型、資料、樣式、特效。

2.3.1 圖表類型

選中圖表所在儲存格，點選右側「儲存格元素>類型」，勾選「柱形圖」和「餅圖」。

注：根據勾選的順序，決定畫圖時圖層疊加的順序。後勾選的圖表，顯示在上層圖層。

2.3.2 綁定資料

點選「資料」，分別綁定「柱形圖」和「餅圖」的資料，如下圖所示：

2.3.3 樣式設計

1）設定圖例

選擇「樣式>圖例」，設定位置「靠上」顯示，排列方式為「對齊」。如下圖所示：

2）設定系列

選擇「樣式>系列」，配色方案選擇「跟隨主題」，配色是對柱形圖和餅圖均生效的。

注：若想要單獨給某個圖表設定其他配色，需要在「特效>條件顯示」中設定。

• 柱形圖：本例中要製作的是堆積柱形圖，但是自訂組合圖的可選擇的圖表類型中沒有「堆積柱形圖」，所以需要手動設定「堆積和坐標軸」。如下圖所示：

這裏我們新增兩個堆積和坐標軸，「堆積和坐標軸1 」展示前 3 個系列，條件設定為 系列序號 等於 '1' or 系列序號 等於 '2' or 系列序號 等於 '3'  。如下圖所示：

「堆積和坐標軸2 」展示後 2 個系列，條件設定為 系列序號 等於 '4' or 系列序號 等於 '5' 。如下圖所示：

注：堆積和坐標軸設定中，系列序號都是相對於當前選擇的圖表類型資料的系列序號，而不是全體資料。

• 餅圖：組合圖中是可以自訂餅圖的位置的，按 x方向 和 y方向 的佔比計算。本例設定如下圖所示：

3）為避免餅圖和柱形圖部分重疊，選擇「樣式>坐標軸>Y 軸」，設定最大值為 2000 。如下圖所示：

4）選擇「樣式>標籤>餅圖」，勾選使用標籤，勾選百分比，選擇餅圖外牽引線。如下圖所示：

2.4 效果預覽

2.4.1 PC 端

儲存範本，點選「分頁預覽」，效果如 1.2 節預期效果所示。

2.4.2 行動端

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

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\Combination\自訂組合圖.cpt

點選下載範本：自訂組合圖.cpt