Javascript 如何使用angularjs每30秒刷新一次图表_Javascript_Jquery_Angularjs

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

javascript jquery angularjs

Javascript 如何使用angularjs每30秒刷新一次图表,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我想用angular js每隔30秒重新加载一次图表。如何重新加载图表以显示最新值。如何在angular js中使用setIntervalfunction？如何在每30秒内重新加载融合图代码要在特定时间间隔刷新图表，可以使用FusionCharts API方法feedData，该方法将在每个时间间隔上提供更新的数据，这将在图表完成绘制时触发的渲染API事件下工作使用您的数据创建了一个提琴示例，拨盘值每5秒更新一次： $interval和30000时间将使问题变得棘手：不要忘记在$dest

我想用angular js每隔30秒重新加载一次图表。如何重新加载图表以显示最新值。如何在angular js中使用setIntervalfunction？如何在每30秒内重新加载融合图

代码

要在特定时间间隔刷新图表，可以使用FusionCharts API方法feedData，该方法将在每个时间间隔上提供更新的数据，这将在图表完成绘制时触发的渲染API事件下工作

使用您的数据创建了一个提琴示例，拨盘值每5秒更新一次：

$interval和30000时间将使问题变得棘手：不要忘记在$destroy event中清除异步事件如果您试图实现实时更新，我建议尝试使用socket technologie。同意@Nicolas并建议使用socket而不是$interval-

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>

<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>