Angular JS中的setInterval对HighCharts-ng不起作用

setInterval in Angular JS for HighCharts-ng does not work

本文关键字:HighCharts-ng 不起作用 setInterval JS 中的 Angular      更新时间:2023-09-26

如何在angularjs highcharts ng折线图配置设置中设置setInterval ?我正在使用highcharts-ng创建一个动态折线图,我的图表显示初始静态数据,当涉及到显示动态数据时,我看到负载事件在范围内。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;
     }())
   }]
 };
更新:我使用highcharts-ng一个角指令,它不显示我的动态地图,即使我纠正了超时时间间隔。我试图转换以下代码http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm使用angularjs。请帮助。

setInterval会把你带出Angular的作用域,这意味着$scope.apply()永远不会被调用。您应该使用$interval,以便正确触发摘要循环。

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