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

编辑
文档创建者:天狮座 (78536 )     浏览次数:1122次     编辑次数:4次     最近更新:ukae 于 2018-08-29     

目录:

1. 描述编辑

有些时候,我们需要将数据提示点自动出现在报表上,实现自动播放数据点提示的效果。

此处以决策报表为例,不需要鼠标移动在图表的标记点上,自动循环的播放数据标记点上的提示。实现效果如下图:

222

普通报表实现方法可参考:[新]自动播放数据点提示

2. 示例编辑

2.1 数据准备

新建决策报表,添加数据库查询ds1:SELECT * FROM 销量 where 地区 ='华东'

222

2.2 模板设置

将折线图图表拖进报表中,如下所示:

222

数据配置如下所示:

222

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

2.3 添加事件

选中图表,添加“初始化后”事件,如下图所示:

222

setTimeout(function(){ var vanchart = FR.Chart.WebUtils.getChart('chart0').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) } },3000)

注:由于决策报表里没有加载结束后事件,只有初始化后事件,但是我们需要在决策报表加载结束后再执行这段代码,因此我们在代码前面加上setTimeout()延时函数才能让我们的自动播放数据点提示的就是起到作用。

注:1000ms代表的是事件加载结束后的时间,如果数据量庞大导致报表生成过慢,测试一下加载报表所需时间,换算成毫秒后,将1000替换。例如:报表加载需要15s,那么当前代码后面延迟的1000需要改成20000。

3. 保存预览编辑

保存模板,点击预览,实现效果如上图。

已完成模板,可参考:%FR_HOME%\webapps\webrootWEB-INF\reportlets\doc\frm\自动轮播数据提示点.frm


附件列表


主题: 图表应用
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

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

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