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

Question

i want to reload the chart in every 30 seconds using angular js. 我想使用angular js每30秒重新加载一次图表。 how to reload chart to show latest values.how to use setInterval(function() in angular js ? how to reload the fusion chart in every 30 seconds. 如何重新加载图表以显示最新值。如何在angular js中使用setInterval（function（）？如何每30秒重新加载融合图表。

code 码

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>

Answer 1

To refresh your chart on certain interval, you can make use of FusionCharts API method feedData() which will feed updated data on each interval, this will work under rendered api event which is triggered when the chart completes drawing. 要按特定间隔刷新图表，您可以使用FusionCharts API方法feedData（），该方法将按每个间隔提供更新的数据，这将在呈现api事件时起作用，该事件在图表完成绘制时触发。

Created a sample fiddle using your data where the dial value is updated after each 5 seconds: http://jsfiddle.net/ayanbhaduryfc/1waau2hw/ 使用您的数据创建样本小提琴，其中拨号值每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>

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

问题描述

1 个解决方案

解决方案1
2 2017-02-24 09:33:41

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

问题描述

1 个解决方案

解决方案1 2 2017-02-24 09:33:41

解决方案1
2 2017-02-24 09:33:41