如何从数组值中制作饼图?

时间：2021-06-10 20:37:20

I have array like this:

我有这样的数组:

$scope.commonEstimationStats = {
                rates: [
                    {
                        "direction": {
                            "id": 13,
                            "name": "health",
                            "type": 1
                        },
                        "points": 5
                    },
                    {
                        "direction": {
                            "id": 14,
                            "name": "education",
                            "type": 1
                        },
                        "points": 3
                    }, ....

I make model version so I want just to show pie chart which will have data from points and labels from names.

我做了模型版本，所以我想要展示饼图，它会有来自点的数据和名字的标签。

I make like this:

我是这样的:

 <canvas id="pie" class="chart chart-pie"
                                    chart-data="commonEstimationStats.rates.points" chart-labels="commonEstimationStats.rates.direction.name" chart-options="options">
                            </canvas>

but it is not working.

但它不起作用。

1 个解决方案

#1

1  

You can use angular.Foreach to generate labels and data.

您可以使用角。Foreach生成标签和数据。

    $scope.labels = [];
    $scope.data = [];
    angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
      $scope.labels.push(key.direction.name);
      $scope.data.push(key.points);
    })

DEMO

演示

angular.module("app", ["chart.js"])
  .controller("BarCtrl", function($scope) {
    $scope.commonEstimationStats = {
      rates: [{
        "direction": {
          "id": 13,
          "name": "health",
          "type": 1
        },
        "points": 5
      }, {
        "direction": {
          "id": 14,
          "name": "education",
          "type": 1
        },
        "points": 3
      }]
    };
    $scope.labels = [];
    $scope.data = [];
    angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
      $scope.labels.push(key.direction.name);
      $scope.data.push(key.points);
    })
    $scope.datasetOverride = [{
      fill: true,
      backgroundColor: [
        "#66ff33",
        "#36A2EB",
        "#FFCE56"
      ]
    }, {
      fill: true,
      backgroundColor: [
        "#ffff00",
        "#46BFBD",
        "#FDB45C"
      ]
    }];
  });
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script>
  <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>  
</head>
<body>
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels"></canvas>
  </div>
</body>
</html>

#1

1  

You can use angular.Foreach to generate labels and data.

您可以使用角。Foreach生成标签和数据。

    $scope.labels = [];
    $scope.data = [];
    angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
      $scope.labels.push(key.direction.name);
      $scope.data.push(key.points);
    })

DEMO

演示

angular.module("app", ["chart.js"])
  .controller("BarCtrl", function($scope) {
    $scope.commonEstimationStats = {
      rates: [{
        "direction": {
          "id": 13,
          "name": "health",
          "type": 1
        },
        "points": 5
      }, {
        "direction": {
          "id": 14,
          "name": "education",
          "type": 1
        },
        "points": 3
      }]
    };
    $scope.labels = [];
    $scope.data = [];
    angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
      $scope.labels.push(key.direction.name);
      $scope.data.push(key.points);
    })
    $scope.datasetOverride = [{
      fill: true,
      backgroundColor: [
        "#66ff33",
        "#36A2EB",
        "#FFCE56"
      ]
    }, {
      fill: true,
      backgroundColor: [
        "#ffff00",
        "#46BFBD",
        "#FDB45C"
      ]
    }];
  });
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script>
  <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>  
</head>
<body>
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels"></canvas>
  </div>
</body>
</html>

标签：

相关文章