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

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

目录
相关文章
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
94款超级漂亮的box-shadow样式 复制即用
94款超级漂亮的box-shadow样式 复制即用
232 0
94款超级漂亮的box-shadow样式 复制即用
|
4月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
56 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
8月前
|
Web App开发 前端开发 算法
现代CSS样式重置最佳实践!(下)
现代CSS样式重置最佳实践!(下)
|
8月前
|
前端开发 JavaScript
现代CSS样式重置最佳实践!(上)
现代CSS样式重置最佳实践!(上)
189 0
生产环境element icon乱码展示
生产环境element icon乱码展示
365 0
|
JavaScript
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
1414 0
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
|
JavaScript
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
694 0
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置