I. Overview
1. Application scenarios
When there are too many chart classifications and series, the horizontal display of the chart label text is more crowded, and it is hoped that the vertical display of the text can be realized. The effect is shown in the following figure:
JAR packages of 2020-11-02 and later versions already support setting the label vertical effect.
2. Implementation ideas
Use custom tags, then splice HTML styles in the returned tag values, and finally set to use HTML to parse the text content.
Note: This method does not support floating element charts and charts in decision reports.
II.Example
1. Data preparation
Create a New General Report, create a new dataset ds1, the database query statement is: SELECT * FROM Sales_Volume
2. Report design
1) Add a Column Chart to the cell, and bind data as shown below:
2) In the chart properties panel, select Style>Label, check Use Label, then edit the custom return value, click Use HTML to parse the text content, and finally set the label position to the Inside. The custom code is as follows:
function(){
return "<div style='width:10px;line-height:12px;white-space:normal'>"+this.value+"</div>";
}
3. Effect preview
Save the report, click Pagination Preview, the effect is as shown in the application scenario.
Note: Mobile terminal is not supported.
III.Template download
The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Chart Label Text Vertical.cpt
Click to download the template:
