使用canvas绘制股票图【envision.js】

来源：互联网发布：阿里云开放端口编辑：程序博客网时间：2024/05/22 05:22

最近的一个小项目需要用到一些财经图表，如股票图，净值曲线图，投资组合饼图等。按照产品的要求，这些图表需要在移动设备【手机，平板电脑】

和pc端良好运行。我们都知道在ios设备上没法运行flash，所以必须把使用flash开发的方案放弃，只能转向采用javascript开发，最新的移动设

备上的浏览器对javascript支持越来越好，同时用于图形图像开发的canvas属性在这里也支持良好。

选好了技术方案，那就开发吧，很显然如果从零要把这些图表开发的比较完美还是很费时费力的，再说了不要重复发明轮子不是一直教导我们吗。那

么我们就来看看有没有现成的轮子供我们使用呢，经过搜索和查找，envision.js这个javascript图形类库引起了我的注意，这个类库的features

支持所有现代浏览器，从IE6+
支持触摸特性，移动设备
财经图表
时间序列图表
能够自定义图表
基于flotr2,同时也能够适配其他库

它的这些特性已经完全能够满足我们的需求，并且基本不需要进行太多的开发。深入到envision.js的源代码，可以发现他是基于插件开发的，一个很复杂

的图表都是基于一个个插件来组装的，同时他内部也提供了一些现成的Template来让我们马上使用，这些template就是用一些插件组装起来的。

在网上搜了很长时间，发现这个库的文档比较少，实例也比较简单，不够全面，我们怎么修改图形中的颜色以及其他样式都不是很清楚，那么

下面我们来通过一个股票图来学习怎么使用，以及如何配置和修改图表的外观，如图，具体图示可以参见这里：

黄色【price】
红色【volume】
蓝色【connection】
绿色【summary】

上面的图片中的样式具体怎么修改，通过下面代码的注释我们来了解下：

function drawStockGraph(data,container){    var      currentData = data,      options, finance,      container = document.getElementById(container);    options = {      container : container,      data : {        price : currentData.price,//价格数据        volume : currentData.volume,//成交量数据        summary : currentData.summary//交易情形概括数据      },

//      trackFormatter : function (o) {        var          index = o.index,          value;        value = currentData.data[index].date + ': ' + currentData.price[index][1] + ", 成交量: " + currentData.volume[index][1];        return value;      },      yTickFormatter:function(n){          return n;          },      // An initial selection      selection : {        data : {          x : {            min : 0,            max : 250          }        }      },      // Override some defaults.      // Skip preprocessing to use flotr-formatted data.      defaults : {        volume : {          skipPreprocess : true,          config:{              //成交量中柱形的样式              whiskers : {                  lineWidth : 2,                  fillStyle:'#85AEDD',                  color:'#85AEDD',                  fillColor: '#85AEDD'                }          }        },

//图片中黄色标记的区域        price : {          skipPreprocess : true,          config:{          mouse:{          margin:0,          trackFormatter:function(o){            var              index = o.index,              value;            if (price.api.preprocessor) {              index += price.api.preprocessor.start;            }            value = '价格: ' + data.price[1][index] + ", 成交量: " + data.volume[1][index];            return value;                    },          mousetracktipstyle:'opacity:1;background-color:#D10220;color:#FFFEFF;display:none;width:250px;height:29px;font-size:14px;font-weight:500;position:absolute;padding:2px 8px;-moz-border-radius:0px;border-radius:0px;white-space:nowra'          },

  //y轴标签的样式                               yaxis : {                       showLabels : true,                      min : 0,                      align:'left',                      leftoffset:-40                  },                  'lite-lines':{                      lineWidth:1,                      color: '#82ACDD',                      fillColor:'#D0E2F8'                  }          }        },

//图片中绿色标记的部分        summary : {          skipPreprocess : true,          config : {            xaxis : {              // Set x ticks manually with defaults override:              ticks : currentData.summaryTicks            },

//波浪线的样式                'lite-lines' : {                    show : true,                    lineWidth : 1,                    fill : true,                    fillOpacity : 1,                    fillBorder : true,                    fillColor:'#D0E2F8',                    color:'#82ACDD'                  },                  selection : {                        color:'#e2edf9'                  }          }        },

//图片中蓝色标记的部分        connection : {                config:{                    fillStyle: '#F3F8FD',//#F3F8FD                    strokeStyle: '#D0DFF2'//#D0DFF2                                    }          }      }    };    finance = new envision.templates.Finance(options);    }

通过上面的代码，这样可以发现要修改这个图形的样式，只要找到图形中都有哪些插件，然后在源代码中搜索这个插件都有哪些配置；注意有些样式是在css中设置的，通过css设置的样式，在firebug中可以看到class名，这部分可以直接修改css样式值。