js实现自动播放数据点提示联动图表

1. 描述

 

客户想实现地图自动播放数据点提示时可以联动其他图表显示对应区域的数据，如下图所示：

 

2. 思路

 

通过sql()函数获取地图数据的所有区域值并赋值给window.area，通过图表接口获取地图的的所有数据点allPoints，使用setInterval()函数循环window.area，将当前window.area[window.temp]区域值传给图表实现图表的数据刷新，并判断allPoints数据点，当数据点的区域名称等于当前window.area[window.temp]区域值，则显示相应区域的数据点提示。

获取地图chart0所有数据点：

<span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code><span style="color:teal">var</span> vanchart = FR.Chart.WebUtils.getChart(<span style="color:#dd1144">'chart0'</span>).vanCharts.charts[<span style="color:teal">0</span>];
<span style="color:teal">var</span> series = vanchart.series,
	allPoints = [];
<span style="color:#999988"><em>// 获取chart下的所有系列和所有数据点</em></span>
<span style="color:teal">for</span> (<span style="color:teal">var</span> i = -<span style="color:teal">1</span>; ++i < series.length;) {
	allPoints = allPoints.concat(series[i].points);
}</code></span></span>

图表chart1传递area参数值刷新数据js：

<span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code>FR.Chart.WebUtils.changeParameter(
	<span style="color:#dd1144">'chart1'</span>, {
		<span style="color:#dd1144">"area"</span>: <span style="color:#0086b3">window</span>.area[<span style="color:#0086b3">window</span>.temp]
	}
);</code></span></span>

地图显示数据点提示js：

<span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code>vanchart.showTooltip(allPoints[j]);</code></span></span>

 

3. 操作步骤

 

扫描二维码关注公众号，回复： 6173107 查看本文章

 

3.1 新建数据集

 

新建决策报表，新建两个数据集：

地图：SELECT * FROM 地图

图表：SELECT * FROM 地图 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

 

3.2 添加图表

 

添加三个图表：地图、饼图、柱形图，如下图所示：

地图属性数据设置如下：

饼图属性数据设置如下：

柱形图属性数据设置如下：

3.3 添加初始化事件

 

控件列表选择body，添加初始化事件：

在初始化界面的参数界面，新建一个area参数，参数值使用公式：sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)

初始化事件js代码如下：

<span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code><span style="color:#0086b3">window</span>.area = area;
<span style="color:#0086b3">window</span>.temp = <span style="color:teal">0</span>;
<span style="color:teal">var</span> len = <span style="color:#0086b3">window</span>.area.length;
<span style="color:teal">var</span> temp = <span style="color:teal">0</span>;
setTimeout(<span style="color:teal">function</span>() {
	<span style="color:teal">var</span> vanchart = FR.Chart.WebUtils.getChart(<span style="color:#dd1144">'地图'</span>).vanCharts.charts[<span style="color:teal">0</span>];
	<span style="color:teal">var</span> series = vanchart.series, allPoints = [];

	<span style="color:#999988"><em>/* 获取chart下的所有系列和所有数据点 */</em></span>
	<span style="color:teal">for</span> (<span style="color:teal">var</span> i = -<span style="color:teal">1</span>; ++i < series.length;) {
		allPoints = allPoints.concat(series[i].points);
	}

	setInterval(<span style="color:teal">function</span>() {
		<span style="color:#999988"><em>/*刷新饼图*/</em></span>
		FR.Chart.WebUtils.changeParameter(
			<span style="color:#dd1144">'饼图'</span>, {
				<span style="color:#dd1144">"area"</span>: <span style="color:#0086b3">window</span>.area[<span style="color:#0086b3">window</span>.temp]
			}
		);
                <span style="color:#999988"><em>/*刷新柱形图*/</em></span>
		FR.Chart.WebUtils.changeParameter(
			<span style="color:#dd1144">'柱形图'</span>, {
				<span style="color:#dd1144">"area"</span>: <span style="color:#0086b3">window</span>.area[<span style="color:#0086b3">window</span>.temp]
			}
		);

		<span style="color:teal">for</span> (<span style="color:teal">var</span> j = <span style="color:teal">0</span>; j < allPoints.length; j++) {
			<span style="color:teal">if</span> (allPoints[j].name == <span style="color:#0086b3">window</span>.area[<span style="color:#0086b3">window</span>.temp]) {
				<span style="color:#999988"><em>/* 使用vanchart.showTooltip展示数据点 */</em></span>
				vanchart.showTooltip(allPoints[j]);
			}
		}

		<span style="color:teal">if</span> (<span style="color:#0086b3">window</span>.temp == (<span style="color:#0086b3">window</span>.area.length - <span style="color:teal">1</span>)) {
			<span style="color:#0086b3">window</span>.temp = <span style="color:teal">0</span>;
		} <span style="color:teal">else</span> {
			<span style="color:#0086b3">window</span>.temp = <span style="color:#0086b3">window</span>.temp + <span style="color:teal">1</span>;
		}
	}, <span style="color:teal">2000</span>);<span style="color:#999988"><em>/* 间隔两秒循环一次 */</em></span>
}, <span style="color:teal">1000</span>);</code></span></span>

 

4. 预览效果

 

不支持移动端。

 

5. 已完成模板

 

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\29-js实现自动播放数据点提示联动图表.frm

右击存储模板