How to customize map labels with javascript in Finereport

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):

650) this.width=650; "src=" Https://s4.51cto.com/wyfs02/M00/8D/DB/wKiom1is9nzyABT-AAApJQfm_1Q077.png "title=" 1.png "alt=" Wkiom1is9nzyabt-aaapjqfm_1q077.png "/>

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:

650) this.width=650; "src=" Https://s5.51cto.com/wyfs02/M01/8D/DB/wKiom1is9oeTdNMOAAAjXyR3Fgw245.png "title=" 2.png "alt=" Wkiom1is9oetdnmoaaajxyr3fgw245.png "/>

Select Chart Property sheet-styles > series, such as settings, border set to blue:

650) this.width=650; "src=" Https://s5.51cto.com/wyfs02/M01/8D/D8/wKioL1is9pPRfdGIAAAtfC6hiFw766.png "title=" 3.png "alt=" Wkiol1is9pprfdgiaaatfc6hifw766.png "/>

Custom JS Display label

Select Chart Property sheet-styles > tags, Content Selection customization, JS as follows:

650) this.width=650; "src=" Https://s5.51cto.com/wyfs02/M02/8D/DB/wKiom1is9qDD1cpwAAAxgbrbSJw389.png "title=" 4.png "alt=" Wkiom1is9qdd1cpwaaaxgbrbsjw389.png "/>

function () { var points = this.points;var total =  ' <div style= ' width : 100%;height:100%; " > '; if (this.name== "Inner Mongolia Autonomous Region") {total +=  ' <div 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 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 ><span style= ' Font-size:25px;color: ' +FR.contentFormat (points[ 1].value,  ') + ' > ' +fr.contentformat (points[2].value,  ' #0.) + ' </span> ' +this.name+ ' </div > ';} for (Var i = 0, len = points.length-2; i < len; i++) {total +=  (' <div  align=center> ' +fr.contentformat (points[i ].value,  ' #0 ') + ' </div> ');} total+= ' </div> ';  return total;}

Div style= "Margin-top When reading the name of the Inner Mongolia Autonomous Region, we make adjustments to the margin display position so that it does not show deviations

Fr.contentformat (value, ' #.##% ') in- line numeric format customization, the following ' #.##% ' can be changed according to actual needs;

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:

650) this.width=650; "src=" Https://s4.51cto.com/wyfs02/M01/8D/D8/wKioL1is9sOQJGdbAAAzQGfCLd0459.png "title=" 5.png "alt=" Wkiol1is9soqjgdbaaazqgfcld0459.png "/>

function () {var points = this.points; var total = ' <div style= ' width:100%;background-color: #808080; color:white ">" Total + = ' <div style= "font-size:16px" > ' +this.name+ ' </div> '; for (var i = 0, len = points.length-1; i < Len; I + +) {total + = ' <div 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:

650) this.width=650; "src=" Https://s5.51cto.com/wyfs02/M02/8D/DB/wKiom1is9tOR2myEAADar-ZoEOw685.png "title=" 6.png "alt=" Wkiom1is9tor2myeaadar-zoeow685.png "/>

How to customize map labels with javascript in Finereport