限制鼠标跟踪在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绘制股票图”

Flotr快速入门指南

Flotr是一个基于Prototype开发的javascript绘图工具。支持图例、鼠标跟踪、图片区域选择、图片缩放、添加事件钩子(event hook)、通过CSS设置样式等。本文是快速创建并运行Flotr的入门指南。首先确保你从Google Project得到Flotr的副本。

准备HTML

要使用Flotr,你得在header标签中包含如下脚本:

<!--[if IE]><script language="javascript" type="text/javascript" src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="path/to/prototype-x.x.x.x.js"></script>
<script language="javascript" type="text/javascript" src="path/to/flotr.js"></script>

第一个script标签包含了一个html条件语句, 这样可以确保只有在用户使用IE时才包含excanvas?javascript文件。Firefox、Safari和Opera 9 支持canvas标签来绘制2d图形。IE有一些类似于canvas标签的东西,叫VML。Excanvas为IE增加了canvas功能,但其它浏览器不需要它。 继续阅读“Flotr快速入门指南”