如何在 AngularJS 中使用进度条创建条形图？答案

【问题标题】：How to create bar chart using progress bar in AngularJS?如何在 AngularJS 中使用进度条创建条形图？
【发布时间】：2016-10-05 21:48:53
【问题描述】：

我是 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
    }
  ]
}

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

【问题讨论】：

angularjs与图表无关，可以考虑使用c3.js、highcharts等第三方工具。
如果我使用 html 使用角度函数的值创建进度条图。那么呢？
那只会花费你很多精力，你需要编写很多不必要的javascript代码和css

标签： angularjs

【解决方案1】：

如果你只想要进度条，你可以使用ui-bootstrap progressbar

这里有一个例子https://jsfiddle.net/pritojs/uub4tw7d/3/

【讨论】：

【解决方案2】：

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

你可以这样做：

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>

检查这个plunker

【讨论】：

如果我使用 html 使用角度函数的值创建进度条图。那么呢？
@KalaiyarasiM，我更新了答案。检查 plunker，看看它是否接近你想要实现的目标。
我得到的是 angularjs 1.2.20 版本，在上面它使用的是 angular 1.4。所以我在提到 ["chart.js"] 时遇到了错误。
" 错误：[ng:areq] 参数 'BarController' 不是函数，未定义"
@KalaiyarasiM，我不确定 angularjs 版本是否会成为 Angular-ChartJS 的问题，因为它已经在 1.2.x 上进行了测试。您收到的错误表明您可能错误地声明了您的角度模块。检查这个stackoverflow答案stackoverflow.com/a/25895387/4092170