I. Overview
1.1 Application
The chart can customize the labels of all categories or series, which will be described in detail below.
Custom single series label see document: Chart Custom Single Series Label
1.2 Function Entry
Customize text under Style>Label>Content, enter JavaScript code, check Use HTML parsing text content, to achieve label customization, detailed description of the setting method, please refer to the document: Chart uses HTML parsing text content
II. Example
2.1 Example 1: Label Custom Image
1) Prepare the template
Open the built-in template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\CustomAxisLabel.cpt
2) Custom label
Select the chart Attribute>Style>Label, check Use Label, click Custom, insert the custom style code, and click Use HTML parsing text content. At the same time, you can customize the background width and height according to the image size.
The JavaScript code is as follows:
function() {
if(this.value==$("td[id^=I1-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I2-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I3-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I4-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I5-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I6-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I7-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I8-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I9-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I10-]").text()) return '<table style="width:100%;
height:100%;
"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top10.png" ></td> </tr></table>';
else return this.value;
}You can specify the size of the tags when customizing the HTML. When the content is specified in HTML and the label size cannot be determined, it is used to specify the width and height of the label content.
Note 1: Including label, axis label, cordon label, and label (not including data point prompt).
Note 2: You can set the label content to be displayed in the center of the size range up, down, left, and right through HTML. When the label content cannot be displayed completely within the defined size range, the display will be truncated.
$("td[id^=I1-]").text() is to get the content of cell I1; when the label value is equal to I1, the label is displayed as a fixed picture top1-18.png, and so on.
Note: The data expanded by I1 has been sorted in descending order in SQL.
The picture is saved in the %FR_HOME%\webapps\webroot\help\picture folder, as shown in the following figure:
3) Effect preview
2.2 Example 2: Label Custom Data Format
1) Data preparation
Create a new normal report, add the ds1 dataset, and count the sales amount in each time period.
2) Insert the chart
Take the cell chart as an example, merge a piece of cells and insert a column chart.
3) Chart data settings
Select the chart, select the data in the attributes panel on the right, and set the chart data as shown in the figure below.
4) Chart style settings
In the attributes panel on the right, select Style>Label, click Custom, insert the custom style code, and click Use HTML parsing text content
Here we use FR.contentFormat(value,'#.##%') to customize the numeric format, and the following'#.##%' can be changed according to actual needs.
In this example, the calculation: proportion = series under category 1/sum of series under all categories, the format of proportion is'#.##%'.
The JavaScript code is as follows:
function() {
var points = this.series.points;
var total = 0;
for (var i = 0, len = points.length; i < len; i++) {
total += points[i].value;
}
return FR.contentFormat(this.value / total, '#.##%');
}Select Cell Element>Style>Axis>X Axis, and set the format.
You can further set the chart style in the chart attribute table according to your needs, such as adjusting the title and series interval, which will not be described in detail here.
5) Effect preview
2.3 Example 3: Series and Series Under the Label Custom Classification
1) Data preparation
Create a new normal report and add the built-in dataset File1.
2) Insert the chart
Take the cell chart as an example. To merge a cell, insert Column Chart>Stacked Column Chart.
3) Chart data settings
Select the chart and set the chart data in the attributes panel on the right, as shown in the figure below:
4) Chart style settings
In the attributes panel on the right, select Style>Label, check Use Label, click Custom, insert custom style code, and click Use HTML parsing text content.
The JavaScript code is as follows:
function() {
var point = this;
var series = this.series;
var points = this.points;
var validPoints = points.filter(function(p) {
return p.series.visible && p.visible && !p.isNull;
});
var len = points.length;
var vlen = validPoints.length;
if (point == validPoints[vlen - 1]) {
var value = 0;
for (var i = -1; ++i < len;) {
if (points[i].series.visible) {
value += points[i].getTargetValue();
}
}
return value;
} else {
return "";
}
}Note: It is recommended to remove the comments after copying the code to avoid confusion in the sentence format.
5) Effect preview
2.4 Example 4: Series Sum Under the Custom Classification of the Combo Chart Label
1) Prepare the template
Open the designer's built-in template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\Combination_chart_label_custom_series_sum.cpt
2) Custom column chart label
Choose Custom for the column chart label, insert the custom code, click Use HTML parsing text content, and set the position to the outside, as shown in the following figure:
The JavaScript code is as follows:
function() {
var point = this;
var points = this.points;
var val = 0;
if (point == points[points.length - 2]) {
for (var i = 0; i < points.length - 1; i++) {
val += points[i].value
}
return val;
}else{
return "";
}
}
3) Customize the label of the line chart
Just set the general label for the line chart, check Value, as shown in the following figure:
4) Effect preview
2.5 Example 5: Label Custom Font
1) Prepare the template
Open the built-in template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\.cpt
2) Label settings
Select the chart, select Style>Label in the attributes panel on the right, check Use label, click Custom, insert the custom style code, and click Use HTML parsing text content, select the Position to Outside Pie, and select the Traction Line.
The JavaScript code is as follows:
function(){
return '<span style="color:'+this.color+';"> '+this.value+' </span>';
}3) Effect Preview
III. Template Download
1) Example1
Refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\CustomAxisLabel.cpt
Click to download: CustomAxisLabel.cpt
2) Example2
Refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\CustomLabelDataFormat.cpt
Click to download: CustomLabelDataFormat.cpt
3) Example3
Refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\CustomLabelSeriesSum.cpt
Click to download: CustomLabelSeriesSum.cpt
4) Example4
Refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\Combination_chart_label_custom_series_sum.cpt
Click to download: Combination_chart_label_custom_series_sum.cpt
5) Example5
Refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\Label_custom_font.cpt
Click to download: Label_custom_font.cpt
Previous：Chart Label
