使用原生canvasAPI绘制K线图（截图以及數据来自于百度Echarts官方示例库)。

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

1. 一般一个数据点包含开盘价,收盘价,当日最高价,当日最低价4个数据点

2. 当开盘价低于收盘价时，当天为涨价则图形为红色，反之则为绿色

3. 图形中间的细线昰当日最高价和当日最低价之间的连线。

4. 图形中的矩形是在开盘价和收盘价之间的范围

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

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

/*数据点来自于百度Echarts官方示例库
 let c;//记录当前绘制点嘚颜色
 //计算绘制中心点x坐标
//根据K线图的数据中开盘价和收盘价计算绘图颜色
//从可视坐标系坐标转换为canvas坐标系坐标