資料點提示顯示所有系列

1.1 版本

1.2 應用場景

當圖表一個分類含有多個系列，使用者希望可以顯示該分類下所有系列的提示資訊時，若提示內容為「通用」，直接勾選 圖表提示 顯示策略下的「顯示所有系列」即可實現。

但是如果想要修改提示的其他樣式，例如下圖中各系列的單位不一樣，就需要使用自訂實現了。

如下圖所示：

1.3 實現思路

圖表「樣式>提示」內容選擇「自訂」，在程式碼中透過 IF 條件語句為系列設定不同的提示內容。程式碼中使用到 html 語句定義樣式時，需選中「使用html解析文字內容」。

2.1 準備資料

本例我們直接使用文檔 圖表自訂多個坐標軸 中的範本，直接開啟設計器內建範本 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\Chart\ColumnChart\多坐標軸位置自訂柱形圖.cpt，或點選下載範本 多坐標軸位置自定義柱形圖.cpt 後在設計器中開啟檔案。

如下圖所示：

2.2 通用提示顯示所有系列

這裏我們示範一下通用提示下勾選「顯示所有系列」時的效果。

選中圖表，點選右側屬性面板「儲存格元素>樣式>提示」。內容選擇「通用」，文字勾選分類名、系列名、值。顯示策略下勾選「顯示所有系列」。如下圖所示：

儲存報表，點選「分頁預覽」，效果如下圖，此時是各系列是沒有單位的。

注：若是單位統一，可以給文字設定格式。如下圖所示：

2.3 自訂提示

提示內容選擇「自訂」，輸入程式碼如下：

function(){
var points = this.points; //表示同一個分類的不同系列點    
var a =this.category;     
var b;     
for(var i = 0, len = points.length; i < len; i++) {          
if(points[i].series.visible){               
if(this.points[i].seriesName=="Rainfall")           
b = FR.contentFormat(this.points[i].value, '#0mm');            
else  if(this.points[i].seriesName=="Sea-LevelPressure")               
b = FR.contentFormat(this.points[i].value, '#0mb');    
else 
b = FR.contentFormat(this.points[i].value, '#0℃');    
a += '<br/>'+"<font color='"+points[i].color+"'>●</font>"+points[i].seriesName+':'+b;
}   
}     
return a; 
}
显示代码

選中「使用html解析文字內容」，如下圖所示：

2.4 效果預覽

2.4.1 PC 端

儲存範本，點選「分頁預覽」，效果如 1.2 節應用場景所示。

注：行動端無論是否勾選顯示所有系列，均預設顯示所有系列。

2.4.2 行動端

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

點選下載範本：圖表自訂多系列提示.cpt