Chart Custom Multi-Series Tips

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 yuanafter 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.

1. Data preparation

Create a New General Report, create a new dataset ds1, the database query statement is: SELECT * FROM Sales_Volume

2. Report design

1) Combine the cells in a region, insert a column chart, and bind the chart 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

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