动态更新Highcharts时间序列图表中的行

Question

在这里，我正在使用基于样本jsfiddle的实时流数据处理Highcharts时间序列图表。在小提琴中，显示了4行，分别命名为input1，input2，input3，＆amp;输入4并使用实时随机数据更新，但在我的实际项目中，输入值通过MQTT更新。在实际项目中，有时候，当我们推送流数据时，no：输入会增加或减少（例如input5，input6就像这样）。那么我们如何在流数据的时间序列图中动态添加新行或删除行。

javascript代码：

$(function() {
$(document).ready(function() {
Highcharts.setOptions({
  global: {
    useUTC: false
  }
});

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

        // set up the updating of the chart each second
        var series = this.series;
        var length = series.length;
        setInterval(function() {

          var x = (new Date()).getTime(), // current time
            a0 = Math.random();
          a1 = Math.random();
          a2 = Math.random();
          series[0].addPoint([x, Math.random()], true, true);
          for (var i = 1; i < length; i++) {
            series[i].addPoint([x, Math.random()], false, true);
          }
        }, 1000);
      }
    }
  },
  title: {
    text: 'Live random data'
  },
  legend: {
    enabled: true
},
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: 'Value'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
        Highcharts.numberFormat(this.y, 2);
    }
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'input1',
    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;
    }())
  }, {
    name: 'input2',
    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;
    }())
  }, {
    name: 'input3',
    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;
    }())
  }, {
    name: 'input4',
    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;
    }())
  }]
});
});
});