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

【问题标题】：How to constrantly refresh chart with new data?如何用新数据不断刷新图表？
【发布时间】：2016-03-11 10:29:38
【问题描述】：

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

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

plunker也有类似的情况，但是我怕这个方法内存泄漏，而且图表总是闪烁。

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

谢谢。

【问题讨论】：

你为什么不用socket.io？
您在后端使用什么技术？（NodeJs、.Net 等...）
我将 NodeJS 和 socket.io 用于另一个功能 :) @Adam，有没有任何示例如何将 C3 与 socket.io 一起使用？

标签： javascript angularjs settimeout setinterval c3.js

【解决方案1】：

Plunker 很棒，但问题是它不断调用c3.generate，这就是它泄漏内存和闪烁的原因（每次运行generate 时，您实际上是在创建一个新的 C3 图表实例；它所做的一切被称为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。

【讨论】：