highstock+websocket实现动态展现

效果：从后台获取回测数据，在前端动态展现，和聚宽实现的回测效果相仿

大体思路：先传一个[[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")