2016-07-14 224 views
1

嘗試使用從cdn鏈接取得的chart.js束角度圖表來處理角度圖表。 Angular是1.5.7,chart.js是2.1.6。 我得到以下錯誤:不顯示角度圖表

angular.js:13708 TypeError: (intermediate value)[type] is not a function at createChart (angular-chart.js:197) at angular-chart.js:150 at Scope.$digest (angular.js:17286) at Scope.$apply (angular.js:17552) at bootstrapApply (angular.js:1754) at Object.invoke (angular.js:4709) at doBootstrap (angular.js:1752) at bootstrap (angular.js:1772) at angularInit (angular.js:1657) at angular.js:31468

HTML代碼:

  <!DOCTYPE html> 
<html> 
    <head> 
     <script src="scripts/angular/angular.js"></script> 
     <script src="scripts/Chart.js"></script> 
     <script src="scripts/angular/angular-chart.js"></script> 

     <link rel="stylesheet" type="text/css" href="css/angular/angular-chart.css"/> 

     <title>Practice</title> 
    </head> 

    <body ng-app="appName" ng-controller="indexController"> 

     <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas> 

    </body> 
    <script type="text/javascript" src="scripts/app.js"></script> 
</html> 

JavaScript文件:

var appOne = angular.module('appName', ['chart.js']); 


appOne.controller("indexController", 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] 
    ]; 
}); 

任何想法是錯誤的,如何解決呢?我也不明白這個錯誤。歡呼:)

+0

什麼是你的angular和chart.js版本? –

+0

@UgoT。 Angular是1.5.7,chart.js是2.1.6 ...我需要保持角度版本相同。 ☺ – Imdad

回答

0

所以問題是由於angular-chart.js和chart.js版本不兼容。

我最終使用了chart.js 2.0的最新angular-chart.js 1.0.0-alpha版本。

解決了這個問題! :)

1

我想你是缺少chart-series屬性。

<canvas id="bar" class="chart chart-bar" 
    chart-data="data" chart-labels="labels" chart-series="series"> 
</canvas 
+0

不應將圖表系列標籤內? – Imdad

+0

雖然沒有解決問題 – Imdad

+0

您是否有正確的依賴關係? – agriboz