柱形圖-折綫圖

1.1 版本

1.2 應用場景

柱形圖-折線圖實際就是將 柱形圖 和 折線圖 兩者組合起來的一種組合圖表。常用於同時觀察某個維度的數量、頻率等指標，例如帕累託圖。

帕累託圖是將出現的品質問題和品質改進項目按照重要程度依次排列而採用的一種圖表，遵循二八法則。

如下圖所示帕累託圖，想要改善員工離職情況，可從前三項入手：

1.3 圖表特點

優點：簡單直覺，不僅適合比較各組資料之間的差別，也適合那些趨勢比單個資料點更重要的資料集。

缺點：不適用於較大的資料集。

本文就以 1.2 節展示的帕累託圖作為範例，介紹「柱形圖-折線圖」在 FineReport 中是如何應用的。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，建立內建資料集「員工離職原因統計分析」，如下圖所示：

2.2 插入圖表

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

2.3 設計柱形圖

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

2.3.1 圖表類型

選中圖表所在儲存格，點選右側「儲存格元素>類型」可查看和選擇圖表類型。

2.3.2 綁定資料

組合圖需分別綁定圖表的資料，柱形圖和折線圖的資料如下圖所示：

2.3.3 設定樣式

1）選中圖表後，點選「儲存格元素>樣式>標題」，設定標題正文並設定標題靠左顯示。

2）設定「樣式>圖例」位置為靠上。

3）設定「樣式>標籤」，柱形圖和折線圖需分別設定：

• 柱形圖
  

• 折線圖：因為資料集中的佔比使用的小數，所以標籤勾選值，需要將格式修改為百分比。

4）設定「樣式>系列」，系列的配色方案僅由系列決定，不按圖表分開設定，系列其他設定均按圖表分別設定。

注1：想要單獨修改折線或柱形的顏色，可直接修改配色方案中顏色，也可在「特效>條件屬性」中改變系列的顏色。

注2：配色方案預設「跟隨主題」，主題相關說明請參見文檔：範本主題管理 。

• 柱形圖
  

• 折線圖

從系列的設定中我們看到，柱形圖和折線圖系列下都有一個「堆積和坐標軸」的設定項，預設柱形圖和折線圖使用的 Y軸 不同，柱形圖使用的 Y軸，折線圖使用的 Y軸2 。

注：根據實際情況，可設定兩個圖表使用同一個 Y軸；當一個圖表包含的系列不止一個時，也可設定同個圖表下不同系列使用不同 Y 軸。

5）設定「樣式>坐標軸」，即可看到有 X軸、Y軸、Y軸2 三個坐標軸。點選右側的增加按鈕，還可新增新的坐標軸。詳情可參見：圖表坐標軸 。

本例僅設定 Y軸 和 Y軸2 ：

• Y軸：本例資料集中「人數」欄位總數為 256，這裏自訂最大值為 250 ，便於資料觀察與圖表美觀。
  

• Y軸2：折線圖的 Y軸2 實際最大值應為 1 即 100%，這裏將最大值設定為 1.1 ，是為了圖表顯示更美觀。另外軸標籤本身顯示為小數，所以需將軸標籤格式改為百分比。
  

6）設定「樣式>背景>繪圖區」，將網格線設定為無。

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