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 保存与预览
保存模板，点击填报预览，效果即如上。
| 欢迎光临 168大数据 (http://www.bi168.cn/) | Powered by Discuz! X3.2 |
