1. 概述
1.1 應用場景
FineReport 豐富的圖表功能可以實現各式各樣的視覺化展示效果,但面對一些複雜的、需要設計工具或編程語言實現的進階圖形,也可以藉助圖表間的組合,實現出類似的效果。
本文將透過圖表組合實現如下圖所示的萬花筒圖表。
1.2 功能介紹
外圈展示系列名稱,滑鼠拖曳可旋轉外圈。
內圈展示系列值,滑鼠懸浮可查看系列名和系列值。
1.3 實現思路
外圈使用餅圖實現,以儲存格元素的方式插入,透過修改內徑實現圓環效果。
內圈使用雷達圖實現,以懸浮元素的方式插入,將其放置在圓環內實現內圈效果。
2. 範例
範例透過萬花筒圖表統計候選人票數的情況。
2.1 資料準備
建立普通報表,建立內建資料集「候選人票數統計」,表設計如下圖所示:
2.2 報表設計
2.2.1 外圈設計
1)合併 A1~I1 儲存格,在第一列輸入標題:候選人票數統計。合併 A2~I28 儲存格,插入餅圖。如下圖所示:
2)如下圖綁定餅圖資料。
3)餅圖樣式選擇「標題」,取消勾選「標題可見」。
4)餅圖樣式選擇「圖例」,取消勾選「圖例可見」。
5)餅圖樣式選擇「系列」,修改內徑佔比為 80%,開啟可旋轉功能。
6)餅圖樣式選擇「提示」,取消勾選「使用資料點提示」。
7)餅圖樣式選擇「標籤」,勾選使用標籤,值標籤使用「富文字」,選擇系列名和票數進行展示。如下圖所示:
8)餅圖屬性面板選擇「特效>互動屬性」,將工具欄的內容全部取消勾選,隱藏工具欄。
2.2.2 內圈設計
1)點選右側屬性面板「懸浮元素>新增元素>插入圖表」,插入一個堆積柱形雷達圖。
2)滑鼠右鍵按雷達圖,點選「樣式」,選擇「背景>顏色」,設定雷達圖背景色為「透明」。
3)如下圖綁定雷達圖資料資訊。
4)同餅圖樣式設定相同,取消勾選「標題可見」、取消勾選「圖例可見」。
5)雷達圖樣式選擇「坐標軸>極角軸」,軸標籤選擇「隱藏」。
6)雷達圖樣式選擇「坐標軸>極徑軸」,軸標籤選擇「隱藏」,值定義採用「統一計算」,勾選「自訂主刻度單位」,設定值為 5。
7)雷達圖樣式選擇「提示」,勾選「使用資料點提示」,文字勾選「系列名」和「值」。
8)雷達圖屬性面板選擇「特效>互動屬性」,將工具欄的內容全部取消勾選,隱藏工具欄。
9)右鍵雷達圖,點選「置於頂層」,滑鼠將雷達圖拖動到外圈的環內。最終效果如下圖所示:
2.3 效果預覽
儲存報表,點選「分頁預覽」,效果如下圖所示:
注1:由於存在懸浮圖表,不支援行動端、FVS 視覺化看板和決策報表預覽,但 FVS 視覺化看板、決策報表中都可以用兩個圖表塊疊加。
注2:由於雷達圖和餅圖的柱形不匹配,故報表預覽時會出現柱形不對齊的情況,可以手動旋轉下外圈,對齊內圈柱形。