Угловые диаграммы не отображаются

Пытаюсь работать с угловыми диаграммами с помощью пакета chart.js, взятого из ссылок cdn. Angular — 1.5.7, а chart.js — 2.1.6. Я получаю следующую ошибку:

angular.js:13708 TypeError: (промежуточное значение)[type] не является функцией в createChart (angular-chart.js:197) в angular-chart.js:150 в Scope.$digest (angular.js:17286) в Scope.$apply (angular.js:17552) в bootstrapApply (angular.js:1754) в Object.invoke (angular.js:4709) в doBootstrap (angular.js:1752) в bootstrap (angular.js:1772) в angularInit (angular.js:1657) в 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]
  ];
});

Любые идеи, что не так и как это исправить? Я тоже не понимаю ошибки. Ваше здоровье :)


person Imdad    schedule 14.07.2016    source источник
comment
Какие у вас версии angular и chart.js?   -  person Ugo T.    schedule 14.07.2016
comment
@Ты получил. Angular – 1.5.7, а chart.js – 2.1.6... Мне нужно оставить угловую версию такой же. ☺   -  person Imdad    schedule 14.07.2016


Ответы (2)


Я думаю, вам не хватает атрибута chart-series.

<canvas id="bar" class="chart chart-bar"
  chart-data="data" chart-labels="labels" chart-series="series"> 
</canvas
person agriboz    schedule 14.07.2016
comment
Разве серия диаграмм не должна быть внутри тегов? - person Imdad; 14.07.2016
comment
Хотя это не решает проблему - person Imdad; 14.07.2016
comment
Взгляните на это github.com/jtblin/angular-chart.js/issues. /372 - person agriboz; 14.07.2016

Таким образом, проблема была связана с тем, что версии angular-chart.js и chart.js не были совместимы друг с другом.

В итоге я использовал последнюю версию angular-chart.js 1.0.0-alpha с chart.js 2.0.

Это решило проблему! :)

person Imdad    schedule 14.07.2016