javascript - Angular 图表 - 无法读取数据

Question

第一次使用chart.js，我遇到了图表无法从模型读取数据的问题。

之前我遇到了错误错误:$injector:modulerr Module Failed to instantiate module Chart.js。通过将依赖项从 chart.js 更改为 angularCharts 解决了这个问题，尽管大多数(几乎全部)都使用 chart.js。我已经编写了所需的 Controller 和属性/值，但图表不会读取数据。

不确定问题是什么，是我使用了错误的依赖项 (angularCharts) 还是 $scope 的问题。有什么想法吗？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js"></script>

<div class="col-md-6 text-xs-center" ng-controller="LineCtrl">
    <h2>Cost Analysis</h2>
    <canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
    chart-series="series" chart-click="onClick"></canvas> 
</div>

<小时/>

var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', 'angularCharts']);

app.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  // Simulate async data update
  $timeout(function () {
    $scope.data = [
      [28, 48, 40, 19, 86, 27, 90],
      [65, 59, 80, 81, 56, 55, 40]
    ];
  }, 3000);

}])

Answer 1

您导入了错误的库。

您已导入位于https://github.com/chinmaymk/angular-charts的 Angular 图表 .

但是，您使用的指令是位于 http://jtblin.github.io/angular-chart.js/ 的 angular-chart 的一部分。

当您包含 chart.js 依赖项时，您一开始是正确的，只是使用了错误的库。

angular.module('myModule', ['chart.js']);

这是代码的工作版本:https://plnkr.co/edit/tUsMwgOBcFJrV1xTMcF0?p=preview