使用Flotr绘制股票图
作者:Flying 日期:2011-12-20
HTML5虽然还在起草阶段，但这不妨碍Html5 Canvas的流行。不管是简单游戏还是绘制图表，Html5 Canvas完全都可以胜任，各种主流浏览器都对Html5 Canvas支持得很好，低版本的IE也可以使用Excanvas来兼容。我们可以预见：Html5 Canvas将代替Flash绘制交互性很强的股票图。本文推荐使用Flotr，它是目前我见过的功能最全、性能最好、最适合绘制股票的HTML5 JavaScript图表库。不仅支持各种类型的图表（包括蜡烛图），还支持各种交互操作，如鼠标跟踪、选择缩放等。适当扩展，完全可以做出Google Finance那样的效果：http://www.humblesoftware.com/finance/index。本文的实例这么复杂，主要介绍一下绘制股票图基本流程和注意事项。
点击此处查看本实例的效果。以Yahoo股票为例，页面加载完成后会绘制当天的收盘价格图。切换到不同的时间范围会重新绘制相应的图表。下面说一下基本流程。
一、知识准备
- 对Flotr有所了解，可以参看我上一篇文章：Flotr快速入门指南；
- 对prototype框架有所了解，尤其是Ajax和事件部分。Flotr整个库就是基于prototype框架的，本实例也会用到它。
二、数据准备
本实例是使用Ajax从http://chartapi.finance.yahoo.com/instrument/1.0/抓取的Json数据，数据格式如下：
{"data":[":[[1324287010000,14.9300],[1324287119000,14.9500]...]}
本实例只绘制一个数据系列，组成数据系列每个数据点对应一个x和y坐标的数组。其中，x坐标表示自1970年1月1日午夜（通用时间）以来的毫秒数，y坐标表示该时间的收盘价。
三、绘制图表
使用document的observe()方法侦听“dom:loaded”事件，以便加载完dom后调用updateChart方法绘制当天的收盘价格图。代码好下：
var f = null;
document.observe('dom:loaded', function(){
updateChart("1d", 10);
});
updateChart有两个参数。第一个参数表示当前的时间范围，如“id”、“5d”、“1y”等。另一个参数表示刻度线数量。
function updateChart(range, noTicks){
new Ajax.Request('stock.aspx?symbol=YHOO&range=' + range, {
method:'get',
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
if(json.data){
...
f = Flotr.draw($('container'), [json.data], options);
}else{
$('container').update('The data could not be retrieved.')
}
}
});
}
代码中选项设置比较多，如设置折线图填充为渐变色['#618192', '#749AAF']，其实这就和Flex Chart组件的区域图差不多。
四、更新图表
最后我们在时间范围按钮的onclick事件中调用updateChart()方法，通过Ajax重新获取数据，重绘相应的图表。其实，也可以使用按钮的observe()方法，在侦听click事件中回调updateChart()方法来实现图表更新。
注意事项：
- 本实例中x轴使用了时间轴，从而简化了应用。但是当时间范围为五天时，会在当天与下一天之间绘制一大段多余的连接线。这不是什么Bug，与时间轴的算法有关。Flex Chart组件的时间轴也有这个问题。可以用线性轴或通过后台计算显示设置刻度线来修正这个问题，下次再聊这个话题吧。
- 在显示数据点提示时，时间应该是本地时间。
上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
相关日志: