[新]自动播放数据点提示

编辑
文档创建者:Holly (72831 )     浏览次数:3306次     编辑次数:14次     最近更新:ukae 于 2018-08-29     

目录:

1. 描述编辑

用户在报表中可以通过js获取图表对象,如何获取详细点击[新]图表接口,并且触发某个数据的选中状态,数据点提示,实现自动播放数据点提示效果。

222

此处以普通报表为例,决策报表实现方法可参考:[新]自动循环播放数据点提示

2. 示例编辑

2.1 数据准备

新建工作簿,添加数据库查询ds1:SELECT * FROM 销量 where 地区 ='华东'

2.2 图表制作

 合并一片单元格(此处合并后的单元格为A3),插入折线图,数据设置如下:

222

按照需要可在图表属性表中进一步设置图表样式,例如调整配色,坐标轴,字体大小颜色,这里不再一一介绍

2.3 插入按钮控件

在图表上方插入两个按钮控件,按钮名称分别为【开启数据点提示轮播】和【关闭数据点提示轮播】

给第一个按钮添加点击事件,点击按钮使第一个系列下的提示点实现自动轮播:

var vanchart = FR.Chart.WebUtils.getChart('A3').vanCharts.charts[0], openAutoTooltipCarouselDelay = 1000; openAutoTooltipCarousel(); function openAutoTooltipCarousel(ele){ var series = vanchart.series; // 获取chart下的所有系列 // 获取系列第一个系列的所有数据点 // 注意,每次只能显示一个数据点提示,如果需要显示多个数据点的提示内容,可以在plotOptions里面开启数据提示共享 var points = series[0].points, pointsLen = points.length; // 默认的提示轮播从第一个点开始 var pointIndex = 0; window.openAutoTooltipCarouselTimer = setInterval(function (){ // 遍历series下面每个系列的点 // 使用vanchart.showTooltip依次展示不同索引的数据点 vanchart.showTooltip(points[pointIndex]); pointIndex < pointsLen - 1 ? pointIndex++ : pointIndex = 0; }, openAutoTooltipCarouselDelay) }

给第二个按钮添加点击事件,点击按钮使提示点结束轮播:

var vanchart = FR.Chart.WebUtils.getChart('A3').vanCharts.charts[0]; //获取图表对象 closeAutoTooltipCarousel(); function closeAutoTooltipCarousel(){ clearInterval(window.openAutoTooltipCarouselTimer); vanchart.hideTooltip(); //关闭数据点提示 }
2.4 保存与预览

保存模板,点击填报预览,点击【开启数据点提示轮播】按钮即可实现如上效果。

在线查看模板效果请点击:提示点轮播折线图.cpt

已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewLineChart\提示点轮播折线图.cpt

2.5 轮播所有数据点提示

将第一个按钮中的js代码修改如下,即可实现所有系列下地提示点轮播:

var vanchart = FR.Chart.WebUtils.getChart('A3').vanCharts.charts[0], openAutoTooltipCarouselDelay = 1000; openAutoTooltipCarousel(); function openAutoTooltipCarousel(ele){ var series = vanchart.series, allPoints = []; // 获取chart下的所有系列和所有数据点 // 把所有系列的点连接到新数组allPoints for(var i = -1; ++i < series.length;){ allPoints = allPoints.concat(series[i].points); } pointsLen = allPoints.length; // 默认的提示轮播从第一个点开始 var pointIndex = 0; window.openAutoTooltipCarouselTimer = setInterval(function (){ // 遍历series下面每个系列的点 // 使用vanchart.showTooltip依次展示不同索引的数据点 vanchart.showTooltip(allPoints[pointIndex]); pointIndex < pointsLen - 1 ? pointIndex++ : pointIndex = 0; }, openAutoTooltipCarouselDelay) }

附件列表


主题: 图表应用
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]