FineReport中如何用JavaScript自定義地圖標籤

在平常使用地圖過程當中，一般會遇到地圖標籤，提示點等顯示不知足咱們的需求，須要進行JavaScript代碼編寫。

例如：在使用地圖過程當中，會發現不少地名顯示的位置偏離。這時候就須要使用JavaScript進行調控。以黑龍江和內蒙古爲例，來介紹下如何在FineReport中利用JavaScript自定義地圖標籤。

新建地圖

以區域地圖爲例，新建表單，拖入地圖（新特性）組件，地圖邊界選擇區域地圖下的中國（省級）：

數據準備

新建工做簿，添加數據集ds1，SELECT*FROM地圖1，選中圖表，選擇圖表屬性表-數據，以下圖所示：

選擇圖表屬性表-樣式>系列，以下圖設置，邊框設爲藍色：

自定義JS顯示標籤

選擇圖表屬性表-樣式>標籤，內容選擇自定義，JS以下：

function(){ var points = this.points;
var total = '<div style="width:100%;height:100%;">';
if(this.name=="內蒙古自治區")
{total += '<div style="margin-top:30px"><span style="font-size:25px;color:'+FR.contentFormat(points[1].value, '')+'">' +FR.contentFormat(points[2].value, '#0.00')+'</span>'+this.name+'</div>';}
else if(this.name=="黑龍江省")
{total += '<div style="margin-top:100px;"><span style="font-size:25px;color:'+FR.contentFormat(points[1].value, '')+'">'+ FR.contentFormat(points[2].value, '#0.00')+'</span>'+this.name+'</div>';}
else{total += '<div ><span style="font-size:25px;color:'+FR.contentFormat(points[1].value, '')+'">'+FR.contentFormat(points[2].value, '#0.00')+'</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.00')+'</div>');}
total+='</div>'; return total;}

div style="margin-top當讀取名字爲內蒙古自治區時候，咱們進行margin顯示位置的調整，使其不顯示偏離

FR.contentFormat(value, '#.##%')進行數值格式自定義，後面的'#.##%'能夠根據實際需求進行更改；

this.points這個參數在地圖中使用時表示同一個區域上的不一樣的系列的點

自定義JS顯示提示點

選擇圖表屬性表-樣式>提示，內容選擇自定義，JS以下：

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;}

此處作一個簡單的循環，循環展現咱們前端設置的參數，並對參數作單獨的處理，包括控制字體大小，以及顯示格式。

保存與預覽

調整後效果以下，標籤位置正確，提示採用了自定義格式：