Question

我使用这个库在我的AngularJS应用程序中显示图表，它工作正常：

AngularJS charts

我唯一无法做到的就是展示传奇。有谁知道怎么做？

Answer 1

在选项

中使用 legend: {display: true}

<强>样本

＆＃13;

angular.module("app", ["chart.js"])
  .controller("BarCtrl", function($scope) {
    $scope.options = {legend: {display: true}};
    $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"
      ]
    }];
  });

＆＃13;

<!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"   chart-options="options"></canvas>
  </div>
</body>
</html>

＆＃13;

AngularJS图表 - 显示传奇

1 个答案: