同步Flex Chart的数据提示

简介: 原文 http://www.riafan.com/sync-datatips-for-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的数据提示。

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

目录
相关文章
|
5月前
部署hexo后样式丢失问题
部署hexo后样式丢失问题
54 0
|
9月前
echarts图例legend实现默认选中显示状态的解决方案
echarts图例legend实现默认选中显示状态的解决方案
203 0
|
缓存 前端开发 JavaScript
laravel-admin1.x改变grid表格默认样式
laravel-admin1.x改变grid表格默认样式
204 0
laravel-admin1.x改变grid表格默认样式
|
JavaScript
FlexPaper控件实现文档的上传和预览
FlexPaper控件实现文档的上传和预览
66 0
FlexPaper控件实现文档的上传和预览
|
jenkins 持续交付
Jenkins美化---更新时日志输出带颜色
Jenkins更新输出日志改变颜色 Jenkins默认输出日志不带任何字体颜色,除了问题不容易排错影响我们看log的时间
911 0
Jenkins美化---更新时日志输出带颜色
|
存储 容器 Kubernetes
Helm chart指南-系列(5)- 同步chart库
同步chart库 注意:这个样例适用于于提供chart库的Google Cloud Storage(GCS)存储bucket。 前提条件 安装gsutil 工具。这个样例依赖于gsutil rsync功能。
1381 0