这里以基金净值画折线图为例
数据文件 660008.csv
date,jz,ljjz
2016-01-04,1.1141,1.1141
2016-01-05,1.1161,1.1161
... ...
2019-04-02,1.3440,1.3440
2019-04-03,1.3605,1.3605
2019-04-04,1.3736,1.3736
date_json.py 生成要求的 json 数据
# coding=utf-8
import os, sys
import time
import json
if len(sys.argv) ==2:
f1 = sys.argv[1]
else:
print('usage: date_json.py fcode.csv ')
sys.exit(1)
if not os.path.exists(f1):
print("Error: %s not found." % f1)
sys.exit(1)
fn,ext = os.path.splitext(f1)
if len(fn) !=6:
print('Error: len(%s) !=6' % fn)
sys.exit(1)
if ext !='.csv':
print('Error: %s is not .csv' % f1)
sys.exit(1)
fp = open(f1,'r')
fp.readline()
f2 = fn +'.json'
fp2 = open(f2,'w')
fp2.write('{"code":1,"msg":"OK","data":')
ts=0 # timestamp
jz = float('0.0')
alist =[]
for line in fp:
date,jz,lljz = line.strip().split(',')
time1 = time.strptime(date, "%Y-%m-%d")
ts = int(time.mktime(time1))*1000
jz = float(jz)
alist.append([ts,jz])
#
json.dump(alist,fp2)
fp2.write('}')
fp2.close()
fp.close()
注意:timestamp 是以秒为单位,highstock 里的时间戳是毫秒,有1千的数值倍差。x1000就好了。
运行 date_json.py 660008.csv
base_line.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.highcharts-axis-resizer {
stroke: #eee;
}
.highcharts-axis-resizer:hover {
stroke: #ccc;
}
</style>
<script src="https://img.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.highcharts.com.cn/highstock/highstock.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/themes/grid-light.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>
$.getJSON('data/660008.json', function (data) {
if(data.code !== 1) {
alert('读取数据失败!');
return false;
}
data = data.data;
Highcharts.setOptions({ global: { useUTC: false } });
Highcharts.each(data, function(d) {
d.length = 2;
});
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: '660008 基金净值'
},
plotOptions: {
series: {
showInLegend: true
}
},
tooltip: {
split: false,
shared: true
},
series: [{
// type: 'line',
id: '660008',
name: '净值',
data: data
}]
});
});
</script>
</body>
</html>