I. Overview
1.1 Problem
Sometimes we may want to auto display the chart data tooltip, like the effect below:
1.2 Solution
Obtain the chart object that needs to be operated first, and then call the openTooltip method of this chart object to enable the auto play of data tooltip.
chart.openAutoTooltip([delay, initPoints]);
| Parameter | Description |
|---|---|
| delay | Tooltip switching time interval, the default is 3s |
initPoints | The data points to be auto displayed, the default is all data points in the chart |
After calling this method, it will return a controller for turning off the auto display. Through the controller.stop() method, you can stop the automatic tooltip display, as shown in the following table:
| JS | Description |
|---|---|
var controller = chart.openAutoTooltip() | Turn on automatic data point tooltip display |
controller.stop() | Stop automatic data point tooltip display |
controller.moveOn() | Continue automatic data point tooltip display from where it is stopped |
II. Example
2.1 General report
2.1.1 Turn on automatic tooltip display
After adding the chart, add a hyperlink->JavaScript to cell A1 text, and add the following code; Get the chart block object FR.Chart.WebUtils.getChart("chartID"). The chartID is the cell number of the current chart, such as "A3" in the code.
//Get chart object
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
//Turn on auto display tooltip
vanchart.controller = vanchart.openAutoTooltip();
If you want to display only the values greater than 12000, the reference code is as follows:
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//Get chart object
var points = [];
vanchart.series.forEach(function (ser){//Get all data point
points = points.concat(ser.points);
})
points = points.filter(function (p){//Filter data point higher than 12000
return p.value > 12000;
})
var delay=1000//Switching interval is 1 second
vanchart.openAutoTooltip(delay,points);//Turn on auto display
2.1.2 Stop automatic tooltip display
Add a js hyperlink to the text in C1:
//Get chart object
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
//Stop automatic tooltip display
vanchart.controller.stop();
2.1.3 Stop automatic tooltip display
Add a js hyperlink to the text in E1:
//Get chart object
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
//Continue automatic tooltip display from where it is stopped
vanchart.controller.moveOn();
2.2 dashboard
For the chart in dashboard, add an after initialization event to the chart component.
setTimeout(function(){
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.openAutoTooltip();
},1000)
Or you can also use button to add a click event to achieve the same effect.
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.openAutoTooltip();
