614
使用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);
}
最后更新：2017-04-02 16:47:59