反饋已提交
網絡繁忙
地图自动播放数据点提示时,可以联动其他图表,效果如下图所示:
实现数据点提示自动轮播需要调用接口:chart.openAutoTooltip([delay, initPoints]);,该接口的详细介绍可以参见文档 地图开启数据的提示轮播 的说明。
1)新建决策报表,新建数据集地图,SQL 语句为:SELECT * FROM 地图
2)新建数据集图表,SQL 语句为:SELECT * FROM 地图 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}
注:参数 area 是联动的关键,地图轮播时通过 area 参数传递地区,使图表数据集中 SQL 获取到该地区的数据。
拖入三个图表组件:地图、饼图、柱形图,如下图所示:
地图和图表在数据和样式上的设置此处不详细介绍,下面主要讲下如何实现轮播提示点时可以联动图表。
选中 body,添加一个初始化后事件,如下图所示:
在初始化事件的参数界面处,新建一个 area 参数,参数值使用公式:sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)
JavaScript 代码如下:
setTimeout(function() { var autoTooltipDelay = 3; // 默认3s播放一个提示. // 第一步, 拿图表实例. var vanchart = FR.Chart.WebUtils.getChart('地图').getChartWithIndex(0); // 第二步, 筛选出区域名称满足的所有的系列的点, 用于传递给自动数据提示接口. var points = vanchart.series.reduce(function(points, ser) { return points.concat(ser.points); }, []).filter(function(point) { return area && area.indexOf(point.name) >= 0; }); // 第三步, 保存旧的显示提示方法 var oldChartShowTooltip = vanchart.showTooltip; // 第四步, 重写新的提示方法, 在提示的同时触发联动. vanchart.showTooltip = function(point) { oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments)); var areaName = point.name; changeParameter(areaName); } // 第五步, 使用轮播提示接口触发轮播数据提示 vanchart.openAutoTooltip(autoTooltipDelay * 1000, points); // 修改参数, 联动其他图表或者组件. function changeParameter(areaName) { /*刷新饼图*/ FR.Chart.WebUtils.changeParameter( '饼图', { "area": areaName } ); /*刷新柱形图*/ FR.Chart.WebUtils.changeParameter( '柱形图', { "area": areaName } ); }}, 2000);
保存模板,点击PC端预览,效果如1.1预期效果中所示。
注:不支持移动端。
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\自动轮播数据点提示时联动其他图表.frm
点击下载模板:自动轮播数据点提示时联动其他图表.frm
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉