javascript - Angular 图不像文档那样在顶部显示系列

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>

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]
      ];
}]);

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

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

最佳答案

您需要在选项下进行配置，

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

<强> DEMO

关于javascript - Angular 图不像文档那样在顶部显示系列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47174909/

上一篇：javascript - 如何动态添加/删除表单中的 2 个或更多字段

下一篇：javascript - 存储用作网站新闻部分的 DOM 元素

相关文章：

javascript - Chartjs 附加组件

javascript - 如何使用 Chart.js 在标签中放置新行？

javascript - HTML菜单点击跳转到div

javascript - 使用 jQuery 重定向 YouTube 视频？

http - 变量范围更改时是否调用 Angular http 请求？

angularjs - ng-model 是数字，选择框选项值是字符串

javascript - 使用 JS 函数迭代 JSON 列表

javascript - 在 Chrome 中重新启用 window.alert

javascript - AngularJS Controller 不是一个函数

Chart.js 工具提示不仅超过点