反馈已提交
网络繁忙
一般情况下,图表的「数据点提示」信息需要将鼠标移动到图形上才会显示出来。那么如何让图表的数据点提示信息自动轮播展示呢?预期效果如下图所示:
注:地图开启数据点提示自动轮播的方法有所不同,详细介绍参见文档:地图开启数据点提示轮播 。
使用之前先获取需要操作的 图表对象 ,然后调用该图表对象的 openAutoTooltip 方法即可开启图表数据点提示自动轮播的功能。
chart.openAutoTooltip(delay, initPoints]);
在调用该方法时,可绑定一个用于关闭自动轮播数据点提示的控制器 controller,通过controller.stop()方法,即可停止当前的轮播数据点提示自动播放,如下表所示:
注1:如果想要指定轮播间隔和需要显示数据点提示的数据点集合,则可以追加可选参数,关于获取指定数据点集合,可以参考 获取图表内特定的数据点对象 。
注2:图表轮播只能按照系列顺序轮播,不支持按照分类顺序轮播。
注3:该接口不支持扩展图表,不支持移动端。
新建普通报表,新建数据库查询 ds1,SQL 语句为:SELECT * FROM 销量 where 地区 ='华东'
首先预留两行单元格后面添加超链使用,从 A3 单元格开始合并一片单元格区域,合并后选中 A3 单元格,点击工具栏的「插入图表」按钮,插入「折线图」。如下图所示:
选中图表所在单元格,在属性面板右侧选中「单元格元素>数据」,绑定图表数据如下图所示:
选择「样式>标题」,取消勾选「标题可见」。如下图所示:
根据实际需要可进一步设置其他 图表样式,例如调整配色,坐标轴,字体大小颜色等,这里直接使用默认设置。
在 A1 单元格中输入文本「开启数据点提示轮播」,选中 A1 单元格,在右侧属性面板中点击 「超级链接>添加链接」,添加「JavaScript 脚本」超级链接,输入 JavaScript 代码如下:
//获取图表对象var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);// 开启数据提示轮播, 并将轮播控制器绑定到图表对象上vanchart.controller = vanchart.openAutoTooltip();
注1:获取图表块对象 FR.Chart.WebUtils.getChart("chartID") 中的 chartID 为当前图表的单元格序号,如上“A3”。
注2:若想修改轮播间隔时间,可修改 chart.openAutoTooltip(delay, initPoints) 中的 delay 参数。如上若为 vanchart.openAutoTooltip(5000),即轮播间隔时间为 5000 ms 即 5 s 。
步骤如下图所示:
扩展:仅指定的数据点提示轮播。例如:希望实现只有「值大于 400」的数据点提示可自动轮播,那么可使用如下所示 JavaScript 代码:
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//获取图表对象var points = []; vanchart.series.forEach(function (ser){//获取所有的数据提示点 points = points.concat(ser.points);}) points = points.filter(function (p){//筛选大于 400 的数据提示点 return p.value > 400;})var delay=2000; //切换时间间隔为2秒vanchart.controller = vanchart.openAutoTooltip(delay,points);//开启数据点提示轮播, 并将轮播控制器绑定到图表对象上
在 B1 单元格中输入文本「停止数据点提示轮播」,选中 B1 单元格,在右侧属性面板中点击 「超级链接>添加链接」,添加「JavaScript 脚本」超级链接,输入 JavaScript 代码如下:
//获取图表对象var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);// 停止自动轮循播放数据点提示vanchart.controller.stop();
在 C1 单元格中输入文本「继续数据点提示轮播」,选中 C1 单元格,在右侧属性面板中点击 「超级链接>添加链接」,添加「JavaScript 脚本」超级链接,输入 JavaScript 代码如下:
//获取图表对象var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//继续从停止位置播放数据点提示轮播vanchart.controller.moveOn();
保存模板,点击「分页预览」,效果如下所示:
注:不支持移动端。
上述示例是通过点击超链控制图表数据点提示轮播的开启、停止与继续,那么若希望预览模板时直接开启图表数据点提示轮播,不需要点击控制,可以给模板添加一个「加载结束」事件。
点击菜单栏「模板>模板 Web 属性>分页预览设置」,选择「为该模板单独设置」,在最下方添加「加载结束」事件,输入 JavaScript 代码如下:
注1:与单元格超链中的代码相比,这里需要添加一个 setTimeout() 延时函数,3000 表示 3000 ms 即 3 s。
注2:这里直接开启数据点提示轮播,无须绑定轮播控制器。
setTimeout(function(){//获取图表对象var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);// 开启数据提示轮播vanchart.openAutoTooltip();},3000)
新建决策报表,与普通报表示例一样,新建数据库查询 ds1,SQL 语句为: SELECT * FROM 销量 where 地区 ='华东' 。
1)先将 body 的布局方式改为「绝对布局」。
2)将折线图拖入 body 中,并适当拉大图表。
双击图表,在右侧属性面板点击「数据」,绑定图表数据如下图所示:
向 body 中拖入三个按钮控件,选中按钮,可在属性中修改「按钮名字」。如下图所示:
选中按钮控件,点击属性面板「事件」,分别给三个按钮添加点击事件。如下图所示:
注:在决策报表中 JavaScript 代码的写法与普通报表不同。
开启提示点轮播:
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);vanchart.controller = vanchart.openAutoTooltip();
停止提示点轮播:
var vanchart =FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0] ;vanchart.controller && vanchart.controller.stop();
继续提示点轮播:
var vanchart =FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0] ;vanchart.controller && vanchart.controller.moveOn();
保存模板,点击「PC 端预览」,效果如下图所示。
注1:不支持移动端。
注2:图表全屏展示时不支持数据点提示轮播。
与 2.5 节类似,若希望预览模板时直接开启图表数据点提示轮播,不需要点击按钮控制,可以给图表添加一个「初始化后」事件。JavaScript 代码如下:
setTimeout(function(){//获取图表对象var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);// 开启数据提示轮播vanchart.openAutoTooltip();},3000)
注:若为决策报表的报表块中的图表,JavaScript 代码如下:
setTimeout(function(){var vanchart=FR.Chart.WebUtils.getChart("A1","report0").getChartWithIndex(0);vanchart.openAutoTooltip();},3000)
1)普通报表
已完成模板可参见:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\控制图表数据点提示轮播.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\图表数据点提示自动轮播.cpt
点击下载模板:
控制图表数据点提示轮播.cpt
图表数据点提示自动轮播.cpt
2)决策报表
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\控制图表数据点提示轮播.frm
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\图表数据点提示自动轮播.frm
控制图表数据点提示轮播.frm
图表数据点提示自动轮播.frm
售前咨询电话
400-811-8890转1
在线技术支持
请前往「服务平台」,选择「在线支持」
热线电话:400-811-8890转2
总裁办24H投诉
热线电话:173-1278-1526
文 档反 馈
鼠标选中内容,快速反馈问题
鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。
不再提示
10s后关闭