html5動態圖表工具:FineReport百分比信息圖?

某部門經理想要查看該部門下的所有組別對某個任務的完成情況,希望完成百分比和未完成百分比在同一個柱子上體現,如下圖:

html5動態圖表工具:FineReport百分比信息圖

工具/原料

html5動態圖表工具:FineReport

電腦

方法/步驟

某部門經理想要查看該部門下的所有組別對某個任務的完成情況,希望完成百分比和未完成百分比在同一個柱子上體現,如下圖:

html5動態圖表工具:FineReport百分比信息圖

模板設計

將數據集中的數據拖曳至單元格中,並計算未完成量,如下圖:

html5動態圖表工具:FineReport百分比信息圖

添加圖表

點擊菜單欄中的插入>插入懸浮元素>插入圖表,選擇柱形圖,如下圖:

html5動態圖表工具:FineReport百分比信息圖

圖表單元格數據源

選中圖表,點擊右側圖表屬性表中的圖表屬性表-數據,數據來源選擇單元格數據源,系列名和系列值設置如下圖:

圖表數據源設置完成之後,就可以將上面單元格中數據隱藏,選中第一行和第二行,右鍵隱藏即可。

html5動態圖表工具:FineReport百分比信息圖

圖表樣式

標題

點擊樣式>標題,在標題的文本框中輸入某部門各組別任務完成情況,設置標題內容和格式:

html5動態圖表工具:FineReport百分比信息圖

為了區別未完成和已完成,我們將未完成的系列顏色修改成白色,在為圖表添加單元格數據源的時候,未完成處於第二個系列,故,我們點擊樣式>系列,配色選擇自定義>精確設置,點擊在第二個配色方框,將顏色修改為白色,如下圖:

html5動態圖表工具:FineReport百分比信息圖

圖表特效

條件顯示

效果圖中,柱形圖的已完成部分要顯示其已完成量所佔比例,如下圖,點擊特效>條件顯示,添加一個標籤內容的屬性,

html5動態圖表工具:FineReport百分比信息圖

此時預覽模板會發現,柱形圖未完成部分的柱子沒有邊框,更瀏覽器的背景顏色一樣,影響美觀,下面我們給每個柱子添加一個邊框線,如下圖:

html5動態圖表工具:FineReport百分比信息圖

效果查看

保存模板,點擊分頁預覽即可看到如上圖的效果。

已完成模板請參照%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\PercentCompare.cpt

在線查看模板效果請點擊PercentCompare.cpt

信息, 工具, 動態, 圖表, 百分比,
相關問題答案