I. Overview
1. Expected effect
In the report, in order to analyze the data and see the trend and bottleneck of the data, the statistical graph is often used to display the data, because the graphical method is more intuitive than the numerical method.
For example, the sales volume of each salesperson, the user evaluation level, etc., it is hoped that a progress bar or other graphic signs will be displayed directly in the cell to indicate the data or level, as shown in the following figure:
1) Special symbols
2) Progress bar
2. Realization ideas
There are two ways to achieve the above effects:
1) Realized by plugin, please refer to: Cell progress bar plugin for details
2) Through HTML implementation, this article will introduce this production method in detail.
II. Example 1: Display data with special characters
1. Create report
Create a new normal report, create a new built-in dataset ds1, as shown in the following table:
2. Design report
The report body style, as shown in the figure below:
The specific settings of data columns and cells are shown in the following table:
| Cell | Insert element | Content | Font color |
|---|---|---|---|
| A3 | Data column | ds1.Name | Black |
| B3 | Data column | ds1.Professional score | Black |
| C3 | Formula | =repeat("|",B3*2) | Blue |
| D3 | Data column | ds1.Performance score | Black |
| E3 | Formula | =repeat("|",D3*2) | Green |
| F3 | Formula | =(B3+D3)/2 | Black |
| G3 | Formula | =repeat("★",F3) | Red |
For the specific usage of the Repeat function, please refer to: Repeat function
3. Effect preview
Save the template, clickpagination preview, the effect is as shown in the figure below:
III. Example 2: Progress bar displays data
1. Create report
Create a new normal report, create a new built-in dataset ds1, as shown in the following table:
2. Design report
The report body style, as shown in the figure below:
In cell C7, enter the formula:
"<table width=" + ROUND(B7 * 200 / sum(B7[!0;!0]), 2) + "% border=0 cellspacing=0 cellpadding=0> <tr> <td bgcolor=#0000FF><div color=#ffffff align=right>" + B7 + "</div></td> </tr> </table>"
The definition of the formula is shown in the following table:
| Code | Definition |
|---|---|
| "<table width=" + ROUND(B7 * 200 / sum(B7[!0;!0]), 2) | Set width |
| border=0 | The border width is 0, which means no border |
| cellspacing=0 | Cell spacing is set to 0 |
| cellpadding=0 | The distance between the content of the cell and the border is 0 |
| bgcolor=#00E3E3 | Set the background color of the cell to #00E3E3 |
| color=#ffffff | Set the content color of the cell to #ffffff |
| align=right | Set the content position of the cell to the right |
Note: The length of the progress bar is determined by the width, and the calculation of the width is a value that needs to be observed (such as: the proportion of a person's value in the entire staff or a certain attribute value of a person) multiplied or divided by one The ratio, such as 200 in the example. Similar effects can be achieved by using ROUND(B7 * 200, 2) or B7 * 200 in this example.
3. Set cell attributes
1) Select cell C7, click Cell Attributes> Style> Alignment, and set the Text Style to Single Line(Adjust Font), as shown in the figure below:
2) Select cell C7, click Cell Attributes> Other, and set Display Content to Display by HTML, as shown in the following figure:
4. Effect preview
Save the template, click pagination preview, the effect is as shown in the figure below:
IV. Template download
Refer to the completed template%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\bar.cpt
Click to download: