使用Flotr绘制股票图

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”:[[[1335346249000,603.2600],[1335346317000,604.6700],…[1335369540000,609.7100]]}

本实例只绘制一个数据系列,组成数据系列每个数据点对应一个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有两个参数。第一个参数表示当前的时间范围,如“1d”、“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组件的时间轴也有这个问题。可以用线性轴或通过后台计算显示设置刻度线来修正这个问题,下次再聊这个话题吧。
  • 在显示数据点提示时,时间应该是本地时间。

更多了解Html5 JavaScript图表库:

发表评论