div html k线图,Canvas绘制股票K线图

最近想在小程序做股票K线图，于是尝试用Canvas实现股票K线图。

K线图用到Canvas的API其实只有划线和画矩形，即moveTo(),lineTo(),fillRect()等函数。

第一步，我们先定义K线类：function Bar(open,high,low,close,width){    this.open = open;    this.high = high;    this.low = low;    this.close = close;    this.width = width | 5;}

输入参数分别表示开盘价，最高价，最低价，收盘价，K线宽度。

K线类定义一个绘制函数：Bar.prototype.draw = function(pen,x,base,frag,screen){    //根据base,frag计算坐标    var _open = screen - (this.open - base)*frag - 10;    var _high = screen - (this.high - base)*frag - 10;    var _low = screen - (this.low - base)*frag - 10;    var _close = screen - (this.close - base)*frag - 10;    //根据base,frag画K线    pen.save();    if(this.close >= this.open){        pen.fillStyle = "#FF0000";        pen.strokeStyle = "#FF0000";    }else{        pen.fillStyle = "#00FF00";        pen.strokeStyle = "#00FF00";    }    pen.beginPath();    pen.moveTo(30 + x * this.width*2 + this.width,_high);    pen.lineTo(30 + x * this.width*2 + this.width,_low);    pen.stroke();    var y = ((_open > _close)?_open:_close);    if(Math.abs(_open - _close) == 0 ){        pen.moveTo(35 + x * this.width*2,y);        pen.lineTo(30 + (x+1) * this.width*2,y);        pen.stroke();    }else{        pen.fillRect(35 + x * this.width*2,((_open 

pen为画布的上下文，x为该K线的X位置，base为整个数据中最小坐标对应的价格，frag是单位价格对应的高度，screen为画布的整体高度，由于Canvas是左上角为坐标点(0,0),所以需要screen做坐标转换。

绘制流程大致为：

1、将价格转换为画布上相应的坐标

2、根据收盘价和开盘价确定阴柱与阳柱，设置相应的颜色

3、根据最高价与最低价画线，根据开盘价与收盘价画矩形

至此，K线已经绘制代码已经结束。

第二步，实现坐标系

首先先创建一个图表类function chart(dom){    var width = parseFloat(dom.style.width.replace("px",""));    var height = parseFloat(dom.style.height.replace("px",""));    var canvas = document.createElement("canvas");    canvas.style.width = width + "px";    canvas.style.height = height + "px";    canvas.width = width;    canvas.height = height;    dom.appendChild(canvas);    var context = canvas.getContext("2d");    this.width = width;    this.height = height;    this.pen = context;}

根据传入的div节点，创建Canvas,这里需要注意

canvas.width = width;

canvas.height = height;

两行代码的必要性，这两行保证了绘制内容与实际设置的大小相符，这里不能带“px”,否则无效。

坐标轴的实质就是两个相交的直线，对于刻度，需要根据数据进行设置，实现代码如下：chart.prototype.drawBar = function(date,data){    //计算价格最大值与最小值    var maxPrice = -1,minPrice = 999999;    for(var i = 0;i  maxPrice){            maxPrice = data[i][1];        }        if(data[i][2] 

以上，K线绘制组件已经实现，接下来查看应用：