I. Overview
1.1 Problem
Chart carousel can only switch between adjacent charts. How to switch charts directly to non-adjacent charts? The effect is as follows:
1.2 Solution
Add a JavaScript hyperlink to the chart special effect - interaction, and jump to the specified chart tab through the following interface:
FR.Chart.WebUtils.getChart(chartId).showIndexChart(index);
Note:
ChartId represents the chart object; index represents the sequence of charts, starting from 0.
This interface supports the mobile terminal, but the chart in the report block of the mobile terminal dashboard does not support.
II. Example
2.1 Chart design
Add multiple chart tabs in one chart to the dashboard and bind data sources to them.
The chart switching mode is carousel, showing carousel arrows, and the time interval is set to 5 seconds, as shown in the following figure:
2.2 Add JS hyperlink
In the special effect > interaction of the chart, add JavaScript Hyperlink to it. By controlling the value of index, you can specify which chart to jump to.
For example, in the tab of the first column chart, select Special effect>Interaction, and add a Javascript hyperlink:
FR.Chart.WebUtils.getChart("chart0").showIndexChart(2);
That is, clicking on the column chart will switch to the third pie chart.
Do the same settings to the other chart tabs.
2.3 Preview effect
After saving, click Preview. And you can see that you can switch to the third pie chart after clicking the column chart, and switch to the line chart after clicking the pie chart, etc.:
