AngularJS整合Echarts做饼图

还记Angularjs指令怎样传递函数参数吗?我们将表格封装成了一个指令。如果不封装就没有传递函数参数的问题了吗?我们要重申的是,封装是必要的,封装可以复用代码。试想,如果在再加入一个图表,要求也可以按时间段下钻。如果不封装的话,下钻这块实现要写两次。而且真实场景多数是表格图表都会的。所以说还是封装成组件好。 继续阅读“AngularJS整合Echarts做饼图”

使用不同颜色显示Flex AreaSeries的正负值

在最近项目中,要求对数据系列正负值使用不同颜色来显示。也许你要问为什么不用Flex ColumnSeries呢?然后通过filterFunction设置不同颜色多简单。问题是数据系列的数据点太多,使用ColumnSeries性能不佳。因此只好用AreaSeries,事实上,设定AreaSeries的filterFunction根本不起作用。但我们可以通过设定自定义的areaRenderer来实现。 继续阅读“使用不同颜色显示Flex AreaSeries的正负值”

对齐多个Flex Chart的y轴

财经图表一般都由多个图表组成。与同步多个图表数据提示一样,多个图表还有对齐多个图表y轴的问题。正好有网友问到这个问题,特写此文小结一下。

最简单的办法就是动态设置gutterLeft或gutterRight样式。首先取得每个图表装订线大小,再比较获得水平装订线的最大值,当完成绘制后重新动态设置gutterLeft或gutterRight样式。如下面的代码: 继续阅读“对齐多个Flex Chart的y轴”

同步Flotr2 Chart的鼠标跟踪

同步Flotr2 Chart的鼠标跟踪比起同步Flex Chart的数据提示要麻烦,而且Flotr与Flotr2调用的API还不一样。Flotr中的“flotr:hit”事件对象有一个memo属性,而Flotr2中的“flotr:hit”事件对象其实就是一个nearest对象。不仅如此,在Flotr2中调用graph.hit(mouse);会报错,得使用graph.hit.drawMouseTrack(n);graph.hit.drawHit(n);来实现,详见本实例中的doHit函数: 继续阅读“同步Flotr2 Chart的鼠标跟踪”

同步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);用了横纵轴值来计算,所以只有当鼠标指针移动到目标数据点上时,才能显示数据点提示。好了,测试一下鼠标横向跟踪功能。如果图表中有多个系列,可以看到此时图表内部的数据提示是同步的。 继续阅读“同步Flex Chart的数据提示”