In the daily use of the map process, you will often encounter map labels, cue points and other displays do not meet our needs, need to write JavaScript code.
For example, in the process of using the map, you will find that many place names appear to deviate. This is when you need to use JavaScript for control. Take Heilongjiang and Inner Mongolia, for example, to describe how to customize map labels using JavaScript in Finereport.
New map
Take the area map as an example, create a new form, drag into the map (new feature) component, map the border to select the region under the map of China (provincial):
Data preparation
Create a new workbook, add a dataset Ds1,select*from map 1, select the chart, select the Chart property sheet-data as shown:
Select Chart Property sheet-styles > series, such as settings, border set to blue:
Custom JS Display Tags
Select Chart Property sheet-styles > tags, Content Selection customization, JS as follows:
 
function () {var points = This.points;var total = ' <div style= ' width:100%;height:100%; " > '; if (this.name== "Inner Mongolia Autonomous Region") {total + = ' <div align=center style= "margin-top:30px" ><span style= "font-size : 25px;color: ' +fr.contentformat (Points[1].value, ') + ' > ' +fr.contentformat (Points[2].value, ' #0. + ') + ' </ Span> ' +this.name+ ' </div> ';} else if (this.name== "Heilongjiang province") {total + = ' <div align=center style= "margin-top:100px;" ><span style= "Font-size:25px;color: ' +fr.contentformat (Points[1].value, ') + '" > ' + fr.contentformat (points [2].value, ' #0. xx ') + ' </span> ' +this.name+ ' </div> ';} Else{total + = ' <div align=center ><span style= ' font-size:25px;color: ' +fr.contentformat (Points[1].value, ') + ' > ' +fr.contentformat (Points[2].value, ' #0. xx ') + ' </span> ' +this.name+ ' </div> ';} for (var i = 0, len = points.length-2; i < Len; i++) {Total + = (' <div align=center> ' +fr.contentformat (Points[i].va Lue, ' #0. ') + ' </div> ');} total+= ' </div> '; Return TOtal;}
Div align=center style= "margin-top when reading the name of the Inner Mongolia Autonomous Region, we make a margin display position adjustment so that it does not show deviations
Fr.contentformat (value, ' #.##% ') is a numeric format customization, and the latter ' #.##% ' can be changed according to actual requirements;
this.points This parameter, when used in a map, represents a different series of points on the same area
Custom JS display Cue point
Select Chart Property sheet-styles > hints, Content Selection customization, JS as follows:
function () {var points = this.points; var total = ' <div style= ' width:100%;color:white ' > ', total + = ' <div align= Left style= "font-size:16px" > ' +this.name+ ' </div> '; for (var i = 0, len = points.length-1; i < Len; i++) {total + = ') <div align=left style= "font-size:13px" > ' +points[i].seriesname+ ': ' +fr.contentformat (Points[i].value, ') + ' </div> ';} return total;}
Here is a simple loop that loops through the parameters of our front-end settings and handles the parameters individually, including controlling font size and display formatting.
Save and preview
After the adjustment effect is as follows, the label position is correct, the hint uses the custom format:
How to customize map labels with javascript in Finereport