2015-10-05 42 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吗? –