同步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的数据提示。

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

目录
相关文章
|
3月前
Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)
Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)
30 0
|
3月前
Echarts实战案例代码(40):tooltip使用formatter函数判断是否显示提示内容
Echarts实战案例代码(40):tooltip使用formatter函数判断是否显示提示内容
30 0
|
3月前
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
52 0
|
8月前
echarts两个折线图共用x轴且合并tooltip功能代码
echarts两个折线图共用x轴且合并tooltip功能代码
252 0
|
8月前
echarts修改tooltip默认样式(使用formatter函数拼接加工)
echarts修改tooltip默认样式(使用formatter函数拼接加工)
165 0
|
10月前
el-table组件内容过长时显示tooltip
el-table组件内容过长时显示tooltip
el-table组件内容过长时显示tooltip
|
11月前
|
JavaScript
FlexPaper控件实现文档的上传和预览
FlexPaper控件实现文档的上传和预览
54 0
FlexPaper控件实现文档的上传和预览
|
存储 容器 Kubernetes
Helm chart指南-系列(5)- 同步chart库
同步chart库 注意:这个样例适用于于提供chart库的Google Cloud Storage(GCS)存储bucket。 前提条件 安装gsutil 工具。这个样例依赖于gsutil rsync功能。
1306 0
|
Web App开发 .NET
相关产品
机器翻译
推荐文章
更多