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

更多: 股票数据分析Python+Tushare使用系列(一)(二)(三)等等

---

本文介绍:利用 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绘制曲线代码不是本人写的,我只是个搬运工^_

显示结果:

图片.png

二 给K线图添加量 均线

考虑到该接口同时还返回了交易量数据volume,v_ma5,v_ma10,v_ma20:

{
            "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.21",
            "v_ma5":"120159.21",
            "v_ma10":"84689.28",
            "v_ma20":"69688.92"
        }

现将其添加到K线图的底部,其它指标也是一样:
简单修改一下js代码:

修改后显示截图:

图片.png