html5绘制股票图形,股票数据分析(五):绘制股票k线图(js+canvas + Python + json)

本文介绍:利用 js+canvas 绘制股票k线图

HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

我们在股票数据分析(三):Python(Tushare) 交易信息返回json格式,供前端使用 中已经简单介绍了获取几条数据,本文在其基础上简单修改,获取半年的K线图数据 绘制股票k线图,

比如: start='2017-06-05', end='2018-01-09'

view.py:

from django.http import HttpResponse

import tushare as ts

import json

data = ts.get_hist_data('600848', start='2017-06-05', end='2018-01-09')

column_list = []

for row in data:

column_list.append(row)

jsonlist = []

for index in range(data[column_list[0]].size):

dict = {}

for row in data:

dict[row] = data[row][index]

dict['date'] = data.index[index]

jsonlist.append(dict)

def hello(request):

return HttpResponse(json.dumps(jsonlist))

创建一个H5页面,复制下面代码,在浏览器中打开:

js绘制曲线代码不是本人写的,我只是个搬运工_

K线图实例

body {

background-color: rgb(33, 33, 45);

}

/*

//股票数据

var data_json = '';

//1 : 通过请求获取数据

var url="https://xxxxxx";

$.get(url,{},function(result){

data_json = JSON.parse(result);

//获取成功后执行下面的代码

//.....

});//请求

*/

//实际请使用类似上面请求的方式获取结果, 为了测试,我直接复制返回结果到 data_json

var data_json = '[{"open": 24.6, "high": 24.78, "close": 23.96, "low": 23.82, "volume": 82175.82, "price_change": -0.76, "p_change": -3.07, "ma5": 24.208, "ma10": 23.237, "ma20": 23.213, "v_ma5": 120159.21, "v_ma10": 84689.28, "v_ma20": 69688.92, "date": "2018-01-09"}, {"open": 24.12, "high": 24.95, "close": 24.71, "low": 24.01, "volume": 109535.76, "price_change": 0.2, "p_change": 0.82, "ma5": 23.9, "ma10": 22.992, "ma20": 23.153, "v_ma5": 112259.6, "v_ma10": 85078.67, "v_ma20": 67644.48, "date": "2018-01-08"}, {"open": 24.0, "high": 25.4, "close": 24.51, "low": 23.7, "volume": 204266.23, "price_change": -0.56, "p_change": -2.23, "ma5": 23.42, "ma10": 22.82, "ma20": 23.048, "v_ma5": 97543.6, "v_ma10": 76964.5, "v_ma20": 64853.8, "date": "2018-01-05"}, {"open": 22.79, "high": 25.07, "close": 25.07, "low": 22.51, "volume": 130131.15, "price_change": 2.28, "p_change": 10.0, "ma5": 22.966, "ma10": 22.69, "ma20": 22.935, "v_ma5": 67939.35, "v_ma10": 59938.43, "v_ma20": 57071.47, "date": "2018-01-04"}, {"open": 22.42, "high": 22.83, "close": 22.79, "low": 22.18, "volume": 74687.1, "price_change": 0.38, "p_change": 1.7, "ma5": 22.378, "ma10": 22.516, "ma20": 22.785, "v_ma5": 51770.82, "v_ma10": 51262.21, "v_ma20": 53198.15, "date": "2018-01-03"}, {"open": 22.3, "high": 22.54, "close": 22.42, "low": 22.05, "volume": 42677.76, "price_change": 0.12, "p_change": 0.54, "ma5": 22.266, "ma10": 22.583, "ma20": 22.73, "v_ma5": 49219.34, "v_ma10": 48100.37, "v_ma20": 53397.23, "date": "2018-01-02"}, {"open": 22.34, "high": 22.46, "close": 22.31, "low": 22.02, "volume": 35955.75, "price_change": 0.08, "p_change": 0.36, "ma5": 22.084, "ma10": 22.654, "ma20": 22.755, "v_ma5": 57897.75, "v_ma10": 46793.59, "v_ma20": 55537.48, "date": "2017-12-29"}, {"open": 22.23, "high": 22.84, "close": 22.24, "low": 22.12, "volume": 56245.01, "price_change": 0.11, "p_change": 0.5, "ma5": 22.22, "ma10": 22.723, "ma20": 22.849, "v_ma5": 56385.4, "v_ma10": 47542.23, "v_ma20": 55915.74, "date": "2017-12-28"}, {"open": 22.25, "high": 22.57, "close": 22.13, "low": 21.8, "volume": 49288.5, "price_change": -0.11, "p_change": -0.49, "ma5": 22.414, "ma10": 22.846, "ma20": 22.949, "v_ma5": 51937.5, "v_ma10": 46423.84, "v_ma20": 55602.16, "date": "2017-12-27"}, {"open": 21.73, "high": 22.66, "close": 22.23, "low": 21.73, "volume": 61929.7, "price_change": 0.72, "p_change": 3.35, "ma5": 22.654, "ma10": 23.014, "ma20": 23.057, "v_ma5": 50753.59, "v_ma10": 48360.9, "v_ma20": 55920.67, "date": "2017-12-26"}, {"open": 22.81, "high": 22.93, "close": 21.51, "low": 21.11, "volume": 86069.77, "price_change": -1.47, "p_change": -6.4, "ma5": 22.9, "ma10": 23.189, "ma20": 23.181, "v_ma5": 46981.39, "v_ma10": 54688.57, "v_ma20": 55274.61, "date": "2017-12-25"}, {"open": 23.21, "high": 23.39, "close": 22.99, "low": 22.9, "volume": 28394.0, "price_change": -0.21, "p_change": -0.91, "ma5": 23.224, "ma10": 23.313, "ma20": 23.316, "v_ma5": 35689.43, "v_ma10": 50210.29, "v_ma20": 53887.77, "date": "2017-12-22"}, {"open": 23.39, "high": 23.5, "close": 23.21, "low": 22.86, "volume": 34005.55, "price_change": -0.11, "p_change": -0.47, "ma5": 23.226, "ma10": 23.275, "ma20": 23.389, "v_ma5": 38699.06, "v_ma10": 52743.1, "v_ma20": 55126.09, "date": "2017-12-21"}, {"open": 23.61, "high": 23.96, "close": 23.33, "low": 23.2, "volume": 43368.92, "price_change": -0.14, "p_change": -0.6, "ma5": 23.278, "ma10": 23.18, "ma20": 23.43, "v_ma5": 40910.18, "v_ma10": 54204.51, "v_ma20": 57245.14, "date": "2017-12-20"}, {"open": 23.23, "high": 23.66, "close": 23.46, "low": 23.23, "volume": 43068.7, "price_change": 0.31, "p_change": 1.34, "ma5": 23.374, "ma10": 23.053, "ma20": 23.526, "v_ma5": 45968.22, "v_ma10": 55134.09, "v_ma20": 58490.17, "date": "2017-12-19"}, {"open": 23.0, "high": 23.49, "close": 23.13, "low": 22.83, "volume": 29610.0, "price_change": 0.12, "p_change": 0.52, "ma5": 23.478, "ma10": 22.877, "ma20": 23.617, "v_ma5": 62395.75, "v_ma10": 58694.09, "v_ma20": 60331.46, "date": "2017-12-18"}, {"open": 23.4, "high": 23.4, "close": 23.0, "low": 22.85, "volume": 43442.15, "price_change": -0.46, "p_change": -1.96, "ma5": 23.402, "ma10": 22.856, "ma20": 23.715, "v_ma5": 64731.15, "v_ma10": 64281.37, "v_ma20": 65134.62, "date": "2017-12-15"}, {"open": 23.65, "high": 23.77, "close": 23.47, "low": 23.22, "volume": 45061.12, "price_change": -0.33, "p_change": -1.39, "ma5": 23.324, "ma10": 22.974, "ma20": 23.869, "v_ma5": 66787.14, "v_ma10": 64289.26, "v_ma20": 71322.17, "date": "2017-12-14"}, {"open": 23.99, "high": 24.38, "close": 23.81, "low": 23.6, "volume": 68659.12, "price_change": -0.15, "p_change": -0.63, "ma5": 23.082, "ma10": 23.052, "ma20": 24.104, "v_ma5": 67498.84, "v_ma10": 64780.47, "v_ma20": 73475.4, "date": "2017-12-13"}, {"open": 22.61, "high": 24.14, "close": 23.98, "low": 22.61, "volume": 125206.36, "price_change": 1.21, "p_change": 5.31, "ma5": 22.732, "ma10": 23.1, "ma20": 24.337, "v_ma5": 64299.97, "v_ma10": 63480.44, "v_ma20": 76113.42, "date": "2017-12-12"}, {"open": 22.61, "high": 22.94, "close": 22.75, "low": 22.5, "volume": 41287.0, "price_change": 0.14, "p_change": 0.62, "ma5": 22.276, "ma10": 23.172, "ma20": 24.605, "v_ma5": 54992.43, "v_ma10": 55860.66, "v_ma20": 82041.76, "date": "2017-12-11"}, {"open": 22.4, "high": 22.9, "close": 22.61, "low": 22.04, "volume": 53722.08, "price_change": 0.35, "p_change": 1.57, "ma5": 22.31, "ma10": 23.318, "ma20": 24.88, "v_ma5": 63831.59, "v_ma10": 57565.25, "v_ma20": 87775.07, "date": "2017-12-08"}, {"open": 21.98, "high": 22.48, "close": 22.26, "low": 21.92, "volume": 48619.64, "price_change": 0.22, "p_change": 1.0, "ma5": 22.624, "ma10": 23.502, "ma20": 25.154, "v_ma5": 61791.38, "v_ma10": 57509.09, "v_ma20": 91369.88, "date": "2017-12-07"}, {"open": 21.66, "high": 22.1, "close": 22.06, "low": 21.51, "volume": 52664.77, "price_change": 0.36, "p_change": 1.66, "ma5": 23.022, "ma10": 23.679, "ma20": 25.459, "v_ma5": 62062.1, "v_ma10": 60285.78, "v_ma20": 98491.69, "date": "2017-12-06"}, {"open": 22.91, "high": 23.26, "close": 21.7, "low": 21.65, "volume": 78668.67, "price_change": -1.22, "p_change": -5.32, "ma5": 23.468, "ma10": 23.999, "ma20": 25.808, "v_ma5": 62660.91, "v_ma10": 61846.25, "v_ma20": 104051.13, "date": "2017-12-05"}, {"open": 23.91, "high": 24.15, "close": 22.92, "low": 22.85, "volume": 85482.8, "price_change": -1.27, "p_change": -5.25, "ma5": 24.068, "ma10": 24.357, "ma20": 26.172, "v_ma5": 56728.88, "v_ma10": 61968.83, "v_ma20": 108773.06, "date": "2017-12-04"}, {"open": 24.04, "high": 24.49, "close": 24.18, "low": 24.04, "volume": 43521.0, "price_change": -0.04, "p_change": -0.17, "ma5": 24.326, "ma10": 24.574, "ma20": 26.435, "v_ma5": 51298.9, "v_ma10": 65987.87, "v_ma20": 112043.75, "date": "2017-12-01"}, {"open": 24.37, "high": 24.76, "close": 24.25, "low": 24.05, "volume": 49973.27, "price_change": -0.05, "p_change": -0.21, "ma5": 24.38, "ma10": 24.764, "ma20": 26.634, "v_ma5": 53226.8, "v_ma10": 78355.09, "v_ma20": 123826.01, "date": "2017-11-30"}, {"open": 24.66, "high": 24.8, "close": 24.29, "low": 23.96, "volume": 55658.83, "price_change": -0.4, "p_change": -1.62, "ma5": 24.336, "ma10": 25.156, "ma20": 26.944, "v_ma5": 58509.45, "v_ma10": 82170.33, "v_ma20": 136951.4, "date": "2017-11-29"}, {"open": 24.01, "high": 24.9, "close": 24.7, "low": 24.0, "volume": 49008.5, "price_change": 0.5, "p_change": 2.07, "ma5": 24.53, "ma10": 25.573, "ma20": 27.421, "v_ma5": 61031.58, "v_ma10": 88746.39, "v_ma20": 145784.73, "date": "2017-11-28"}, {"open": 24.4, "high": 24.95, "close": 24.21, "low": 24.01, "volume": 58332.89, "price_change": -0.23, "p_change": -0.94, "ma5": 24.646, "ma10": 26.037, "ma20": 27.908, "v_ma5": 67208.79, "v_ma10": 108222.87, "v_ma20": 161417.35, "date": "2017-11-27"}, {"open": 24.1, "high": 24.7, "close": 24.45, "low": 24.09, "volume": 53160.52, "price_change": 0.43, "p_change": 1.79, "ma5": 24.822, "ma10": 26.441, "ma20": 28.3, "v_ma5": 80676.85, "v_ma10": 117984.89, "v_ma20": 175389.32, "date": "2017-11-24"}, {"open": 25.3, "high": 25.43, "close": 24.03, "low": 23.98, "volume": 76386.5, "price_change": -1.24, "p_change": -4.91, "ma5": 25.148, "ma10": 26.805, "ma20": 28.733, "v_ma5": 103483.37, "v_ma10": 125230.68, "v_ma20": 189422.51, "date": "2017-11-23"}, {"open": 25.21, "high": 25.9, "close": 25.26, "low": 24.84, "volume": 68269.5, "price_change": -0.03, "p_change": -0.12, "ma5": 25.976, "ma10": 27.239, "ma20": 29.152, "v_ma5": 105831.21, "v_ma10": 136697.6, "v_ma20": 210698.95, "date": "2017-11-22"}, {"open": 24.6, "high": 25.98, "close": 25.28, "low": 24.56, "volume": 79894.52, "price_change": 0.17, "p_change": 0.68, "ma5": 26.616, "ma10": 27.617, "ma20": 29.376, "v_ma5": 116461.2, "v_ma10": 146256.01, "v_ma20": 223732.84, "date": "2017-11-21"}, {"open": 25.55, "high": 25.58, "close": 25.09, "low": 23.46, "volume": 125673.2, "price_change": -0.98, "p_change": -3.76, "ma5": 27.428, "ma10": 27.987, "ma20": 29.514, "v_ma5": 149236.94, "v_ma10": 155577.28, "v_ma20": 235402.64, "date": "2017-11-20"}, {"open": 28.0, "high": 28.15, "close": 26.08, "low": 25.91, "volume": 167193.12, "price_change": -2.09, "p_change": -7.42, "ma5": 28.06, "ma10": 28.296, "ma20": 29.749, "v_ma5": 155292.94, "v_ma10": 158099.63, "v_ma20": 252443.7, "date": "2017-11-17"}, {"open": 28.1, "high": 28.72, "close": 28.17, "low": 28.0, "volume": 88125.71, "price_change": -0.3, "p_change": -1.05, "ma5": 28.462, "ma10": 28.503, "ma20": 29.862, "v_ma5": 146977.99, "v_ma10": 169296.94, "v_ma20": 264662.55, "date": "2017-11-16"}, {"open": 29.3, "high": 29.3, "close": 28.46, "low": 28.3, "volume": 121419.46, "price_change": -0.86, "p_change": -2.93, "ma5": 28.502, "ma10": 28.731, "ma20": 29.811, "v_ma5": 167563.98, "v_ma10": 191732.48, "v_ma20": 269280.79, "date": "2017-11-15"}, {"open": 28.0, "high": 29.89, "close": 29.34, "low": 27.68, "volume": 243773.23, "price_change": 1.1, "p_change": 3.9, "ma5": 28.618, "ma10": 29.268, "ma20": 29.673, "v_ma5": 176050.82, "v_ma10": 202823.06, "v_ma20": 268677.48, "date": "2017-11-14"}, {"open": 28.61, "high": 29.23, "close": 28.25, "low": 28.09, "volume": 155953.17, "price_change": 0.16, "p_change": 0.57, "ma5": 28.546, "ma10": 29.778, "ma20": 29.477, "v_ma5": 161917.62, "v_ma10": 214611.83, "v_ma20": 259871.29, "date": "2017-11-13"}, {"open": 28.78, "high": 28.99, "close": 28.09, "low": 27.88, "volume": 125618.36, "price_change": -0.28, "p_change": -0.99, "ma5": 28.532, "ma10": 30.159, "ma20": 29.324, "v_ma5": 160906.32, "v_ma10": 232793.74, "v_ma20": 257734.07, "date": "2017-11-10"}, {"open": 28.88, "high": 29.09, "close": 28.37, "low": 27.76, "volume": 191055.7, "price_change": -0.67, "p_change": -2.31, "ma5": 28.544, "ma10": 30.661, "ma20": 29.237, "v_ma5": 191615.9, "v_ma10": 253614.34, "v_ma20": 254168.58, "date": "2017-11-09"}, {"open": 28.8, "high": 29.7, "close": 29.04, "low": 28.11, "volume": 163853.66, "price_change": 0.06, "p_change": 0.21, "ma5": 28.96, "ma10": 31.065, "ma20": 29.132, "v_ma5": 215900.97, "v_ma10": 284700.31, "v_ma20": 248910.25, "date": "2017-11-08"}, {"open": 28.6, "high": 29.37, "close": 28.98, "low": 28.42, "volume": 173107.2, "price_change": 0.8, "p_change": 2.84, "ma5": 29.918, "ma10": 31.134, "ma20": 28.995, "v_ma5": 229595.3, "v_ma10": 301209.67, "v_ma20": 247155.94, "date": "2017-11-07"}, {"open": 28.67, "high": 28.74, "close": 28.18, "low": 27.76, "volume": 150896.66, "price_change": 0.03, "p_change": 0.11, "ma5": 31.01, "ma10": 31.041, "ma20": 28.902, "v_ma5": 267306.04, "v_ma10": 315227.99, "v_ma20": 242961.71, "date": "2017-11-06"}, {"open": 28.86, "high": 29.62, "close": 28.15, "low": 28.03, "volume": 279166.28, "price_change": -2.3, "p_change": -7.55, "ma5": 31.786, "ma10": 31.202, "ma20": 28.861, "v_ma5": 304681.17, "v_ma10": 346787.77, "v_ma20": 243949.88, "date": "2017-11-03"}, {"open": 31.8, "high": 31.8, "close": 30.45, "low": 30.45, "volume": 312481.06, "price_change": -3.38, "p_change": -9.99, "ma5": 32.778, "ma10": 31.22, "ma20": 28.843, "v_ma5": 315612.77, "v_ma10": 360028.16, "v_ma20": 237874.8, "date": "2017-11-02"}, {"open": 33.85, "high": 34.34, "close": 33.83, "low": 33.1, "volume": 232325.3, "price_change": -0.61, "p_change": -1.77, "ma5": 33.17, "ma10": 30.891, "ma20": 28.684, "v_ma5": 353499.64, "v_ma10": 346829.1, "v_ma20": 233701.92, "date": "2017-11-01"}, {"open": 32.62, "high": 35.22, "close": 34.44, "low": 32.2, "volume": 361660.88, "price_change": 2.38, "p_change": 7.42, "ma5": 32.35, "ma10": 30.077, "ma20": 28.406, "v_ma5": 372824.04, "v_ma10": 334531.9, "v_ma20": 241075.48, "date": "2017-10-31"}, {"open": 32.56, "high": 34.4, "close": 32.06, "low": 31.85, "volume": 337772.31, "price_change": -1.05, "p_change": -3.17, "ma5": 31.072, "ma10": 29.176, "ma20": 28.01, "v_ma5": 363149.95, "v_ma10": 305130.76, "v_ma20": 231267.29, "date": "2017-10-30"}, {"open": 31.45, "high": 33.2, "close": 33.11, "low": 31.45, "volume": 333824.31, "price_change": 0.7, "p_change": 2.16, "ma5": 30.618, "ma10": 28.489, "ma20": 27.652, "v_ma5": 388894.38, "v_ma10": 282674.4, "v_ma20": 221367.64, "date": "2017-10-27"}, {"open": 29.3, "high": 32.7, "close": 32.41, "low": 28.92, "volume": 501915.41, "price_change": 2.68, "p_change": 9.01, "ma5": 29.662, "ma10": 27.813, "ma20": 27.306, "v_ma5": 404443.54, "v_ma10": 254722.83, "v_ma20": 215395.01, "date": "2017-10-26"}, {"open": 27.86, "high": 30.45, "close": 29.73, "low": 27.54, "volume": 328947.31, "price_change": 1.68, "p_change": 5.99, "ma5": 28.612, "ma10": 27.198, "ma20": 27.072, "v_ma5": 340158.56, "v_ma10": 213120.2, "v_ma20": 208416.55, "date": "2017-10-25"}, {"open": 28.2, "high": 28.75, "close": 28.05, "low": 27.22, "volume": 313290.41, "price_change": -1.74, "p_change": -5.84, "ma5": 27.804, "ma10": 26.856, "ma20": 26.88, "v_ma5": 296239.76, "v_ma10": 193102.21, "v_ma20": 197044.24, "date": "2017-10-24"}, {"open": 29.0, "high": 31.16, "close": 29.79, "low": 28.9, "volume": 466494.47, "price_change": 1.46, "p_change": 5.15, "ma5": 27.28, "ma10": 26.763, "ma20": 26.764, "v_ma5": 247111.56, "v_ma10": 170695.43, "v_ma20": 186873.57, "date": "2017-10-23"}, {"open": 29.2, "high": 29.83, "close": 28.33, "low": 27.85, "volume": 411570.12, "price_change": 1.17, "p_change": 4.31, "ma5": 26.36, "ma10": 26.519, "ma20": 26.572, "v_ma5": 176454.41, "v_ma10": 141111.99, "v_ma20": 171445.99, "date": "2017-10-20"}, {"open": 25.61, "high": 27.2, "close": 27.16, "low": 25.61, "volume": 180490.47, "price_change": 1.47, "p_change": 5.72, "ma5": 25.964, "ma10": 26.465, "ma20": 26.5, "v_ma5": 105002.11, "v_ma10": 115721.45, "v_ma20": 159293.58, "date": "2017-10-19"}, {"open": 25.63, "high": 26.41, "close": 25.69, "low": 25.5, "volume": 109353.35, "price_change": 0.26, "p_change": 1.02, "ma5": 25.784, "ma10": 26.477, "ma20": 26.479, "v_ma5": 86081.84, "v_ma10": 120574.74, "v_ma20": 156028.36, "date": "2017-10-18"}, {"open": 25.3, "high": 25.88, "close": 25.43, "low": 25.23, "volume": 67649.41, "price_change": 0.24, "p_change": 0.95, "ma5": 25.908, "ma10": 26.734, "ma20": 26.542, "v_ma5": 89964.65, "v_ma10": 147619.06, "v_ma20": 159389.25, "date": "2017-10-17"}, {"open": 26.4, "high": 26.48, "close": 25.19, "low": 25.03, "volume": 113208.69, "price_change": -1.16, "p_change": -4.4, "ma5": 26.246, "ma10": 26.843, "ma20": 26.643, "v_ma5": 94279.29, "v_ma10": 157403.83, "v_ma20": 171053.0, "date": "2017-10-16"}, {"open": 26.26, "high": 26.54, "close": 26.35, "low": 26.14, "volume": 54308.65, "price_change": 0.09, "p_change": 0.34, "ma5": 26.678, "ma10": 26.815, "ma20": 26.738, "v_ma5": 105769.58, "v_ma10": 160060.88, "v_ma20": 178294.92, "date": "2017-10-13"}, {"open": 26.28, "high": 26.51, "close": 26.26, "low": 25.92, "volume": 85889.09, "price_change": -0.05, "p_change": -0.19, "ma5": 26.966, "ma10": 26.798, "ma20": 26.767, "v_ma5": 126440.79, "v_ma10": 176067.19, "v_ma20": 192651.51, "date": "2017-10-12"}, {"open": 27.26, "high": 27.37, "close": 26.31, "low": 26.02, "volume": 128767.41, "price_change": -0.81, "p_change": -2.99, "ma5": 27.17, "ma10": 26.945, "ma20": 26.733, "v_ma5": 155067.65, "v_ma10": 203712.91, "v_ma20": 202840.46, "date": "2017-10-11"}, {"open": 27.12, "high": 27.49, "close": 27.12, "low": 26.75, "volume": 89222.62, "price_change": -0.23, "p_change": -0.84, "ma5": 27.56, "ma10": 26.903, "ma20": 26.643, "v_ma5": 205273.46, "v_ma10": 200986.28, "v_ma20": 204488.73, "date": "2017-10-10"}, {"open": 27.8, "high": 28.22, "close": 27.35, "low": 27.0, "volume": 170660.12, "price_change": -0.44, "p_change": -1.58, "ma5": 27.44, "ma10": 26.765, "ma20": 26.484, "v_ma5": 220528.36, "v_ma10": 203051.72, "v_ma20": 206976.96, "date": "2017-10-09"}, {"open": 27.49, "high": 27.88, "close": 27.79, "low": 27.04, "volume": 157664.69, "price_change": 0.51, "p_change": 1.87, "ma5": 26.952, "ma10": 26.625, "ma20": 26.305, "v_ma5": 214352.17, "v_ma10": 201779.99, "v_ma20": 210644.2, "date": "2017-09-29"}, {"open": 27.58, "high": 28.1, "close": 27.28, "low": 27.11, "volume": 229023.39, "price_change": -0.98, "p_change": -3.47, "ma5": 26.63, "ma10": 26.535, "ma20": 26.167, "v_ma5": 225693.6, "v_ma10": 202865.7, "v_ma20": 211476.52, "date": "2017-09-28"}, {"open": 26.52, "high": 29.01, "close": 28.26, "low": 26.52, "volume": 379796.5, "price_change": 1.74, "p_change": 6.56, "ma5": 26.72, "ma10": 26.48, "ma20": 26.084, "v_ma5": 252358.18, "v_ma10": 191481.98, "v_ma20": 212995.67, "date": "2017-09-27"}, {"open": 24.87, "high": 26.66, "close": 26.52, "low": 24.85, "volume": 165497.09, "price_change": 1.61, "p_change": 6.46, "ma5": 26.246, "ma10": 26.349, "ma20": 25.879, "v_ma5": 196699.1, "v_ma10": 171159.43, "v_ma20": 203831.34, "date": "2017-09-26"}, {"open": 25.78, "high": 26.16, "close": 24.91, "low": 24.67, "volume": 139779.2, "price_change": -1.27, "p_change": -4.85, "ma5": 26.09, "ma10": 26.443, "ma20": 25.706, "v_ma5": 185575.07, "v_ma10": 184702.18, "v_ma20": 200104.09, "date": "2017-09-25"}, {"open": 27.0, "high": 27.18, "close": 26.18, "low": 25.87, "volume": 214371.81, "price_change": -1.55, "p_change": -5.59, "ma5": 26.298, "ma10": 26.661, "ma20": 25.635, "v_ma5": 189207.81, "v_ma10": 196528.96, "v_ma20": 199072.47, "date": "2017-09-22"}, {"open": 26.03, "high": 28.48, "close": 27.73, "low": 25.7, "volume": 362346.28, "price_change": 1.84, "p_change": 7.11, "ma5": 26.44, "ma10": 26.736, "ma20": 25.495, "v_ma5": 180037.81, "v_ma10": 209235.84, "v_ma20": 194833.73, "date": "2017-09-21"}, {"open": 25.66, "high": 26.08, "close": 25.89, "low": 25.35, "volume": 101501.12, "price_change": 0.15, "p_change": 0.58, "ma5": 26.24, "ma10": 26.52, "ma20": 25.239, "v_ma5": 130605.78, "v_ma10": 201968.02, "v_ma20": 183411.57, "date": "2017-09-20"}, {"open": 25.95, "high": 26.52, "close": 25.74, "low": 25.53, "volume": 109876.95, "price_change": -0.21, "p_change": -0.81, "ma5": 26.452, "ma10": 26.382, "ma20": 25.098, "v_ma5": 145619.77, "v_ma10": 207991.18, "v_ma20": 191562.46, "date": "2017-09-19"}, {"open": 26.66, "high": 26.66, "close": 25.95, "low": 25.53, "volume": 157942.91, "price_change": -0.94, "p_change": -3.5, "ma5": 26.796, "ma10": 26.203, "ma20": 25.029, "v_ma5": 183829.29, "v_ma10": 210902.21, "v_ma20": 209190.26, "date": "2017-09-18"}, {"open": 26.58, "high": 27.76, "close": 26.89, "low": 26.33, "volume": 168521.77, "price_change": 0.16, "p_change": 0.6, "ma5": 27.024, "ma10": 25.984, "ma20": 24.867, "v_ma5": 203850.1, "v_ma10": 219508.4, "v_ma20": 205704.82, "date": "2017-09-15"}, {"open": 26.7, "high": 27.1, "close": 26.73, "low": 26.42, "volume": 115186.16, "price_change": -0.22, "p_change": -0.82, "ma5": 27.032, "ma10": 25.799, "ma20": 24.642, "v_ma5": 238433.87, "v_ma10": 220087.33, "v_ma20": 204899.57, "date": "2017-09-14"}, {"open": 27.2, "high": 27.85, "close": 26.95, "low": 26.66, "volume": 176571.05, "price_change": -0.51, "p_change": -1.86, "ma5": 26.8, "ma10": 25.688, "ma20": 24.4, "v_ma5": 273330.25, "v_ma10": 234509.37, "v_ma20": 202029.43, "date": "2017-09-13"}, {"open": 27.18, "high": 28.55, "close": 27.46, "low": 26.31, "volume": 300924.56, "price_change": 0.37, "p_change": 1.37, "ma5": 26.312, "ma10": 25.408, "ma20": 24.147, "v_ma5": 270362.6, "v_ma10": 236503.24, "v_ma20": 196693.28, "date": "2017-09-12"}, {"open": 26.9, "high": 27.55, "close": 27.09, "low": 26.56, "volume": 258046.98, "price_change": 0.16, "p_change": 0.59, "ma5": 25.61, "ma10": 24.968, "ma20": 23.846, "v_ma5": 237975.12, "v_ma10": 215506.0, "v_ma20": 183694.65, "date": "2017-09-11"}, {"open": 25.5, "high": 27.47, "close": 26.93, "low": 25.32, "volume": 341440.59, "price_change": 1.36, "p_change": 5.32, "ma5": 24.944, "ma10": 24.609, "ma20": 23.566, "v_ma5": 235166.7, "v_ma10": 201615.98, "v_ma20": 172957.06, "date": "2017-09-08"}, {"open": 24.41, "high": 26.9, "close": 25.57, "low": 24.2, "volume": 289668.06, "price_change": 1.06, "p_change": 4.33, "ma5": 24.566, "ma10": 24.253, "ma20": 23.281, "v_ma5": 201740.8, "v_ma10": 180431.62, "v_ma20": 160218.55, "date": "2017-09-07"}, {"open": 23.51, "high": 24.88, "close": 24.51, "low": 23.38, "volume": 161732.8, "price_change": 0.56, "p_change": 2.34, "ma5": 24.576, "ma10": 23.958, "ma20": 23.105, "v_ma5": 195688.49, "v_ma10": 164855.13, "v_ma20": 150908.43, "date": "2017-09-06"}, {"open": 23.76, "high": 24.32, "close": 23.95, "low": 23.31, "volume": 138987.19, "price_change": 0.19, "p_change": 0.8, "ma5": 24.504, "ma10": 23.814, "ma20": 22.95, "v_ma5": 202643.87, "v_ma10": 175133.74, "v_ma20": 145571.54, "date": "2017-09-05"}, {"open": 24.45, "high": 24.45, "close": 23.76, "low": 23.3, "volume": 244004.84, "price_chan

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的使用 HTML 和 Canvas 接收后端识别框 JSON 数据,然后在前端绘制检测框的示例代码。其中,使用了 YOLOv5 作为后端的目标检测模型。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YOLOv5 Object Detection</title> </head> <body> <canvas id="canvas"></canvas> <script> // 初始化 Canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 定义画框函数 function drawRect(x, y, w, h, color) { ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.rect(x, y, w, h); ctx.stroke(); } // 定义接收后端识别框数据的函数 function receiveDetection(data) { // 清空 Canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // 遍历识别框数据并绘制框 for (var i = 0; i < data.length; i++) { var x = data[i].x; var y = data[i].y; var w = data[i].w; var h = data[i].h; var color = data[i].color; drawRect(x, y, w, h, color); } } // 使用 Ajax 发送请求获取后端识别框数据 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); receiveDetection(data); } }; xhr.open('GET', 'url_to_your_detection_api'); xhr.send(); </script> </body> </html> ``` 在代码中,首先定义了一个 `drawRect` 函数,用于绘制检测框。然后定义了一个 `receiveDetection` 函数,用于接收后端返回的识别框数据,并在 Canvas绘制检测框。最后使用 Ajax 发送请求获取后端识别框数据,并调用 `receiveDetection` 函数进行绘制。请注意将 `url_to_your_detection_api` 替换为您自己的目标检测 API 的 URL。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值