I. Overview
1.1 Problem
In some actual projects, when the chart carousel function is used, the carousel switching dots will be displayed by default just below the carousel chart. Sometimes in order not to affect the beauty of the report display, we need to hide these switching dots.
1.2 Solution
Add a JavaScript loading end event in the pagination preview setting, and use a delay function to hide the chart carousel switch dot.
II. Example
2.1 Data preparation
Create a new built-in data set as shown in the figure below.
2.2 Report design
1) Merge cells A1~I20 and insert two charts: column chart and pie chart. Set the carousel time interval of these two charts to 5 seconds.
2) Set the data of the column chart.
3) Set the data of the pie chart.
2.3 Add JS event
1) In the designer menu bar, select Template>Template Web Attributes>Pagination Preview Settings , and add a loading end event.
2) Add the following JS:
setTimeout(function() {
$(".vanchart-menu").css("display", "none");
}, 100);
Note:
100 means automatically hide the carousel switching dot after 100 milliseconds. (The value can be set according to actual needs)
When hovering over the chart, the chart will not rotate automatically.
2.4 Preview effect
Save the report, and the pagination preview effect is as shown in the figure below:
Note:
Mobile terminal is not supported.
If the above JS is written in the loading end event of "Data Entry Preview Settings" or "Data Analysis Preview Settings", please preview the report in the corresponding way to display the effect correctly.
Previous：JS Text Snowflakes
