setInterval in Angular JS для HighCharts-ng не работает

Question

Как установить setInterval в настройках конфигурации диаграммы угловых диаграмм в формате angularjs. Я работаю над созданием динамической линейной диаграммы с использованием highcharts-ng, и моя диаграмма отображает начальные статические данные, а когда дело доходит до отображения динамических данных, я вижу, что событие load в scope.chartConfig4 не получает внимания, поэтому моя диаграмма остается статической. Вот мой фрагмент кода.

Обновление: Я использую highcharts-ng угловую директиву, которая не отображает мою динамическую карту даже после того, как я исправил таймаут до интервала. Я пытаюсь преобразовать следующий код http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm с помощью angularjs. Пожалуйста помоги.

$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; 
 
    }()) 
 
    }] 
 
};

Update: Я использую Highcharts-нг угловую директиву, которая не отображает мою динамическую карту, даже после того, как я исправленное значение тайм-аута интервала. Я пытаюсь преобразовать следующий код http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm с помощью angularjs. Пожалуйста помоги.

Answer 1

setInterval принимает вас за пределы области Angular, что означает, что $scope.apply() никогда не вызывается. Вместо этого вы должны использовать $interval, чтобы цикл дайджеста был правильно запущен.

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