I. Overview
1.1 Problem
When we use the Gantt chart for report development, we will need to adjust its style. Most of the functions can be set through the style settings that come with the FineReport designer, but some need to be set using JS. The following is an example of hiding the Gantt chart grid lines.
1.2 Solution
Use JS to set the line stroke property in the chart to achieve the effect of hiding the grid lines.
Note: Mobile terminal is not currently supported
II. Example
2.1 General report and Aggregation report
Click Template -> Template Web Attributes -> Pagination Preview Settings -> select to set individually for this template-Add start loading event.
setTimeout(function() {
$('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);
2.2 Dashboard
Add an after initialization event to the form component, as shown in the following figure:
Because the drop-down button of the parameter pane will affect the JS implementation, so JS takes effect 1 second after initialization:
setTimeout(function() {
$('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);
setTimeout(function() {
$(".parameter-container-collapseimg-up").bind("click", function() {
setTimeout(function() {
$('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);
});
$(".parameter-container-collapseimg-down").bind("click", function() {
setTimeout(function() {
$('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);
});
}, 1000);
Note: 1000 in the code means a delay of 1 second, which can be adjusted according to the actual application scenario.
III. Preview effect
The effect is shown in the figure below, and the grid lines have been hidden.
Previous：JS Use Buttons to Switch Report Background Colors
