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

简介:

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

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

新建地图

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

wKiom1is9nzyABT-AAApJQfm_1Q077.png

数据准备

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

wKiom1is9oeTdNMOAAAjXyR3Fgw245.png

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

wKioL1is9pPRfdGIAAAtfC6hiFw766.png

自定义JS显示标签

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

wKiom1is9qDD1cpwAAAxgbrbSJw389.png

1
2
3
4
5
6
7
8
9
10
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如下:

wKioL1is9sOQJGdbAAAzQGfCLd0459.png

1
2
3
4
5
6
7
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;}

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

保存与预览

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

wKiom1is9tOR2myEAADar-ZoEOw685.png



本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1900104,如需转载请自行联系原作者

相关文章
|
4月前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
1月前
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
3月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
52 4
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
114 0
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
90 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
4月前
|
JavaScript NoSQL Serverless
函数计算产品使用问题之如何创建一个自定义运行时并指定Node.js版本
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
3月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
59 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘!v-model 与自定义验证综合运用,打造高效表单处理体验!
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架,其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定,简化表单元素值与 Vue 实例数据的同步过程;结合自定义验证规则,则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证,Vue.js 均提供了简洁有效的解决方案,有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证,开发者能够实时反馈错误信息并控制表单状态,从而增强应用的交互性与可靠性。
58 0