1. 概述
1.1 應用場景
百分比刻度槽型儀表盤是一個不完整的圓環,展示某一項的占比情況,有類别、百分比、數值等指标數據。
利用百分比刻度槽型儀表盤,可以直觀地表現出指标與達成數據的達成率,可以展示銷售完成率、産品合格率等,也可以作爲一個進度百分比展示。
它跟 百分比圓環儀表盤 的區别在於圓環采用了刻度槽樣式。效果如下圖所示:
1.2 圖表特點
優點:直觀的表現出數據範圍與大小,某個指标的進度和完成情況,主要用於進度或占比的展現。
缺點:不能直觀的展示數據趨勢變化,不适用多種數據對比分析。
2. 屬性介紹
2.1 類型
以單元格元素或懸浮元素插入儀表盤後,可在右邊屬性面板的類型設置項下,選擇百分比刻度槽型儀表盤,如下圖所示:
2.2 數據
基礎數據設置項詳細介紹可以參見文檔:圖表數據
分類名:百分比對應的分類名稱,前端展示時顯示在中間滑槽區域。
指針值:百分比計算時分子的一部分,要配合坐标軸下的最小值形成分子。
目标值:百分比計算時分母的一部分,要配合坐标軸下的最小值形成分母。
注:2020-07-06 及之後版本的 JAR 包新增指針值和目标值設置項。
百分比計算公式:(指針值-最小值)/(目标值-最小值)
注:最小值指的是坐标軸處設置的最小值,詳情參見下面樣式的說明。
2.3 樣式
百分比刻度槽型儀表盤樣式設計的詳細介紹可以參見文檔:圖表樣式
1)百分比刻度槽型儀表盤的樣式>系列設置項跟基礎樣式有所不同,單獨介紹:
配色:可以切換百分比刻度槽型儀表盤的色彩搭配,目前有 12 種,且支持自定義組合色和自定義漸變色。
方向:按分類名稱展示儀表盤時,會出現多個儀表盤,此時可以改變這些儀表盤的排列方向。
指針:此處控制指針的顔色,默認爲透明。
刻度槽:此處控制圓環的刻度槽背景顔色,默認爲淺灰。
半徑設置:控制百分比刻度槽型儀表盤的大小,分爲自動和固定兩種類型。
滑槽占比:改變儀表盤中間滑槽區域的大小。
刻度和配色:控制百分比刻度槽型儀表盤的刻度顔色。
2)百分比圓環儀表盤的樣式>标簽設置項跟基礎樣式有所不同,下面單獨介紹:
百分比标簽和值标簽下的字号選擇自動,那麽字體會根據儀表盤大小自動調整大小。
百分比标簽下的顔色選擇自動,那麽百分比标簽的顔色會根據系列色顯示。
3)百分比刻度槽型儀表盤的樣式>坐标軸設置項跟基礎樣式有所不同,單獨介紹:
自定義最小值:勾選後可以自定義最小值,默認不勾選。
最小值:該值跟形成分子和分母有關系,詳情參見上面百分比計算公式。
注:2020-07-06 及之後版本的 JAR 包坐标軸有變動,只能設置最小值。
2.4 特效
百分比刻度槽型儀表盤特效設置的詳細介紹可以參見文檔:圖表特效
注:百分比刻度槽型儀表盤的特效設置項下沒有條件顯示。
3. 示例
3.1 報表設計
3.1.1 數據準備
新建數據集 ds1,數據庫查詢語句如下:
select 類别名稱,sum(庫存量)as 庫存量 from 産品,類别
where 産品.類别ID=類别.類别ID and 類别名稱="飲料"
3.1.2 組件設計
将百分比刻度槽型儀表盤拖拽到 body 組件中,調整位置,如下圖所示:
3.1.3 數據綁定
百分比刻度槽型儀表盤的數據綁定方法如下圖所示:
3.1.4 樣式設計
坐标軸設置項下勾選自定義最小值,設置最小值爲0,也可以不勾選自定義最小值,效果是一樣的。
3.2 效果預覽
1)PC 端
保存報表,點擊PC端預覽,效果如下圖所示:
2)移動端
4. 模板下載
已完成模板可參見:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\百分比刻度槽型儀表盤.frm
點擊下載模板:百分比刻度槽型儀表盤.frm