在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行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 align=center 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 align=center 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 align=center ><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 align=center 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 align=left style="font-size:16px">'+this.name+'</div>'; for(var i = 0, len = points.length-1; i < len; i++) {total +='<div align=left style="font-size:13px">●'+points[i].seriesName+':'+FR.contentFormat(points[i].value, '')+'</div>';} return total;}
此处做一个简单的循环,循环展示我们前端设置的参数,并对参数做单独的处理,包括控制字体大小,以及显示格式。
保存与预览
调整后效果如下,标签位置正确,提示采用了自定义格式:
相关推荐
FineReport支持多种不同的导出方式,直接使用FineReport内置导出按钮可以非常快捷方便的来对各种格式的输出,但是我们在web页面集成中的时候,往往只想将报表内容嵌入到iframe中,而工具栏以及工具栏上的按钮都会...
FineReport自定义css,只适用7.0系列版本。。。。。。
在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,如何可以实现呢?
FineReport作为插件化开发的报表软件,有些特殊需求的功能需要自己开发,开发的插件包帆软官方有提提供,可以去帆软论坛上找,本文将主要介绍如何开发一个自定义控件,这里讲讲方法论。
jQuery是一个快速的,简洁的JavaScript库,能让用户更方便地处理...因为FineReport报表解析后最终成为一个html页面,因此可以使用JS对报表进行各种处理,可以选择使用jQuery框架的所有方法对报表进行操作。
报表开发工具FineReport中js自定义按钮导出.pdf
FineReport报表工具自定义控件CSS概述
FineReport设计器有自动的消息推送功能,可设置报表定时推送和常规的日报周报推送。官方有自己的消息推送的接口,不过有些用户旺旺希望自己开发,符合自己需求的推送界面。 下面这个方案就从逻辑层面简单阐述一个...
配置FineReport服务器之前,首先确保机器上已经安装了Tomcat, Resin,Weblogic,Websphere等应用服务器之一; 在FineReport的安装软件中内置了一个jetty服务器,也可以启动它来浏览报表。
我们经常利用按钮进行一些页面值的处理工作,但是默认的逻辑造成,每次新填报的值,需要点击下空白区域或是执行某个其他操作才可以被正确读取,那么我们如何处理呢?
报表工具FineReport使用教程之自动计算日期.docx
很多报表工具都自带大量的函数,在正常情况下足够满足用户的报表制作需求,但是在一些特殊领域,可能需要一些特殊的函数,在这种情况下,报表工具FineReport提供了自定义函数机制,可以由用户根据业务需要自己来定义...
报表开发工具FineReport中如何把报表放到网页中显示
报表开发工具FineReport中如何把报表放到网页中显示
在报表开发工具FineReport中,报表的执行过程大体可分为两步:1、报表计算;2、页面转换。
主要介绍了 FineReport中自定义登录界面的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
FineReport作为插件化开发的报表软件,有些特殊需求的功能需要自己开发,开发的插件包帆软官方有提提供,可以去帆软论坛上找,本文将主要介绍如何开发一个自定义控件,这里讲讲方法论。需要的朋友一起来看下吧
在报表开发过程中,有些需求可能无法通过现有的功能来实现,需要开发人员二次开发,以FineReport为例,可以使用网页脚本、API接口等进行深入的开发与控制。 考虑到JS脚本开发的使用较多,这里先先简单介绍如何用JS对...
动态列报表,使用参数控件联动筛选需要展示的列的数据,该资源包下包含了已经完成的模板和JS以及所使用的函数公式。