示例代码托管于：http://www.github.com/dashnowords/blogs博客园地址：《大史住在大前端》原博文目录华为云社区地址：【前端打怪你要升级指南】[TOC]1.任务描述使用原生canvasAPI绘制K线图。（截图及数据来自百度Echarts官方示例库【查看示例链接】）。2.关键提示K线图在金融市场中最为常见，尤其是在股市中。它的绘制算法和表达式是直接相关的：一般一个数据点包括开盘价、收盘价、当日最高价、当日最低价4个数据点。当开盘价低于收盘价时，当天价格在上涨，图形为红色，否则为绿色。图表中间的细线是当天最高价和当天最低价之间的连接。图中的矩形是开盘价和收盘价之间的范围。了解了以上基础知识后，K线图的绘制其实和折线图没有太大的区别，一步一步画就可以了。仔细观察Echarts官方提供的例子，会发现图例中有MA5、MA10等图例标记。这实际上指的是N天的移动平均线MovingAverageN，是降低数据波动性并显示其宏观规律的常用方法。一、例子中的MA5是指将源数据中每5个点的平均值依次作为当前点的数据（至于5个点是从当前点开始还是从当前点结束，都是可能的）。3.示例代码实现难度比较大，本文不再赘述。/*数据点来自百度Echarts官方示例库*每个数据点的含义：[日期，开盘（open），收盘（close），最低（lowest），最高（highest）]*例如：['2013/2/7',2430.69,2418.53,2394.22,2433.89],*//***绘制数据*/functiondrawData(options){letdata=options.data;让xLength=options.chartZone[2]-options.chartZone[0];letc;//记录当前绘图点的颜色letgap=xLength/options.xAxisLabel.length;letactiveX=0;//绘制时记录当前点的坐标letactiveY=0;//绘制时记录当前点的y坐标context.strokeWidth=2;context.beginPath();context.moveTo(options.chartZone[0],options.chartZone[3]);//先将起点移动到0,0坐标for(leti=0;i
