Successfully!

Error!

Chart Custom Multi-Series Tips

  • Last update:  2021-12-29
  • 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:

    1.png

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


    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 dataset ds1, the database query statement is: SELECT * FROM Sales_Volume

    3.png


    2. Report design

    1) Combine the cells in a region, insert a column chart, and bind the chart data as shown below:

    4.png

    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

    5.png

    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:

    6.png


    3. Effect preview

    1) PC terminal

    Save the report, click the Pagination Preview, the effect is as shown in the figure below:

    7.png

    2) Mobile

    8.png

    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


    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback