javascript - 在 Highcharts 中动态添加系列

Question

(function($){
  $(function () {
    $(document).ready(function() {
      Highcharts.setOptions({
        global: {
          useUTC: false
        }
      });
      var i=0;
      var chart = new Highcharts.Chart({
        chart: {
          type: 'spline',
          renderTo: 'container',
          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[0];
              setInterval(function() {
                var Name = new Array();
                Name[0] = "Random data";
                Name[1] = "Volvo";
                var length=chart.series.length;
                var flag=0;
                var index=0;
                var x = (new Date()).getTime(), // current time
                y = Math.random();
                for (var k=0;k<Name.length;k++) {
                  for(var j=0;j<chart.series.length;j++) {
                    if(chart.series[j].name==Name[k]) {
                      flag=1;
                      index=j;
                      x = (new Date()).getTime();
                      y = Math.random();
                      break;
                    }
                  }
                  if(flag==1) {
                    chart.series[index].addPoint([x, y], true, true);
                    flag=0;
                  } else {
                    chart.addSeries({name: '' + Name[k] + '', data: [] });
                    chart.series[length].addPoint([x, y+1], true);
                    length=length+1;
                  }
                }
              }, 1000);
            }
          }
        },
        title: {
          text: 'Live random data'
        },
        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);
          }
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        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++) {
              data.push({
                x: time + i * 1000,
                y: Math.random()
              });
            }
            return data;
          })()
        }]
      });
    });
  });
})(jQuery);

我可以在图表中添加系列和添加点，但我在初始化后添加的系列(即“volvo”)不会在其点之间绘制线条。可能是什么问题？

还有没有其他方法可以在不使用 for 循环的情况下比较数组和添加点？因为我有时可以获得数百万个系列，并且我不想循环数组来检查它是否存在。那么有没有什么有效的方法来查找列表是否已经存在，如果存在，它的索引是什么？

这是它的 fiddle :www.jsfiddle.net/2jYLz/

Answer 1

这与您在添加新系列时在 addPoint() 中启用了移位有关。换句话说，移动会删除第一个点并在系列末尾添加新点。因此，当你有一点时，它就会导致你的情况。所以你需要禁用shipfing，当series.data的长度达到10点时，应该启用shifting。