2013-07-25 160 views
1
(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」系列不在其點之間繪製線條。可能是什麼問題?在highcharts中動態添加系列

是否有任何其他方式比較數組和添加點沒有for-loop?因爲我有時可以獲得數百萬個系列,我不想循環訪問數組來檢查它是否存在。那麼是否有任何有效的方法來找到一個已經存在的列表,以及它是否指定了它的索引?

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

回答

0

它與事實,你已經在addPoint使變速()當你添加新的系列相關。換句話說,移動刪除第一點並在最後的系列中添加新的。所以當你有一點時,就會導致你的情況。所以你需要禁用造船,並且當series.data的長度達到10點時,應該啓用換檔。

+0

比爲什麼其他系列點通過線路連接? – user2137186

+0

http://jsfiddle.net/2jYLz/這裏是myfiddle – user2137186

+0

因爲有更多的點..? –