角度图表 - 无法读取数据

Question

第一次使用chart.js，我有一个图表问题，无法读取模型中的数据。

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

不知道是什么问题，无论是我使用错误的依赖关系（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

要导入错误的库。

你有进口angular-charts位于https://github.com/chinmaymk/angular-charts。

但是，你正在使用的是位于angular-chart一部分在http://jtblin.github.io/angular-chart.js/

你是正确的，首先当你包括chart.js依赖指令，你只是有错误的库。

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

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