anglejsを使用して30秒ごとにグラフをリフレッシュする方法

-1

角度のjを使用して30秒ごとにグラフをリロードします。 30秒ごとに融合チャートをリロードする方法？角度JSでのsetInterval（関数（）を使用して、最新のvalues.howを表示するには、チャートをリロードする方法について説明します。anglejsを使用して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'時間がトリック（*注：' $のdestroy'イベントで非同期イベントをクリアすることを忘れないでください*）になるだろうと '$のinterval'あなたはリアルタイム更新を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

anglejsを使用して30秒ごとにグラフをリフレッシュする方法

答えて

関連する問題