效果:从后台获取回测数据,在前端动态展现,和聚宽实现的回测效果相仿
大体思路:先传一个[[int,0],[int,0],[int,0],[int,0],[int,0],...]格式的死数据到前端渲染x轴,这样在我们动态加载数据的时候就不会出现x轴动态的变化的尴尬场面了,但是还有一个问题就是0轴上的数据也会显示到数据框,这个时候我们就需要设置一个属性 enableMouseTracking: false 这个属性我找了好长时间,所以一定要记住!
index.html代码
var chart = Highcharts.stockChart('container', {
rangeSelector: {
allButtonsEnabled: true
},
chart: {
animation: false,
showAxes: true
},
credits: { //版权信息配置
enabled: false
},
tooltip: { // 数据提示框配置
split: false,//把x轴和y轴放在一个图标里
xDateFormat: '%Y年%m月%d日,%A',//鼠标移动到趋势线上时显示的日期格式
shared: true,
pointFormatter: function () {
return '<span style="color: '+ this.series.color + '">\u25CF</span> '+ this.series.name+': <b>'+ (this.y*100).toFixed(3) + '%</b><br/>'
}
},
xAxis: {
crosshair: { // 十字准星线配置
width: 1,
color: "black"
},
type: 'datetime', // 时间轴
tickmarkPlacement:"on", // 点和x轴对齐
labels: {
formatter: function () {
return Highcharts.dateFormat("%Y-%m-%d", this.value);
}
},
minTickInterval: 24
},
yAxis: {
labels: {
formatter: function () {
return this.value*100+"%"; // y轴数据百分比
}
}
},
series: [{
name:'',
data:[],
color:"black",
enableMouseTracking: false //鼠标移动的时候0轴信息不显示
},{
name: '策略收益',
data:[],
color:"#058DC7"
}]
});
var ws;
var return_dic;
var i=0;
function run_py() {
ws = new WebSocket("ws://127.0.0.1:8888/run_py/");
var msg = {
py_name: $("#py_name").val(),
py_count: $("#py_count").val()
};
ws.onopen = function() {
ws.send(JSON.stringify(msg));
};
// 思路:第0个数据列渲染一个0轴,其余数据列通过addpoint动态渲染
ws.onmessage = function (evt) {
return_dic = JSON.parse(evt.data);
if ("date_false" in return_dic){
chart.series[0].setData(return_dic.date_false); // 先把0轴渲染出来
}else {
console.log(chart.series[0].data[i].x);
chart.series[1].addPoint([chart.series[0].data[i].x,return_dic.returns]); // 动态添加真实数据
i+=1;
}
};
}
注意注意:一定是 (this.y*100).toFixed(3)而不是this.y.toFixed(5)*100,不然页面会有bug,踩过坑的人都懂
后端代码
class EchoWebSocket(tornado.websocket.WebSocketHandler):
def open(self):
print("WebSocket opened")
def on_message(self, message): #主逻辑在这里写的,注意不要忘了发完数据关闭close掉连接,如果要求一直连着那就没必要关了
self.write_message(u"You said: " + message)
def on_close(self):
print("WebSocket closed")