如何使用angularjs每30秒刷新一次图表答案

【问题标题】：how to refresh the chart in every 30 seconds using angularjs如何使用angularjs每30秒刷新一次图表
【发布时间】：2017-07-14 02:39:11
【问题描述】：

我想使用 Angular js 每 30 秒重新加载一次图表。如何重新加载图表以显示最新值。如何在角度 js 中使用 setInterval(function()？如何在每 30 秒内重新加载融合图表。

代码

var app = angular.module('myApp', ["ng-fusioncharts"]);
app.controller('myCtrl', function ($scope, $http) {


    $scope.chartData = {
        "chart": {
            "caption": "chart 1",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "theme": "fint",
            "width": '50%',
            "height": '50%'
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "30",
                "code": "#6baa01"
            }, {
                "minValue": "31",
                "maxValue": "70",
                "code": "#f8bd19"
            }, {
                "minValue": "71",
                "maxValue": "100",
                "code": "#e44a00"
            }]
        },
        "dials": {
            "dial": [{
                "value": "@Model[0].Filled.ToString("N2")"
           }]
        }
    };
});



       <div class="container" ng-app="myApp" ng-controller="myCtrl">
                <fusioncharts id="chartContainer1" width="300" height="300" type="angulargauge" datasource={{chartData}}></fusioncharts>
<div>

【问题讨论】：

$interval 和 30000 时间会成功（注意：不要忘记清除 $destroy 事件中的异步事件）
如果您想实现实时更新，我建议您尝试使用套接字技术。
tutorials.jenkov.com/angularjs/timeout-interval.html
stackoverflow.com/questions/23541857/…
同意@Nicolas 并建议使用 socket 而不是 $interval ;-)

标签： javascript jquery angularjs

【解决方案1】：

要在某个时间间隔刷新图表，您可以使用 FusionCharts API 方法 feedData()，它会在每个时间间隔提供更新的数据，这将在图表完成绘制时触发的渲染 api 事件下工作。

使用您的数据创建了一个示例小提琴，其中表盘值每 5 秒更新一次： http://jsfiddle.net/ayanbhaduryfc/1waau2hw/

<html ng-app="HelloApp">

<body ng-controller="MyController">
<div>
  <fusioncharts id="mychartcontainer" chartid="mychart" width="550"     height="270" type="angulargauge" dataSource="{{dataSource}}" events="events">  </fusioncharts>

 <script>
   var app = angular.module('HelloApp', ["ng-fusioncharts"])
 app.controller('MyController', function($scope) {

 $scope.events = {
 "rendered": function(evtObj, argObj) {
  var intervalVar = setInterval(function() {
    var chartIns = evtObj.sender,
      prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);

    chartIns.feedData("value=" + prcnt);

  }, 5000);
  }


 };

  $scope.dataSource = {
  "chart": {
  "caption": "chart 1",
  "lowerLimit": "0",
  "upperLimit": "100",
  "showValue": "1",
  "valueBelowPivot": "1",
  "theme": "fint",
  "width": '50%',
  "height": '50%'
},
"colorRange": {
  "color": [{
    "minValue": "0",
    "maxValue": "30",
    "code": "#6baa01"
  }, {
    "minValue": "31",
    "maxValue": "70",
    "code": "#f8bd19"
  }, {
    "minValue": "71",
    "maxValue": "100",
    "code": "#e44a00"
  }]
},
"dials": {
  "dial": [{
    "value": "54"
  }]
}
};

});
 </script>

 </div>
</body>
 </html>

【讨论】：