圖形化顯示資料(進度條/等級)

1.1 版本

1.2 預期效果

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

如各銷售員的銷售量、使用者評價級別等，希望儲存格中直接顯示進度條或者其他圖形標籤來表示資料或等級，如下圖所示：

1）特殊符號

2）進度條

1.3 實現思路

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

1）透過插件實現，詳情請參見： 儲存格進度條插件 。

2）透過 HTML 實現，本文將詳細介紹這種製作方法。

3）使用條形圖實現進度條效果。詳細的條形圖使用方法請參見：條形圖 。

2.1 建立報表

建立普通報表，建立內建資料集 ds1，如下表所示：

2.2 設計報表

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

資料欄與儲存格具體設定，如下表所示：

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

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

2.3 效果預覽

2.3.1 PC 端

儲存範本，點選「分頁預覽」，效果如下圖所示：

2.3.2 行動端

效果見 4.4.2 節所示。

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 style='color:#FFFFFF' align=left>" + B7 + "</div></td> </tr> </table>"

公式釋義如下表所示：

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

3.3 設定儲存格屬性

1）選中 C7 儲存格，點選「儲存格屬性>樣式>自訂>對齊」，設定「正文控制」為「自動換欄」，如下圖所示：

2）選中 C7 儲存格，點選「儲存格屬性>其他 」，設定「顯示內容」為「用 HTML 顯示內容」，如下圖所示：

3.4 效果預覽

3.4.1 PC 端

儲存範本，點選「分頁預覽」，效果如下圖所示：

3.4.2 行動端

效果見 4.4.2 節所示。

4.1 建立報表

建立普通報表，建立內建資料集 ds1，如下表所示：

4.2 設計報表

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

儲存格設定如下：

4.3 條形圖設定

1）選擇 C10 儲存格，選擇「儲存格元素>資料」，資料來源設定為「儲存格資料」，分類名為「=A10」，系列名為「="表現評分"」，值為「=B10」，如下圖所示：

2）選擇 C10 儲存格，選擇「儲存格元素>樣式」，選擇「標題」，取消勾選「標題可見」，選擇「圖例」，取消勾選「圖例可見」，如下圖所示：

3）在「儲存格元素>樣式」下，選擇「標籤」，勾選「使用標籤」，內容選擇「通用」，僅勾選「值」。如下圖所示：

注：若需要顯示為百分比可將資料修改為百分數，勾選「百分比」。

4）在「樣式>坐標軸>X軸」下，設定軸標籤和軸標題為隱藏，自訂最大值為：=max(B2[!0])，軸線型別為無，主要和次要刻度線關閉。如下圖所示：

5）在「樣式>坐標軸>Y軸」下，設定軸標籤和軸標題為隱藏，軸線樣式型別為無，主要和次要刻度線關閉。如下圖所示：

6）在「樣式>背景>繪圖區」下，設定網格線縱向為無。如下圖所示：

7）在「特效>互動屬性」下，取消勾選「排序」、「匯出圖片」、「全螢幕展示」，如下圖所示：

4.4 效果預覽

4.4.1 PC 端

儲存，分頁預覽，效果如下圖所示：

4.4.2 行動端

App 與 HTML5 端效果相同，如下圖所示：

點選下載範本：bar.cpt