某部門經理想要查看該部門下的所有組別對某個任務的完成情況,希望完成百分比和未完成百分比在同一個柱子上體現,如下圖:
工具/原料
html5動態圖表工具:FineReport
電腦
方法/步驟
某部門經理想要查看該部門下的所有組別對某個任務的完成情況,希望完成百分比和未完成百分比在同一個柱子上體現,如下圖:
模板設計
將數據集中的數據拖曳至單元格中,並計算未完成量,如下圖:
添加圖表
點擊菜單欄中的插入>插入懸浮元素>插入圖表,選擇柱形圖,如下圖:
圖表單元格數據源
選中圖表,點擊右側圖表屬性表中的圖表屬性表-數據,數據來源選擇單元格數據源,系列名和系列值設置如下圖:
圖表數據源設置完成之後,就可以將上面單元格中數據隱藏,選中第一行和第二行,右鍵隱藏即可。
圖表樣式
標題
點擊樣式>標題,在標題的文本框中輸入某部門各組別任務完成情況,設置標題內容和格式:
為了區別未完成和已完成,我們將未完成的系列顏色修改成白色,在為圖表添加單元格數據源的時候,未完成處於第二個系列,故,我們點擊樣式>系列,配色選擇自定義>精確設置,點擊在第二個配色方框,將顏色修改為白色,如下圖:
圖表特效
條件顯示
效果圖中,柱形圖的已完成部分要顯示其已完成量所佔比例,如下圖,點擊特效>條件顯示,添加一個標籤內容的屬性,
此時預覽模板會發現,柱形圖未完成部分的柱子沒有邊框,更瀏覽器的背景顏色一樣,影響美觀,下面我們給每個柱子添加一個邊框線,如下圖:
效果查看
保存模板,點擊分頁預覽即可看到如上圖的效果。
已完成模板請參照%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\PercentCompare.cpt
在線查看模板效果請點擊PercentCompare.cpt