Question

angular-chart.js的条形图示例为here。从这里开始，我使用js和markup代码进行了一些修改。

HTML

<body ng-app="app">
    <div class="row">
        <div class="col-md-6">
            <div ng-controller="BarCtrl">
                <canvas id="bar" class="chart chart-bar"
                  chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" >
                </canvas>
            </div>
        </div>
    </div>

JS

var app = angular.module('app', ['chart.js']);
app.controller('BarCtrl', ['$scope', function($scope){
      $scope.labels = ['PDM', 'R&D', 'SN', 'MB'];
      $scope.series = ['Late', 'NoLate'];

      $scope.data = [
        [10,2,1,2],
        [5,3,2,4]
      ];
}]);

了解更多支票https://plnkr.co/edit/jIqY72Lg4YvkMNbmawyC?p=preview

但问题是我的代码没有像标记选项那样显示。

我做错了什么或我需要做什么更新？

Answer 1

您需要在选项

下配置

$scope.options = {
    legend: {
      display: true,
      position: 'top'
    }
  };

<强> DEMO

角度图表不会像文档一样显示顶部的系列

1 个答案: