2013-05-21 55 views
2

這是我用隨機數據 http://jsfiddle.net/Fw4PZ/Highcharts - 更新圖表用ajax

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

     var chart; 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'area', 
       marginRight: 10, 
       events: { 
        load: function() { 

         // set up the updating of the chart each second 
         var series = this.series[1]; 
         setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
           y = Math.random(); 
          series.addPoint([x, y], true); 
         }, 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: [] 
      },{ 
       name: 'Random data', 
       type: 'spline', 
       data: [] 
      }] 
     }); 
    }); 

}); 

如何更新每個系列樣品圖,不僅[1]?

   load: function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
          y = Math.random(); 
         series.addPoint([x, y], true); 
        }, 1000); 

        // set up the updating of the chart each second 
        var series = this.series[1]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
          y = Math.random(); 
         series.addPoint([x, y], true); 
        }, 1000); 
       } 

不工作...

和2東西......如何使用AJAX來更新這些系列? (我需要有2個區域和4個樣條)

UPDATE 所以我改變了

 events: { 
      load: function() { 

       // set up the updating of the chart each second 
       var series = this.series; 
       setInterval(function() { 
        var x = (new Date()).getTime(), // current time 
         y = Math.random(); 

        series[0].addPoint([x, y], false); 
        series[1].addPoint([x, y], false); 
        series[2].addPoint([x, y], false); 
        series[3].addPoint([x, y], false); 
        series[4].addPoint([x, y], false); 
        series[5].addPoint([x, y], true); 
       }, 5000); 
      } 
     } 

,但它崩潰我的瀏覽器:\ http://jsfiddle.net/2tmRB/1/(!注意與鏈接) 我做錯了嗎?

+0

但是我無法打開這個例子,因爲所有的都被凍結了。看看例子:http://jsfiddle.net/Fw4PZ/3/,它工作正常。 –

回答

3

實施例:

var series = this.series; 
setInterval(function() { 
    var x = (new Date()).getTime(), // current time 
    y = Math.random(), 
    y1 = Math.random(); 
    series[0].addPoint([x, y], false); 
    series[1].addPoint([x, y1], true); 
}, 1000); 

直播例如:http://jsfiddle.net/Fw4PZ/1/

關於AJAX - 以防的setInterval調用一些的getJSON()或類似的東西,並使用addPoint()從響應於該圖表中添加值(如在上面的例子)。

+0

DziękiPaweł,thxPaweł – breq

+0

我有更多系列的問題:(它崩潰了我的瀏覽器(請參閱主題) – breq

+0

您正在將分類軸('類別:[...]')與日期時間軸([timestamp,value])混合所以它試圖顯示所有時間戳的類別,直到1369142816260(示例),所以它掛起瀏覽器。使用或類別,或日期時間xAxis:http://jsfiddle.net/Zf26V/2/ –