I. Overview
1. Application scenarios
The rounded corner and width of the column in the column chart can be customized, as shown in the following figure:
2. Idea to achieve
Set the column width: select style > series > style in the property panel, fix the column width, and click Yes to enter the customized column width value.
Set rounded corner: select style > series > border in the property panel, and enter the value.
3. Application Examples
The built-in component reuse function can be used in the decision report, and the component style can be quickly reused by directly replacing the data to realize the custom column rounded corner properties and width effects.
Component | describe | renderings |
---|---|---|
Gradient column chart with background color | 1) This component is suitable for fresh style templates 2) Using auxiliary data, let each column display on the background color column of the same height, and display the data size more beautifully and directly | |
Ring Pie | 1) This component is suitable for light-colored minimalist style templates 2) Use a circular pie chart to clearly show the proportion of each part |
II. Examples
1. Data preparation
Create a new general report, add dataset ds1, and the SQL statement is: select * from sales_basic
2. Design report
1)Merge a range cell and insert the column chart, as shown in the following figure:
2)In the property panel, click data to bind column chart data, as shown in the following figure:
3)Select the chart, click style > Series in the property panel, click Yes for the fixed column width, enter a fixed value of 20, and enter 10 for the rounded corner, as shown in the following figure:
3. Effect preview
1)PC terminal
Save the template and click pagination preview. The effect is as follows:
2)Mobile terminal
III. Template download
Completed template, see %FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc-EN/Chart/ColumnAndBar/rounded_width.cpt
Click download template: rounded_width.cpt