如何使用AngularJS中的进度条创建条形图？

我是AngularJS新手，我正在尝试使用AngularJS中的进度条为我的以下值创建一个条形图

我的回答是：

var json_response =  {

  "data": [
    {
      "standard": "Ist",
      "max_students": 20,
      "available_students": 8
    },
    {
      "standard": "IInd",
      "max_students": 15,
      "available_students": 10
    },
    {
      "standard": "IIIrd",
      "max_students": 50,
      "available_students": 22
    }
  ]
}

我需要使用上面的响应并以垂直条形图的形式显示它。

您想签出吗。它为您提供了许多使用角度指令创建图表的选项

你可以这样做：

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = [];
  var students_data = [];
  var available_students_data = [];

  angular.forEach(json_response["data"], function(data) {
    $scope.labels.push(data["standard"]);
    students_data.push(data["max_students"]);
    available_students_data.push(data["available_students"]);
  });

  $scope.series = ['max_students', 'available_students'];
  $scope.data = [students_data, available_students_data];
});

在您的html中，您只有以下内容：

<div ng-controller="BarCtrl">
  <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"> chart-series="series"
  </canvas>
</div>

图表系列=“系列”

---

如果您只需要可以使用的进度条，请选中此项

---

这里有一个例子，

盎格鲁-JS与图表没有任何关系，考虑使用第三方工具，如C3.JS、HealChants等。如果我使用HTML从角函数使用值创建进度条图。然后呢？那么这只会花费你很多努力，你需要编写大量的javascript代码和css，如果我使用html来创建进度条形图，使用角度函数的值，这是不必要的。那么？@KalaiyarasiM，我更新了答案。检查plunker，看看它是否接近您想要实现的目标。我得到的是angularjs 1.2.20版本，上面使用的是angularjs 1.4。因此，当我提到[“chart.js”]时，我得到了一个错误。错误：[ng:areq]参数“BarController”不是一个函数，未定义“@KalaiyarasiM，我不确定angularjs版本是否会成为angularjs的问题，因为它已经在1.2.x上测试过。您得到的错误表明您可能错误地声明了角度模块。检查这个答案