Chart uses HTML parsing text content

1. Application scenarios

You can use HTML code to customize chart title, legend, label, etc. After you choose to Use HTML to parse the text content, the title, legend, label, etc. will change the style according to the HTML code during the front-end preview.

Note 1: When filling in HTML code for text, you can't use formula, just edit directly in the text box.

Note 2: HTML parsing can be used in preview; only some statements are supported in export.

Take the title as an example. In the example, HTML code is used to customize the line chart title. The final style is as follows:

2. Function entrance

1) Title

2) Legend (map and drill map are in Gradient Color or Section)

3) Label

4) Coordinate axis

5) Conditional Formatting- Data Point Tips

6) Conditional Formatting - Label

3. Export support

2020-07-06 The jar package and later versions support HTML parsing text export (charts are exported to pictures, Excel, PDF, etc.). When the sample chart is exported to excel, the title of HTML text parsing is exported normally, as shown in the figure below:

At present, some tags and inline styles are supported. Details are as follows:

• Only Tags: <b>, <strong>, <i>, <em>, < br/>, <span> are supported

• Inline styles are only supported for <span>

• Only inline styles are supported: font-size, font-family, font-style, font-weight and color (when font-weight is set to bold, only bold is supported, but not bolder)

• Nesting between tags is not supported

• The exported HTML text only supports horizontal display, not rotation

• Nesting format of label is not supported, for example: <span> parent node <span> child node</span></span>

1. Prepare template

Open designer built in template %fr_Home%/webapps/Webroot/WEB-INF/reportlets/doc-EN/Chart/LineChart/HTML_titile_example.cpt

Or click download template: 

HTML_title_example.cpt

2. Custom title

Select Style > Title in the property panel, check the title to see it, input HTML code in the text edit box, and light up to Use HTML to parse text content, as shown in the following figure:

The HTML code is as follows:

<span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: grey;">Annual sales</span>

3. Effect preview

1) PC terminal

Save the report, click pagination preview, and the user-defined Title Effect is shown in the following figure:

2）Mobile terminal

Both app and H5 preview are supported, and the effect is shown in the following figure:

4. Chart export

When paging preview, export the report as an excel file.

The chart effect in the file is shown in the figure below:

Completed template, please refer to %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\LineChart\HTML_title_example.cpt

Or click download template: 

HTML_title_example.cpt

Here are some common writing methods of HTML text parsing, which are convenient for users to understand and reference.

1. Single line display effect of single label

<span style="color:blue;"> New chart title </span>

<b> New chart title </b>

<i> New chart title </i>

<span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">New chart title</span>

2. Line feed display effect of single label

<span style="color:blue;">New <br> chart title</span>

<span style="color:blue;">New <br> Chart <br> title</span>

<em>New chart < br > table title</em>

3. Single line display of multiple labels

<b>New</b><i>Chart </i>

<b>New</b><i>Chart</i><em>title</em>

<span style="color:blue;">New</span><i>Chart</i><em>title</em>

4. Multiple label wrap display

<b>New<br>Chart</b><br>

<b>New<br>Chart</b><br><em>Title</em>

<b>New </b><i>Chart</i><br><em>title</em>