自訂提示新增千分符並換行

1.1 版本

1.2 預期效果

在製作圖表時，遇到系列名稱太長或值太長，此時使用者希望希望滑鼠行動到圖形上時，資料點提示中的數字能有千分位輔助展示，並保留兩位小數展示。如下圖所示：

1.3 解決方案

圖表提示內容選擇「自訂」，透過 HTML 程式碼實現，輸入程式碼後，需選中「使用html解析正文內容」。如下圖所示：

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，建立資料庫查詢 ds1，輸入 SQL 語句：

SELECT 

貨主地區||貨主省份||貨主地址 AS 地址,

ROUND(SUM(應付金額*10000),2) AS 應付金額 --保留兩位小數

FROM [訂單]

WHERE 貨主省份 = '湖南'

GROUP BY 貨主地區||貨主省份||貨主地址

ORDER BY SUM(應付金額*10000) DESC

如下圖所示：

2.2 插入圖表

合併一片儲存格區域，點選上方工具欄插入圖表按鈕，插入「餅圖」。如下圖所示：

2.3 綁定資料

選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料集資料，分類選擇「無」，系列名使用欄位值，系列名選擇「地址」，值選擇「應付金額」，匯總方式選擇「求和」。如下圖所示：

2.4 設定圖表樣式

1）設定標題

選中圖表，選擇「儲存格元素>樣式>標題」，輸入正文「居民點應付金額佔比」。如下圖所示：

2）設定標籤

選中圖表，選擇「儲存格元素>樣式>標籤」，勾選「使用標籤」，值標籤內容選擇「通用」，勾選「百分比」，設定值的格式為百分比。如下圖所示：

3）設定系列

選中圖表，選擇「儲存格元素>樣式>系列」，修改系列顏色。如下圖所示：

4）設定提示

選中圖表，選擇「儲存格元素>樣式>提示」，內容選擇「自訂」，輸入程式碼如下：

function(){ 
var aa = (this.value).toString();//給資料值轉成字串
var str = aa.substring(0,aa.length-3);//截取一下整數部分
var bb = aa.substring(aa.length-3,aa.length);//截取一下小數部分
var arr = [];
var num = str.length % 3;
if(num==0){
    for (var i = 0; i < str.length / 3; i++) {
        substr = str.substring(i*3, (i + 1) * 3);
        arr.push(substr);
    };
}else{
    substr = str.substring(0, num);
    arr.push(substr);
    for (var i = 0; i < Math.floor(str.length / 3); i++) {
        substr = str.substring(num + i * 3, num + (i + 1) * 3);
        arr.push(substr);
    };
} //給整數部分加個千分符
var cc = (this.seriesName+"</br>"+arr+bb+'萬元');//換行匯出系列名稱及轉換為千分符格式數字，並新增單位後綴
return cc;}

2.5 效果預覽

2.5.1 PC 端

儲存報表，點選「分頁預覽」，效果如 1.2 節所示。

2.5.2 行動端

注：FVS 視覺化看板與決策報表均不支援行動端，普通報表同時支援 App 端和 HTML 端。

效果如下圖所示：

點選下載範本：自訂換行千分符提示餅圖.cpt