javascript - 使用 HighCharts 动态更新同一图表上的两个系列

Question

var myChart = Highcharts.chart('containerX', {

        chart: {
          type: 'spline',
          //animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
              load: function () {

                  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
                  var series = this.series[0];


                 socket.on('newnumber', function(msg) {

                        var x = (new Date()).getTime() // current time
                        var y = parseFloat(msg.number)

                        console.log(msg.number)

                        series.addPoint([x, y], true, true);



                  });

                  socket.on('newnumber2', function(msg2) {

                         var x = (new Date()).getTime() // current time
                         var y = parseFloat(msg2.number2)

                         console.log(msg2.number2)

                         series.addPoint([x, y], true, true);



                   });

              }
          },
},

...

series: [{
    name: 'Random data',
    data: (function () {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -19; i <= 0; i += 1) {
            data.push({
                x: time + i * 1000,
                y: Math.random()
            });
        }
        return data;
    }())

}]

在代码中，我同时通过flask-socketio接收两个不同的值。 msg.number 和 msg.number2

我可以仅使用一个系列在图表上正确显示值，例如msg.number，但我想向图表中添加另一个系列，例如msg.number2

我应该如何修改代码来实现这个目标？

Answer 1

您需要在初始配置中添加另一个系列:

series: [{
  ...
}, {
  ...
}]

并在 load 事件中正确引用它:

events: {
  load: function() {
    ...
    var series1 = this.series[0];
    var series2 = this.series[1];

    socket.on('newnumber', function(msg) {
      ...
      series1.addPoint([x, y], true, true);
    });

    socket.on('newnumber2', function(msg2) {
      ...
      series2.addPoint([x, y], true, true);
    });
  }
}

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4933/