【带着canvas去流浪（5）】绘制K线图

目录

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

博客园地址：

华为云社区地址：

一. 任务说明

使用原生canvasapi绘制k线图。（截图以及数据来自于百度echarts官方示例库)。

二. 重点提示

k线图最常见的是在金融市场，尤其是股市中，它的绘制算法和表达的意思是直接相关的：

1. 一般一个数据点包含开盘价,收盘价,当日最高价,当日最低价4个数据点。
2. 当开盘价低于收盘价时，当天为涨价，则图形为红色，反之则为绿色。
3. 图形中间的细线是当日最高价和当日最低价之间的连线。
4. 图形中的矩形是在开盘价和收盘价之间的范围。

了解了上述基本知识，k线图的绘制和折线图其实并没有太大区别，按部就班去绘制就好了。如果仔细观察echarts官方提供的示例会发现图例中还有 ma5,ma10这样的图例标记，这里其实指的是n天的移动平均值moving average n，是减小数据波动性展示其宏观规律的常用方法之一，示例中的ma5就是指依次将源数据中每5个点的值求平均值作为当前点的数据（至于5个点是从当前点开始算，还是从当前点结束都是可以的）。

三. 示例代码

实现难度较低，本文不再赘述。

/*数据点来自于百度echarts官方示例库
* 每个数据点意义：[日期，开盘(open)，收盘(close)，最低(lowest)，最高(highest)]
* 例如： ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
*/

/**
 * 绘制数据
 */
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]));
        }
     }
    }

//根据k线图的数据中开盘价和收盘价计算绘图颜色
function getcolor(data) {
    return data[0] >= data[1] ? '#1abc9c' : '#da5961';
}

//从可视坐标系坐标转换为canvas坐标系坐标
function transcoord(coord) {
    return options.chartzone[3] - (options.chartzone[3] - options.chartzone[1])*(coord - options.ymin) / (options.ymax - options.ymin);
}

浏览器中可查看效果：