使用 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/