富正文自訂標簽或提示

1.1 版本

注：建議保持本地和遠端 JAR 包一致，否則可能出現樣式變化。

1.2 應用場景

以往使用者想要「自訂標籤或提示」時，只能透過 JavaScript 代碼實現，這樣既增加了報表開發難度，又對代碼能力有較高的要求。

因此推出「富正文」自訂標籤或提示功能，透過「富正文編輯器」可以自行選擇「標籤」或「提示」需要展示的參數，以及設定展示的格式、字體樣式等，並且可以自行輸入文字說明與參陣列合使用，以滿足大部分自訂個性化「標籤」或「提示」的需求。

1.3 功能簡介

所有圖表都支援富正文自訂「提示」，「儀表盤、甘特圖、框架圖」不支援富正文自訂「標籤」。

以「標籤」為例，富正文編輯器的功能入口為「樣式>標籤>富正文>富正文編輯」。共有 3 個設定項，分別是「新增欄位」、「欄位設定」和「字體樣式」。如下圖所示：

2.1 新增欄位

「富正文」支援新增以下兩種欄位作為參數：

• 通用欄位：分類名、系列名、值、百分比

• 資料集欄位：資料來源選擇「資料集資料」時，所選擇資料集包含的所有欄位

注：僅餅圖（除分類標籤）、柱形圖、條形圖、折線圖、面積圖、雷達圖、組合圖支援新增「資料集欄位」。

在富正文編輯器介面左上方「新增欄位」處，點選欄位後的「+」，即可將參數新增到下方編輯面板。

如果想刪除參數，直接在下方編輯面板鍵入游標後刪除即可。

2.2 欄位設定

在富正文編輯器介面的右上方「欄位設定」處可進行欄位格式的設定。

1）通用欄位：選中欄位後，可設定其格式為：標準、數字、百分比、貨幣、科學計數、日期型、時間型、正文型，預設為「標準」。如下圖所示：

2）資料集欄位：「格式」設定與「通用欄位」格式設定一致，另外，還可設定資料集欄位的「彙總方式」，可設定為：首個、最後一個、求和、平均、最大值、最小值、個數，預設為「首個」。如下圖所示：

注：新增欄位與欄位格式設定無先後順序之分。若新增多個相同的欄位，以最後一個欄位為準。

2.3 字體樣式

富正文編輯介面可以選擇 2 種設定字體樣式的方式，分別如下：

1）自動：只需要編輯正文內容即可，字體樣式採用系統預設邏輯。

2）自訂：右側有字體樣式設定選項，使用者可以自訂正文的字體、字號、文字顏色、對齊方式等。

注：若要修改文字樣式，必須先在編輯面板選中對應的文字。

注：這裏字號的單位是 px，並不是 pt。

下面以富正文自訂提示為例，介紹如何使用該功能。

3.1 準備範本

開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\堆積柱形圖.cpt

3.2 自訂提示

1）選中堆積柱形圖，圖表屬性面板選擇「樣式>提示>富正文」，點選「富正文編輯」，彈出富正文編輯器對話框。

2）將編輯面板原有參數刪除，選中左上方「百分比」參數，在右上方修改百分比格式為「#0%」，再點選「+」將「百分比」新增到編輯面板。

3）選擇編輯面板的字體樣式為「自動」，在「百分比」前鍵入游標，輸入說明文字「總貨量佔比：」，最後點選「確定」。

如下圖所示：

3.3 效果預覽

3.3.1 PC 端

儲存報表，點選「分頁預覽」，將滑鼠移至柱形圖上，提示效果如下圖所示：

3.3.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\富正文自訂提示.cpt

點選下載範本：富正文自訂提示.cpt