帶著canvas去流浪系列之五 繪制K線圖

示例代碼托管在：http://www.github.com/dashnowords/blogs

博客園地址：《大史住在大前端》原創(chuàng)博文目錄

華為云社區(qū)地址：【你要的前端打怪升級指南】

【帶著canvas去流浪（5）】繪制K線圖一. 任務說明二. 重點提示三. 示例代碼

一. 任務說明

使用原生canvasAPI繪制K線圖。（截圖以及數(shù)據(jù)來自于百度Echarts官方示例庫【查看示例鏈接】)。

二. 重點提示

K線圖最常見的是在金融市場，尤其是股市中，它的繪制算法和表達的意思是直接相關(guān)的：

一般一個數(shù)據(jù)點包含開盤價,收盤價,當日最高價,當日最低價4個數(shù)據(jù)點。

當開盤價低于收盤價時，當天為漲價，則圖形為紅色，反之則為綠色。

圖形中間的細線是當日最高價和當日最低價之間的連線。

圖形中的矩形是在開盤價和收盤價之間的范圍。

了解了上述基本知識，K線圖的繪制和折線圖其實并沒有太大區(qū)別，按部就班去繪制就好了。如果仔細觀察Echarts官方提供的示例會發(fā)現(xiàn)圖例中還有 MA5,MA10這樣的圖例標記，這里其實指的是N天的移動平均值Moving Average N，是減小數(shù)據(jù)波動性展示其宏觀規(guī)律的常用方法之一，示例中的MA5就是指依次將源數(shù)據(jù)中每5個點的值求平均值作為當前點的數(shù)據(jù)（至于5個點是從當前點開始算，還是從當前點結(jié)束都是可以的）。

三. 示例代碼

實現(xiàn)難度較低，本文不再贅述。

/*數(shù)據(jù)點來自于百度Echarts官方示例庫

* 每個數(shù)據(jù)點意義：[日期，開盤(open)，收盤(close)，最低(lowest)，最高(highest)]

* 例如： ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],

*/

/**

* 繪制數(shù)據(jù)

*/

function drawData(options) {

let data = options.data;

let xLength = options.chartZone[2] - options.chartZone[0];

let c;//記錄當前繪制點的顏色

let gap = xLength / options.xAxisLabel.length;

let activeX = ?0;//記錄繪制過程中當前點的坐標

let activeY = ?0;//記錄繪制過程中當前點的y坐標

context.strokeWidth = 2;

context.beginPath();

context.moveTo(options.chartZone[0],options.chartZone[3]);//先將起點移動至0,0坐標

for(let i = 0; i < data.length; i++){

//獲取繪圖顏色

c = getColor(data[i]);

context.strokeWidth = 1;

context.strokeStyle = context.fillStyle = c;

//計算繪制中心點x坐標

activeX = options.chartZone[0] + (i + 1) * gap;

//繪制最高最低線;

context.beginPath();

context.moveTo(activeX,transCoord(data[i][2]));

context.lineTo(activeX,transCoord(data[i][3]));

context.closePath();

context.stroke();

//繪制開盤收盤矩形

if (data[i][0] >= data[i][1]) {

context.fillRect(activeX - 5 , transCoord(data[i][0]) , 10, transCoord(data[i][1]) - transCoord(data[i][0]));

} else{

context.fillRect(activeX - 5 , transCoord(data[i][1]) , 10, transCoord(data[i][0]) - transCoord(data[i][1]));

}

}

}

//根據(jù)K線圖的數(shù)據(jù)中開盤價和收盤價計算繪圖顏色

function getColor(data) {

return data[0] >= data[1] ? '#1abc9c' : '#DA5961';

}

//從可視坐標系坐標轉(zhuǎn)換為canvas坐標系坐標

function transCoord(coord) {

return options.chartZone[3] - (options.chartZone[3] - options.chartZone[1])*(coord - options.yMin) / (options.yMax - options.yMin);

}

瀏覽器中可查看效果：

附件： demo.rar 3.82KB 下載次數(shù)：5次

Canvas

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。