如何从零绘制k线图 -- 原生js canvas图表绘制
Posted 成都苏天天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何从零绘制k线图 -- 原生js canvas图表绘制相关的知识，希望对你有一定的参考价值。
样式如下图
源码地址： https://github.com/sutianbinde/charts
演示地址：kchart.html
编写这个需要具备canvas基础，如果没有canvas基础可以学习我前面的cnavas基础博客。
具体步骤
创建html文件，然后我们在页面中写一个用于放图表的 div
然后在js中写入数据，和 绘制图表的方法 （数据是一个三维数组，每一个k点值中包含了日期 还包含了一个 表示 开盘/收盘/最低/最高 值的数组）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="chart" height="500" width="1200" style="margin:30px;"></div> <script type="text/javascript"> function goChart(cBox, dataArr){ } // 时间 开盘 收盘 最低 最高 var dataArr = [ ["2017/10/1", [2320.26,2302.6,2287.3,2362.94]], ["2017/10/2", [2300,2291.3,2288.26,2308.38]], ["2017/10/3", [2295.35,2346.5,2295.35,2346.92]], ["2017/10/4", [2347.22,2358.98,2337.35,2363.8]], ["2017/10/5", [2360.75,2382.48,2347.89,2383.76]], ["2017/10/6", [2383.43,2385.42,2371.23,2391.82]], ["2017/10/7", [2377.41,2419.02,2369.57,2421.15]], ["2017/10/8", [2425.92,2428.15,2417.58,2440.38]], ["2017/10/9", [2411,2433.13,2403.3,2437.42]], ["2017/10/10", [2432.68,2434.48,2427.7,2441.73]], ["2017/10/11", [2430.69,2418.53,2394.22,2433.89]], ["2017/10/12", [2416.62,2432.4,2414.4,2443.03]], ["2017/10/13", [2441.91,2421.56,2415.43,2444.8]], ["2017/10/14", [2420.26,2382.91,2373.53,2427.07]], ["2017/10/15", [2383.49,2397.18,2370.61,2397.94]], ["2017/10/16", [2378.82,2325.95,2309.17,2378.82]], ["2017/10/17", [2322.94,2314.16,2308.76,2330.88]], ["2017/10/18", [2320.62,2325.82,2315.01,2338.78]], ["2017/10/19", [2313.74,2293.34,2289.89,2340.71]], ["2017/10/20", [2297.77,2313.22,2292.03,2324.63]], ["2017/10/21", [2322.32,2365.59,2308.92,2366.16]], ["2017/10/22", [2364.54,2359.51,2330.86,2369.65]], ["2017/10/23", [2332.08,2273.4,2259.25,2333.54]], ["2017/10/24", [2274.81,2326.31,2270.1,2328.14]], ["2017/10/25", [2333.61,2347.18,2321.6,2351.44]], ["2017/10/26", [2340.44,2324.29,2304.27,2352.02]], ["2017/10/27", [2326.42,2318.61,2314.59,2333.67]], ["2017/10/28", [2314.68,2310.59,2296.58,2320.96]], ["2017/10/29", [2309.16,2286.6,2264.83,2333.29]], ["2017/10/30", [2282.17,2263.97,2253.25,2286.33]], ["2017/11/1", [2320.26,2302.6,2287.3,2362.94]], ["2017/11/2", [2300,2291.3,2288.26,2308.38]], ["2017/11/3", [2295.35,2346.5,2295.35,2346.92]], ["2017/11/4", [2347.22,2358.98,2337.35,2363.8]], ["2017/11/5", [2360.75,2382.48,2347.89,2383.76]], ["2017/11/6", [2383.43,2385.42,2371.23,2391.82]], ["2017/11/7", [2377.41,2419.02,2369.57,2421.15]], ["2017/11/8", [2425.92,2428.15,2417.58,2440.38]], ["2017/11/9", [2411,2433.13,2403.3,2437.42]], ["2017/11/10", [2432.68,2434.48,2427.7,2441.73]], ["2017/11/11", [2430.69,2418.53,2394.22,2433.89]], ["2017/11/12", [2416.62,2432.4,2414.4,2443.03]], ["2017/11/13", [2441.91,2421.56,2415.43,2444.8]], ["2017/11/14", [2420.26,2382.91,2373.53,2427.07]], ["2017/11/15", [2383.49,2397.18,2370.61,2397.94]], ["2017/11/16", [2378.82,2325.95,2309.17,2378.82]], ["2017/11/17", [2322.94,2314.16,2308.76,2330.88]], ["2017/11/18", [2320.62,2325.82,2315.01,2338.78]], ["2017/11/19", [2313.74,2293.34,2289.89,2340.71]], ["2017/11/20", [2297.77,2313.22,2292.03,2324.63]], ["2017/11/21", [2322.32,2365.59,2308.92,2366.16]], ["2017/11/22", [2364.54,2359.51,2330.86,2369.65]], ["2017/11/23", [2332.08,2273.4,2259.25,2333.54]], ["2017/11/24", [2274.81,2326.31,2270.1,2328.14]], ["2017/11/25", [2333.61,2347.18,2321.6,2351.44]], ["2017/11/26", [Canvas绘制股票K线图