Question

我想使用角度js每30秒重新加载一次图表。如何重新加载图表以显示最新值。如何使用setInterval（角度js中的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>

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

如何使用angularjs

1 个答案: