如何从角度范围对象加载圆环图数据

时间:2017-12-11 07:47:43

标签: javascript jquery angularjs charts

这是我的代码格式:如何从角度范围对象加载数据。
静态数据工作正常。但是从范围对象获取不会显示任何内容。

var app=angular.module('myApp',[])
 app.controller('myController',function($scope){
 $scope.init = function(){
 
 $scope.loadData()
 var ctx = document.getElementById('mycanvas').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["EL", "AL", "PL", "CL"],
                datasets: [{
                    backgroundColor: ['green', 'red', 'pink', 'blue'],
                    data: $scope.datas,
                }]
            },
            options: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: { bodyFontSize: 12 }
            }
        });
 }
 $scope.loadData = function(){
 $scope.datas=[
 {
 'EL':2
 },
 {
 'AL':2
 },
 {
 'PL':2
 },
 {
 'CL':2
 }
 ]
 }
 })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<canvas id="mycanvas"></canvas>
</div>

如何从图表的角度范围对象加载数据。

1 个答案:

答案 0 :(得分:1)

你几乎做对了!

这里的重点是您的数据格式。 你无法传递这样的对象。

{ 
  "statusCode": 401, 
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription." 
} 

这种数据格式正在发挥作用。

 $scope.requestedLeaveTypeCount=[{'EL': 2}, {'AL': 2}, {'PL': 2}, {'CL': 2}];

<强> DEMO