Question

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

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

Answer 1

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

这是一个示例https://jsfiddle.net/pritojs/uub4tw7d/3/

的小提琴

Answer 2

您想要检查Angular-ChartJS。它为您提供了许多使用angular指令创建图表的选项。

你可以这样做：

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

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

2 个答案: