文档章节

报表开发工具中开放的部分图表js接口列表

九月你好123
 九月你好123
发布于 2015/11/13 15:05
字数 1218
阅读 86
收藏 4
点赞 0
评论 0

1.. 描述

报表开发工具FineReport 8.0版本中开放了部分图表js接口,在具体应用的过程中很多人都不知道这些接口到底有什么作用,该怎么应用,所以根据我自己的应用在下面归纳了这些新开放js接口可以实现的功能和具体调用方法。

2. 接口属性

2.1 获取chart对象

FR.Chart.WebUtils.getChart("Cells__id")               

单元格

FR.Chart.WebUtils.getChart("Float__id")

悬浮元素

FR.Chart.WebUtils.getChart("id")

表单

2.2 chart数据设置

chart.dataRefresh()

重新从数据集取数,并刷新图表(刷新效果与动态刷新一致)

chart. setTitleVisible(boolean )

标题是否可见,参数为true可见,false不可见

chart.setTitleContent()

标题的值设置,可以为参数或者值

chart.setLegendVisible(boolean)

图例是否可见 , 参数为true可见,false不可见

chart.setSeriesInvisible([index])

设置哪些系列隐藏,数值数组格式,如:chart.setSeriesInvisible([0,1,3])则系列1,2,4隐藏;隐藏的系列图例也同样灰化

chart.setLabelVisible(boolean)

标签 是否可见, 参数为true可见,false不可见

chart.setLabelValue(分类名, 系列名, 标签的字符串值)

置对应的标签显示值(柱形图,面积图,折线图,条形图,圆环图,雷达图,组合图,全距图)

chart.setLableValue(系列名, 标签的字符串值)

(饼图)

chart.setLableValue(系列名,x,y,标签的字符串值 )

(散点图,气泡图)

chart.setLableValue(区域名,标签的字符串值 )

(地图)

chart.setLableValue(地址/经纬度,标签的字符串值 )

(gis地图,是地址还是经纬度按照模板设置) 股价图,仪表盘和甘特图不支持标签设置

chart.addAlertLine(name, value, color, align, isUseSecondValueAxis)

设置警戒线内容,值,颜色以及居左还是居右/上还是

chart.clearAlertLine()

清除所有警戒线

chart.setAnimationEnable(boolean)

设置图表是否开启动画,true为开启,false关闭

chart.setDraggable(boolean)

设置图表是否开启拖拽功能,true为开启,false关闭

chart.setZoom(boolean)

设置图表是否开启缩放,true为开启,false关闭

chart.setTooltipEnable(boolean)

设置是否开启数据点提示,true为开启,false关闭

chart.setTooltipValue( 分类名,系列名, html )

设置对应的分类和系列的数据点提示内容(柱形图,面积图,折线图,条形图,圆环图,雷达图,组合图 ,全距图)

chart.setTooltipValue(系列名, html)

(饼图)

chart.setTooltipValue(系列名,x,y,html)

(散点图,气泡图)

chart.setTooltipValue(index,区域名,html)

(地图,index为层级,最上层为0依次往下)

chart.setTooltipValue(地址/经纬度,html)

(gis地图,是地址还是经纬度按照模板设置)

chart.setTooltipValue(date,html)

(股价图)

chart.triggerTooltip(分类名,系列名)

触发对应的数据点提示 (柱形图,面积图,折线图,条形图,圆环图,雷达图,组合图 ,全距图)

chart. triggerTooltip(系列名)

(饼图)

chart.triggerTooltip(系列名,x,y)

(散点图,气泡图)

chart.triggerTooltip(index,区域名)

(地图)

chart.triggerTooltip(地址/经纬度)

(gis地图,是地址还是经纬度按照模板设置)

chart. triggerTooltip(date)

(股价图)

chart.setAxisTooltipEnable(boolean)

置图表是否开启坐标点提示,true为开启,false关闭

chart.setAutoRefresh(time)

设置图表自动刷新的时间

chart.refresh()

图表刷新,单位 秒

chart.sort(boolean)

使图表显示按照分类总值排序(柱形图包括堆积型的,条形图包括堆积型的,面积图包括堆积型的,折线图);true表示从小到大,false表示从大到小

chart.getGis()

获取百度地图map对象

注:股价图,仪表盘和甘特图不支持标签设置,甘特图和仪表盘没有数据点提示。

3. 示例

3.1 准备数据

新建工作薄,添加数据集,SQL语句为SELECT * FROM [销量] where 地区 ='华东'

3.2 插入折线图

以悬浮图表为例,点击插入>悬浮元素>插入图表,弹出图表向导对话框,选择折线图如下图:


点击确定

3.3 设置图表数据

图表数据源来自于数据集数据集,点击图表属性表-数据设置如下:


并查看图表的名称为Float2,具体查看方法可参考悬浮元素

3.4 添加按钮控件并设置js事件

在H1单元格,添加按钮控件,并设置按钮的名称为改变标记点的值,如下图


点击事件编辑,为按钮控件添加js事件,具体的JS代码如下:

1. chart=FR.Chart.WebUtils.getChart("Float2");//获取chart对象  

2. chart.setTooltipValue("孙林","牛肉干","1111");//修改孙林,牛肉干的标记点提示为修改后的内容1111;  

注:这里改变的是孙林、牛肉干对应的标记点的值

填报预览,点击按钮控件,效果如下



3.5 保存与预览

保存模板,点击填报预览,效果即如上。

© 著作权归作者所有

共有 人打赏支持
九月你好123
粉丝 10
博文 111
码字总数 112722
作品 0
杭州
方法对头,报表模板维护其实很简单

经常我们会遇到这样的一种情况,别人做的一张很复杂的报表模板,我们拿到后需要修改,但是却不知道该如何下手,不知道他原来在哪里写了什么东西……一个一个查看十分的麻烦…… 那么我们就可...

九月你好123
2015/07/16
0
0
ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。 官网的demo中是写得比较全了,但很多用不到的...

kevin小当家
2015/08/07
0
0
在团队中用 BIRT 进行报表开发

原贴地址:http://www.ibm.com/developerworks/cn/opensource/os-cn-eclipse-birtinteam/index.html 在团队中用 BIRT 进行报表开发 本文主要介绍如何在 BIRT 中创建,使用库( Library )和模...

一堆BUG
2012/02/28
0
0
项目经验总结-Eclipse图表工具Birt的使用技巧(四)

1.计算比率,数据库中存储的是例数,需要计算总数,这里要用到多维数据集中度量和度量的相除,即首先写出分子和分母的度量,然后自定义一个度量,如下: 2.修改图表上值得格式,对value Data点击for...

顽Shi
2014/01/21
0
0
行者/ECharts-Helper

ECharts-Helper 项目介绍 echart-helper是什么? echart-helper是一款echarts辅助开发插件,能够帮助开发者快速构建echart图表。 安装教程 引入jquery、echarts及echarts.helper三个文件即可...

行者
06/25
0
0
50个实用的JavaScript工具

JavaScript是一个功能强大的客户端脚本语言,许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验,并提供丰富的互动式组件和功能。虽然它的语法相当简单,但是对开发...

晨曦之光
2012/03/09
0
0
50个实用的JavaScript工具

【IT168 分析评论】JavaScript是一个功能强大的客户端脚本语言,许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验,并提供丰富的互动式组件和功能。虽然它的语法相...

晨曦之光
2012/03/09
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
使用JavaScript/HTML5 Charts创建3D柱状图

JavaScript/HTML5 Charts是amCharts下的一款JS图表控件,它支持多种图表类型和浏览器,是移动图表开发利器。今天为大家介绍一下如何用JavaScript/HTML5 Charts创建简单的3D柱状图,以下是详细...

牛奶哎营养
2013/12/17
0
3
如何把报表放到网页中显示(Web页面与报表简单集成例子)

1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML、ASP、JSP、PHP等,因此需要将制作好的报表嵌入到这些页面中。 FineReport制作...

九月你好123
2015/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(三)

工作队列:一个生产者,多个消费者,生产者直接将消息发送到rabbitmq的队列之中 默认采用的是轮询分配:即不管消费者处理信息的效率,队列给所有消费者轮流发送一条信息,直至消息发送完毕 ...

人觉非常君
14分钟前
0
0
Java 之 反射

反射,剖析 Java类 中的 各个组成部分,映射成 一个个 Java对象,多用于 框架和组件,写出复用性高的通用程序。 测试类代码如下: class Person { private String name; public St...

绝世武神
18分钟前
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
24分钟前
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
26分钟前
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
40分钟前
0
0
C语言数组和指针的语法糖

对于C语言,我可以这样秀:比如当创建一个数组arr[n]之后,一般我们去遍历数组的时候是for (int i = 0; i < n; i++) { a[i]; }但是我知道下表访问符[]是个语法糖,也就是说a[i]在编译器看来是...

ustbgaofan
48分钟前
0
0
Call to undefined function bcmath()的解决方法

乐意黎的ECS主机环境,Centos7.2 + PHP7 由于使用了bcdiv()函数,运行时总在抛错。 Fatal error: Call to undefined function bcmath() in /usr/loca/apache/htdocs/... on line 4 一查得知:......

dragon_tech
54分钟前
0
0
css优先级

..

architect刘源源
58分钟前
0
0
【转】Twitter的分布式自增ID算法snowflake

结构 snowflake的结构如下(每部分用-分开): 0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000 第一位为未使用,接下来的41位为毫秒级时间(41位的长度可以...

talen
今天
0
0
hive支持行级修改

Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置。要想支持行级insert、update、delete,需要配置Hive支持事务。 一、Hive具有ACID语义事务的使用场景 1. 流式...

hblt-j
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部