I. Overview
1. Version
Report sever vision | Support range | App version | Support function |
---|---|---|---|
10.0 | App、H5、Pad | 10.4.61 | Multi-chart switching supports customizing whether to display the switching button |
In order to improve the space utilization and the beauty of the report, the function of chart switching is often used in report design. The new version supports customizing whether to display the chart switch button. The user can freely switch the chart through this button. The sliding switch method is still supported, and the sliding range is enlarged to the entire chart area. The Chart Switching Attributes page supports setting of two switching methods, and the switching effects are shown in the following figure: Button: The user needs to slide the chart or click the button to switch.2. Application scenarios
3. Function introduction
Carousel: The chart switches automatically, and the carousel interval can be customized. You can choose whether to display the chart switch button, and the switch button is still valid when you click the switch button during automatic rotation.
II. Button
1. Method of operation
1) On theType page of chart component, click to openChart Switching Attributessetting page.
2) SelectButtonfor the switching method of the chart switching attributes page, set the style of the button, and click OK.
2. Effect description
Scenes | Chart type | Effect |
---|---|---|
Mobile terminal | CPT cell chart | Show left and right switch buttons |
FRM re-layout chart components | Hide left and right toggle buttons | |
FRM re-layout report block chart | Show left and right switch buttons | |
FRM retains layout chart component/report block chart | Show left and right switch buttons | |
Pad termial | CPT cell chart, FRM retain layout chart component/report block chart | Show left and right switch buttons |
Note 1: The mobile terminal in the scene contains both App and H5.
Note 1: The switch button here is the same button as the carousel arrow of the carousel switch mode, but the statement is different.
Note 2: When the chart type is FRM re-layout chart component, switch to the last chart. Switching from the last to the first chart is not supported. Other scenarios are supported.
3. Effect preview
Taking the FRM re-layout chart component as an example, the effect of hiding the toggle button is shown in the figure below:
4. Template download
The completed template can be found at: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Multi-chart_button_switching.frm
Click to download the template:
III. Carousel
1. Method of operation
1) On theType page of chart component, click to openChart Switching Attributessetting page.
2) SelectCarousel for the switching method of the chart switching attributes page , set whether to display the carousel arrow (switching button) and the carousel time interval, and clickOK.
2. Effect description
Carousel arrow settings | Scene | Chart type | Effect |
---|---|---|---|
Display | Mobile terminal | CPT cell chart | Show left and right carousel arrows |
FRM re-layout chart component/report block chart | Show left and right carousel arrows | ||
FRM reserved layout chart component/report block chart | Show left and right carousel arrows | ||
Pad terminal | All charts | Show left and right carousel arrows | |
Hide | Mobile terminal | CPT cell chart | Show left and right carousel arrows |
FRM re-layout chart components | Hide the left and right carousel arrows, support sliding switching, the internal sliding of the chart does not respond | ||
FRM re-layout report block chart | Show left and right carousel arrows | ||
FRM reserved layout chart component/report block chart | Show left and right carousel arrows | ||
Pad terminal | CPT cell chart, FRM reserved layout chart component/report block chart | Show left and right carousel arrows |
Note: Carousel to the last chart, the right arrow is grayed out and cannot be clicked. Switching from the last to the first chart is not supported.
3. Effect preview
Taking the FRM re-layout chart component to display the carousel arrow as an example, the carousel effect is shown in the following figure:
4. Template download
The completed template can be found at%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Multi-chart_carousel_switching.frm
Click to download the template: