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

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

和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样式值。