Question

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

之前我的错误为Error: $injector:modulerr Module Failed to instantiate module chart.js。通过将依赖关系从chart.js更改为angularCharts来解决此问题，尽管多数（接近全部）使用chart.js。我已经编写了所需的控制器和poperties / values，但图表不会读取数据。

不确定问题是什么，是否使用了错误的依赖关系（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-charts。

但是，您正在使用位于http://jtblin.github.io/angular-chart.js/

的angular-chart一部分的指令

当你包含chart.js依赖项时，你最初是正确的，你只是有错误的库。

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

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

角度图表 - 无法读取数据

1 个答案: