2015-10-05 46 views
1

如何在angularjs高度圖中設置setInterval ng折線圖配置設置。我正在使用highcharts-ng創建一個動態折線圖,我的圖表顯示了最初的靜態數據,當涉及到顯示動態數據時,我發現在scope.chartConfig4中加載事件沒有得到關注,所以我的圖表保持靜態。這是我的代碼片段。用於HighCharts-ng的Angular JS中的setInterval不起作用

更新:我正在使用highcharts-ng一個角度指令,即使在我將超時修正爲間隔後,它仍不顯示我的動態映射。我正在嘗試使用angularjs轉換以下代碼http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm。請幫忙。

$scope.chartConfig4 = { 
 
    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[0]; 
 
     setInterval(function() { 
 
      var x = (new Date()).getTime(), // current time 
 
      y = Math.random(); 
 
      series.addPoint([x, y], true, true); 
 
     }, 1000); 
 
     } 
 
    } 
 
    }, 
 
    title: { 
 
    text: '' 
 
    }, 
 
    xAxis: { 
 
    type: 'datetime', 
 
    tickPixelInterval: 150 
 
    }, 
 
    yAxis: { 
 
    title: { 
 
     text: 'Users(in thousands)' 
 
    }, 
 
    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: 'Users', 
 
    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; 
 
    }()) 
 
    }] 
 
};
更新:我使用highcharts-ng的一個角指令,它不顯示我即使我校正的超時間隔的動態地圖。我正在嘗試使用angularjs轉換以下代碼 http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm。請幫忙。

回答

3

setInterval將您帶到Angular範圍之外,這意味着$scope.apply()永遠不會被調用。您應該使用$interval,以便正確觸發摘要循環。

$interval(function() { 
    var x = (new Date()).getTime(), // current time 
    y = Math.random(); 
    series.addPoint([x, y], true, true); 
}, 1000); 
+0

謝謝大衛!我正在使用highcharts-ng一個角度指令,即使在我將超時更正爲間隔之後,該指令也不會顯示我的動態映射。我正在嘗試使用angularjs轉換下面的代碼http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm。請幫忙。 – John

+0

@John當你無法縮小確切的問題時,對於我不熟悉的庫進行故障排除太困難。你能夠創造一個重現問題的重擊者或jsfiddle嗎? –