同步Flex Chart的数据提示

原文 http://www.riafan.com/sync-datatips-for-flex-chart/

图表数据提示的同步不仅包含单个图表内多个系列的数据提示的同步，也包含多个图表的数据提示的同步。有时图表纵轴的数值差别太大，放在一个 Chart中显示为多个系列不太合适。一种办法是使用多个纵轴，但轴多了界面会乱。另外一种办法是将不同的系列放在不同的Chart中显示。这种方法更常 用，但多个图表的数据提示同步相对比较麻烦。

首先应该实现鼠标横向跟踪的功能：在整个绘图区都能显示数据提示，只要给定坐标的横轴值与目标数据点横轴值相同，就能跟踪到鼠标指针下最近的数据点 提示。要实现这一功能，最好的方法是覆写 findDataPoints方法。只需要改写dist变量的算法即可：var dist:Number = (v.x – x)*(v.x – x);只用横轴值来计算，所以能沿横轴跟踪；覆写前是var dist:Number = (v.x – x)*(v.x – x) + (v.y – y)*(v.y -y);用了横纵轴值来计算，所以只有当鼠标指针移动到目标数据点上时，才能显示数据点提示。好了，测试一下鼠标横向跟踪功能。如果图表中有多个系列，可 以看到此时图表内部的数据提示是同步的。

当然，本实例有多个图表，要同步所有图表的数据提示。也就是说在一个图表上移动鼠标指针时，不仅要在该图表上显示数据提示，还要同时显示其它图表上对应的数据提示。我的解决思路来自以前写的一篇文章：使用dataTipItems显示特定的数据提示。代码如下：

1 2 3 4 5 6 7 8 9

public function addDataTip(data:Object, index:int):void{   var item:LineSeriesItem = new LineSeriesItem(this, data, index);   var arr:Array = new Array();   arr.push(item);   this.dataTipItems = arr; } public function removeDataTip():void{   this.dataTipItems = []; }

鼠标指移进图表时，其它图表的系列调用addDataTip方法来新增数据提示；鼠标指移出图表时，其它图表的系列调用removeDataTip方法来删除数据提示，从而同步多个Flex chart的数据提示。

点击此处查看该实例最终效果，点击此处下载该实例的源码。