圖形化顯示數據(進度條/等級)

1.1 預期效果

在報表中，爲了便於分析數據，看到數據的趨勢與瓶頸，往往使用統計圖來展示數據，因爲圖形的方式要比數值方式直觀的多。

如各銷售員的銷售量、用戶評價級别等，希望單元格中直接顯示進度條或者其他圖形标志來表示數據或等級，如下圖所示：

1）特殊符号

2）進度條

1.2 實現思路

有兩種方式可以實現以上效果：

1）通過插件實現，詳情請參見： 單元格進度條插件 

2）通過 HTML 實現，本文将詳細介紹這種制作方法。

2.1 新建報表

新建普通報表，新建内置數據集 ds1，如下表所示：

2.2 設計報表

報表主體樣式，如下圖所示：

數據列與單元格具體設置，如下表所示：

注：=repeat("★", F3)：若 F3 值爲 3，則重複顯示 3 次星号。

        Repeat 函數的具體使用方法請參見：Repeat 函數

2.3 效果預覽

保存模板，點擊分頁預覽，效果如下圖所示：

3.1 新建報表

新建普通報表，新建内置數據集 ds1，如下表所示：

3.2 設計報表

報表主體樣式，如下圖所示：

在 C7 單元格中，輸入公式：

"<table width=" + ROUND(B7 * 200 / sum(B7[!0;!0]), 2) + "% border=0 cellspacing=0 cellpadding=0> <tr> <td bgcolor=#0000FF><div color=#ffffff align=right>" + B7 + "</div></td> </tr> </table>"

公式釋義如下表所示：

注：進度條的長短是由寬度确定的，而寬度的計算是一個需要觀察的值（如：某人的值在全員中的占比或者某人的某個屬性值）乘或除以一個比例，如例子中的 200。該例子中使用 ROUND(B7 * 200 , 2) 或 B7 * 200 均可實現類似的效果。

3.3 設置單元格屬性

1）選中 C7 單元格，點擊單元格屬性>樣式>對齊，設置文本控制爲單行顯示（調整字體），如下圖所示：

2）選中 C7 單元格，點擊單元格屬性>其他 ，設置顯示内容爲用 HTML 顯示内容，如下圖所示：

3.4 效果預覽

保存模板，點擊分頁預覽，效果如下圖所示：

已完成的模板請參見%FR_HOME%\webroot\WEB-INF\reportlets\doc\SpecialSubject\TypicalIndustryReport\DesignerReport\bar.cpt

點擊下載模板：bar.cpt