如何用新数据不断刷新图表？

Question

我正在寻找合适的方法来刷新不断从 API 获取数据的条形图。

$http({
  method: 'GET',
  url: '/data' //getting data from API
}).then(function ( json ) {
   //chart 
}

plunker上也有类似情况，但我怕内存泄漏，图表一直在闪烁。

有人建议用什么代替间隔吗？或者以其他方式使用它？

谢谢。

Answer 1

那个 Plunker 很棒，但问题是它会不断调用 c3.generate，这就是它泄漏内存和闪烁的原因（实际上，每次运行 generate;它所做的一切都被称为new Chart(config);)

您需要做的是在控制器中实例化 C3，然后在 $http 调用中调用 c3.load()。

Updated Plunker

关键位：

  $interval(function() {
    $http.get('chartData.json')
      .then(function(json) {
        $scope.countries = formatData(json.data); // format received data
        $scope.chart.load({json: $scope.countries, keys: { value: ['Croatia', 'Belgium', 'Argentina'] }});
      });
  }, 1000);

$interval+$http 组合应该可以正常工作，前提是您正在加载的 JSON 文件只是在某处的 CDN 上（如果它是由 REST API，你要么会被限制，要么会清理你的服务器）。你可能想看看 $http's caching docs.

如何用新数据不断刷新图表？

How to constrantly refresh chart with new data?

javascript

settimeout

setinterval

angularjs

c3.js