圖表自定義多系列提示

1.1 問題描述

當圖表的樣式>提示>顯示策略中勾選了顯示所有系列時，使用自定義提示默認的代碼只能顯示一個系列的提示，如下圖所示：

默認代碼的自定義提示不符合實際應用場景的需求，希望每個系列分行提示，且在提示值後面加上「萬元」兩個字，如下圖所示：

1.2 解決思路

修改默認生成的 JS 代碼，使用 for 循環遍曆系列修改對應的值，使用 HTML 标簽來美化效果。

2.1 數據準備

新建普通報表，新建數據集 ds1，數據庫查詢語句爲：SELECT * FROM 銷量

2.2 報表設計

1）合并一片區域的單元格，插入柱形圖，如下圖綁定圖表數據：

3）柱形圖樣式>提示中勾選使用數據點提示，輸入自定義數據點提示代碼，并選擇使用html解析文本内容，如下圖所示：

注：使用HTML解析文本的方法參見：圖表使用 HTML 解析文本内容

JS 代碼如下：

function(){ 
var points = this.points; 
var value = "<b><font size=2.5 color='white'>" + this.category;     
    for(var i = 0;i < points.length;i++) {              
        if(points[i].series.visible){             
            value += '<br/>'+"<font color='"+points[i].color+"'>●</font>"+points[i].seriesName+':'+points[i].value+"萬元";         
        }    
    } 
    return value+"</font></b>"; 
}

4）柱形圖樣式>提示>顯示策略中勾選顯示所有系列，如下圖所示：

2.3 效果預覽

1）PC 端

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

2）移動端

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\圖表自定義多系列提示.cpt

點擊下載模板：圖表自定義多系列提示.cpt