I. Overview
1. Problem description
When Display All Series is checked in the chart's Style>Tooltip>Display Strategy, the default code of using custom prompts can only display one series of prompts, as shown in the following figure:
The custom prompt of the default code does not meet the needs of the actual application scenario. I hope that each series of branches will prompt and add the word 「million yuan」after the prompt value, as shown in the following figure:
2. Solutions
Modify the JS code generated by default, use the for loop to traverse the series to modify the corresponding values, and use HTML tags to beautify the effect.
II. Example
1. Data preparation
Create a New General Report, create a new data set ds1, the database query statement is: SELECT * FROM Sales_Volume
2. Report design
1) Add a Column Chart to the cell, and bind data as shown below:
2) Tick Use Tooltip point prompt in Column Chart Style>Tooltip, enter the custom prompt point code, and choose to Use Html parsing the text content, as shown in the following figure:
Note: For the method of using html parsing the text content, please refer to: Chart uses HTML parsing text content
The JS code is as follows:
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/100+" million yuan";
}
}
return value+"</font></b>";
}
3) Tick Display All Series in Column Chart Style>Tooltip>Display Strategy, as shown in the following figure:
3. Effect preview
1) PC terminal
Save the report, click the Pagination Preview, the effect is as shown in the figure below:
2) Mobile
III. Template download
The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Chart Custom Multi-Series Tips.cpt
Click to download the template:
Chart Custom Multi-Series Tips.cpt