Custom Label or Prompt by the Rich Text

Version

Note:

You are advised to keep the local and remote JAR packages consistent, as discrepancies may lead to style changes.

Application Scenario

In the past, you could only customize labels or prompts by the JavaScript code, which not only increases the report development difficulty, but also requires a high code ability.

Therefore, the Rich Text custom label or prompt function is introduced to satisfy most of the needs for custom personalized Label or Prompt. In Rich Text Editor, you can select parameters to be displayed for Label or Prompt, set the display format, font style, etc., and input text descriptions combined with parameters.

Function Description

All charts support the custom rich text Prompt. Gauge, Gantt Chart, and Structure Chart do not support the custom rich text Label.

Taking Label as an example, you can choose Style > Label > Rich Text > Edit Rich Text to open the rich text editor. The rich text editor has three setting items, namely Add Field, Field Setting, and Font Style, as shown in the following figure.

Field Adding

You can add the following two types of fields as parameters in Rich Text:

General field: Category Name, Series, Value, and Percentage

Dataset field: All the fields in the selected dataset when the data source is Dataset Data

Note:

You can add Dataset Field for only pie charts (excluding category labels), column charts, bar charts, line charts, area charts, radar charts, and combination charts.

Click + behind Category Name, Series, Value, Percentage, or dataset fields in Add Field in the upper left of the rich text editor to add parameters to the editing panel below.

If you want to delete a parameter, move the cursor to the edit panel below, and delete the parameter.

Field Setting

You can set the field format in Field Setting in the upper right of the rich text editor.

1. General field: After selecting a field, you can set the field format to General, Number, Percentage, Currency, Scientific Notation, Data, Time, or Text. The field format is set to General by default, as shown in the following figure.

2. Dataset field: The Format setting is the same as that of general fields. In addition, you can also set Summary of dataset fields to First, Last, Sum, Average, Maximum, Minimum, or Count. Summary is set to First by default, as shown in the following figure.

Note:

No fixed sequence exists between field addition and field format setting. If you add multiple identical fields, the last one will take precedence.

Font Style

You can set the font style in two ways in the rich text editor.

1. Auto: You only need to edit the text content. The font style follows the default logic of the system.

2. Custom: The font style setting options are on the right side, allowing you to customize the font, font size, text color, and alignment method.

Note:

1. If you want to change the style of a text, you need to select the corresponding text on the editing panel.

2. When you select Custom, since the font options are not displayed based on the fonts installed on the device, you can only select fonts from a few fixed options shown in the following figure.

3. The unit of font is px, not pt.

The following takes the rich text custom prompt as an example to explain how to use the function.

Custom Prompt

1. Select the stacked column chart, choose Style > Prompt > Rich Text on the chart property panel, click Edit Rich Text, and the rich text editor dialog box pops up.

2. Delete the original parameters on the editing panel, select the parameter Percentage in the upper left of the rich text editor, change the percentage format to #0% on the upper right of the rich text editor, and click + to add Percentage to the editing panel.

3. Select the font style on the editing panel as Auto, move the cursor before Percentage, enter Proportion to Total Amount, and click OK.

Effect Display

1. PC

Save the report, and click Pagination Preview. The following figure shows the effect of prompts when you move the cursor over the column chart.

2. Mobile Terminal

The report can be previewed on both the DataAnalyst app and the HTML5 terminal. The following figure shows the effect.

The completed template can be found in: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Advanced\Chart\ColumnChart\Rich_Text_Custom_Tooltip.cpt

For details, you can download the template: Custom Prompt by Rich Text.cpt