角度チャート - データを読み取ることができません

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

あなたは間違ったライブラリをインポートしています。

https://github.com/chinmaymk/angular-chartsにあるangular-chartsをインポートしました。あなたはchart.js依存関係を含めたとき、あなたは最初に正しかったhttp://jtblin.github.io/angular-chart.js/

に位置angular-chartの一部であるディレクティブを使用している

しかし、あなただけの間違ったライブラリを持っています。ここで

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

はあなたのコードの作業バージョンです：https://plnkr.co/edit/tUsMwgOBcFJrV1xTMcF0?p=preview