FineReport中如何用JavaScript自定义地图标签

本文介绍如何在FineReport中使用JavaScript自定义地图标签和提示点,通过调整显示位置和格式,解决地名显示偏离的问题。

在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写。

例如:在使用地图过程中,会发现很多地名显示的位置偏离。这时候就需要使用JavaScript进行调控。以黑龙江和内蒙古为例,来介绍下如何在FineReport中利用JavaScript自定义地图标签。

新建地图

以区域地图为例,新建表单,拖入地图(新特性)组件,地图边界选择区域地图下的中国(省级):

数据准备

新建工作簿,添加数据集ds1,SELECT*FROM地图1,选中图表,选择图表属性表-数据,如下图所示:

选择图表属性表-样式>系列,如下图设置,边框设为蓝色:

自定义JS显示标签

选择图表属性表-样式>标签,内容选择自定义,JS如下:


点击(此处)折叠或打开

  1. function(){ var points = this.points;
  2. var total = '
    ';
  3. if(this.name=="内蒙古自治区")
  4. {total += '
    <span style="font-size:25px;color:'+FR.contentFormat(points[1].value, '')+'">' +FR.contentFormat(points[2].value, '#0.00')+''+this.name+'
    ';}
  5. else if(this.name=="黑龙江省")
  6. {total += '
    <span style="font-size:25px;color:'+FR.contentFormat(points[1].value, '')+'">'+ FR.contentFormat(points[2].value, '#0.00')+''+this.name+'
    ';}
  7. else{total += '
    <span style="font-size:25px;color:'+FR.contentFormat(points[1].value, '')+'">'+FR.contentFormat(points[2].value, '#0.00')+''+this.name+'
    ';}
  8. for(var i = 0, len = points.length-2; i < len; i++)
  9. {total += ('
    '+FR.contentFormat(points[i].value, '#0.00')+'
    ');}
  10. total+='
'; return total;}


div align=center style="margin-top当读取名字为内蒙古自治区时候,我们进行margin显示位置的调整,使其不显示偏离

FR.contentFormat(value, '#.##%')行数值格式自定义,后面的'#.##%'可以根据实际需求进行更改;

this.points这个参数在地图中使用时表示同一个区域上的不同的系列的点

自定义JS显示提示点

选择图表属性表-样式>提示,内容选择自定义,JS如下:


点击(此处)折叠或打开

  1. function(){var points = this.points ;
  2. var total = '
    ';
  3. total +='
    '+this.name+'
    ';
  4. for(var i = 0, len = points.length-1; i < len; i++)
  5. {total +='
    ●'+points[i].seriesName+':'+FR.contentFormat(points[i].value, '')+'
    ';}
  6. return total;}


此处做一个简单的循环,循环展示我们前端设置的参数,并对参数做单独的处理,包括控制字体大小,以及显示格式。

保存与预览

调整后效果如下,标签位置正确,提示采用了自定义格式:

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21472864/viewspace-2134079/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/21472864/viewspace-2134079/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值