FineReport中如何用JavaScript自訂地表徵圖簽

標籤：javascript   標籤   自訂   finereport   提示點   

在日常使用地圖過程中，通常會遇到地表徵圖簽，提示點等顯示不滿足我們的需求，需要進行JavaScript代碼編寫。

例如：在使用地圖過程中，會發現很多地名顯示的位置偏離。這時候就需要使用JavaScript進行調控。以黑龍江和內蒙古為例，來介紹下如何在FineReport中利用JavaScript自訂地表徵圖簽。

建立地圖

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

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" />

資料準備

建立活頁簿，添加資料集ds1，SELECT*FROM地圖1，選中圖表，選擇圖表屬性工作表-資料，如所示：

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

選擇圖表屬性工作表-樣式>系列，如設定，邊框設為藍色：

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

自訂JS顯示標籤

選擇圖表屬性工作表-樣式>標籤，內容選擇自訂，JS如下：

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=="內蒙古自治區"){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如下：

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

此處做一個簡單的迴圈，迴圈展示我們前端設定的參數，並對參數做單獨的處理，包括控制字型大小，以及顯示格式。

儲存與預覽

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

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

FineReport中如何用JavaScript自訂地表徵圖簽