首页 > 解决方案 > angular-chart.js:如何在图表中使用来自变量的动态数据而不是静态值?

问题描述

我正在使用这个框架用 angularjs 绘制图表:http: //jtblin.github.io/angular-chart.js/。我已经搜索过stackoverflow,但没有任何问题可以真正解决我的问题。

我用静态数据绘制图表没有问题,例如 $scope.data = [50,30,70]

我希望图表使用存储在变量中的值,并且我假设我可以简单地将我的值放入一个数组中并执行类似 $scope.data = myArray; 的操作。或将我的变量放入数组中,如 $scpe.data = [myData]; 但这不起作用,我不知道还有什么可以尝试的。我是 angularJS 和 Chart.js 的新手。

作为测试,我只想阅读我的 cpuload 并将其放入图表中。

这是我的html:

   <div style="width:300px; height:300px" ng-controller="BarCtrl">   
        <canvas id="bar" class="chart chart-bar"
            chart-data="data" chart-labels="labels"> chart-series="series"
        </canvas>
    </div>

这是我的角度控制器:

app.controller('MonitorController', ['$scope', function ($scope) {
var vm = this;
setInterval(function(){
    si.currentLoad(function(data) {
    vm.cpuLoad = Math.round(data.currentload); 

    $scope.$apply();

 }); }, 1000);
}])

app.controller("BarCtrl", function ($scope) {

$scope.labels = ['2017'];
$scope.series = ['Series A'];

$scope.data = [50]; });

我希望 $scope.data 使用来自 vm.cpuLoad 的值。

谁能帮我怎么做?如果需要,您也可以忽略间隔。告诉我如何在这个中应用另一个控制器中变量的数据。

提前致谢。

标签: javascriptangularjsangular-chart

解决方案


推荐阅读