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