同步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的鼠标跟踪”

限制鼠标跟踪在Flotr2图表范围中显示

Flotr2 hit插件很好用,但有一个缺点:鼠标跟踪有时会超出图表范围显示。如果图表是满屏显示,那这就是个Bug了。其实,很容易就能限制鼠标跟踪始终在图表范围中显示。原理是这样的:鼠标跟踪显示后,如果它的位置超出图表右端,需要重新定位到west方向;它的位置超出图表顶端,重新定位到south方向。依次类推。如下代码: 继续阅读“限制鼠标跟踪在Flotr2图表范围中显示”

Flotr2简介

Flotr2是Flotr的分支,它有独立版和插件版。独立版对旧版本做了不少改进,不但移除了对Prototype的依赖还改进移动设备的支持,比如支持Touch事件。数据系列也有了改进,构成系列的每个数组可以支持多个元素,旧版的只支持两个(对应x和y)。插件版可灵活选择并自由扩展插件。详见Flotr2官网:http://www.humblesoftware.com/flotr2继续阅读“Flotr2简介”

使用Flotr自定义线性轴来显示时间

Flotr的轴默认为线性轴(mode=’normal’)。为什么要使用Flotr自定义线性轴来显示时间呢?正如上一篇文章所言:如果使用时间轴,当时间范围为五天时,会在当天与下一天之间绘制一大段多余的 连接线,而且轴标签有时会找不到对应的数据点而缺少实际意义。因此,有必要自定义线性轴而不是使用时间轴。

点击此处查看本实例的效果。是不是和http://www.riafan.com/advanced-linearaxis很相似呀?

是的,连算法都很相似。这里的所有日期标签是用axis.ticks数组来管理的,同样在一种日期格式下,当前标签与下一日期标签和上一标签的文本不相同时才显示出来。请参考下面代码: 继续阅读“使用Flotr自定义线性轴来显示时间”

使用Flotr绘制股票图

HTML5虽然还在起草阶段,但这不妨碍Html5 Canvas的流行。不管是简单游戏还是绘制图表,Html5 Canvas完全都可以胜任,各种主流浏览器都对Html5 Canvas支持得很好,低版本的IE也可以使用Excanvas来兼容。我们可以预见:Html5 Canvas将代替Flash绘制交互性很强的股票图。本文推荐使用Flotr,它是目前我见过的功能最全、性能最好、最适合绘制股票的HTML5 JavaScript图表库。不仅支持各种类型的图表(包括蜡烛图),还支持各种交互操作,如鼠标跟踪、选择缩放等。适当扩展,完全可以做出Google Finance那样的效果:http://www.humblesoftware.com/finance/index。本文的实例这么复杂,主要介绍一下绘制股票图基本流程和注意事项。 继续阅读“使用Flotr绘制股票图”