ここのガイドに従って簡単なチャートを表示しようとしています: http://jtblin.github.io/angular-chart.js/
私はsails.js、angular、bootstrap、angular-chart.jsを使用しています
アプリをロードすると、グラフがあるはずの場所に空白の画像が表示されます。Chrome 開発ツールで次のエラーが表示されます。
TypeError: (intermediate value)[type] is not a function
at createChart (angular-chart.js:175)
at Object.fn (angular-chart.js:118)
at Scope.$get.Scope.$digest (angular.js:14308)
at Scope.$get.Scope.$apply (angular.js:14571)
at bootstrapApply (angular.js:1455)
at Object.invoke (angular.js:4203)
at doBootstrap (angular.js:1453)
at bootstrap (angular.js:1473)
at angularInit (angular.js:1367)
at angular.js:26304
申し訳ありませんが、エラーが発生する理由がわかりません。
以下のコードの無限のバリエーションを試しましたが、このバージョンが実際のサンプルに最も近いと感じています。
意見：
<head>
<link rel="stylesheet" href="/styles/angular-chart.css">
</head>
<body ng-app="DashboardModule" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.js"></script>
<script src="/js/dependencies/Chart.Core.js"></script>
<script src="/js/dependencies/angular-chart.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
</body>
モジュール:
angular.module('DashboardModule', ['chart.js']);
コントローラ：
angular.module('DashboardModule').controller("BarCtrl", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});