如何使用angularjs每30秒刷新圖表

-1

我想使用角度js每30秒重新加載圖表。如何重新加載圖表顯示在角JS使用的setInterval（函數（）最新values.how？如何重新加載融合圖表中，每30秒。如何使用angularjs每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>

來源

2017-02-23 Swapna

'和'30000'時間$ interval'將使招（*注意：不要忘了'$ destroy'事件*清除異步事件） –

如果你想acheive實時更新，我會建議嘗試使用套接字技術。 – Nicolas

http://tutorials.jenkov.com/angularjs/timeout-interval.html – PhatBuck

要刷新某些圖表間隔，您可以使用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>

來源

2017-02-24 09:33:41

如何使用angularjs每30秒刷新圖表

回答

相關問題