角度圖表 - 無法讀取數據

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