Question

我正在尝试按照指南显示一个简单的图表： http://jtblin.github.io/angular-chart.js/

我正在使用sails.js，angular，bootstrap和angular-chart.js

当我加载应用程序时，我会得到一张图表所在的空白图片。我在chrome dev工具中看到了这个错误：

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]
];
});

Answer 1

我认为缺少的部分可能是添加这两个依赖关系：
- chart.js
- angular-chart.js

工作版本在这里：https://jsfiddle.net/cwLja39j/

仅供参考：对于jsfiddle，可以将github文件添加为＆＃34;外部资源＆＃34;首先通过rawgit.com运行它们。

标记：

<div ng-app="DashboardModule" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
</div>

JS：

angular.module("DashboardModule", ["chart.js"]).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]
  ];
});

（使用Chrome，在控制台中看不到任何错误）

Answer 2

可能是版本问题，请使用Chart.js版本：1.1.1

TypeError :(中间值）[type]不是函数

2 个答案: