在highcharts中动态添加系列

时间:2013-07-25 11:07:19

标签: javascript jquery highcharts

(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循环的情况下添加点吗?因为我有时可以获得数百万个系列,并且我不想循环遍历数组以检查它是否存在。那么是否有任何有效的方法可以找到列表已经存在的情况,以及它的索引是什么?

这是它的小提琴:www.jsfiddle.net/2jYLz /

1 个答案:

答案 0 :(得分:0)

事实上,当您添加新系列时,您已启用addPoint()移位。换句话说,移动删除第一个点并在系列结尾添加新的。因此当你有一个点时它会导致你的场景。所以你需要禁用shipfing,当series.data的长度达到10点时,应该启用移位。