Angular-Chart.js не отображает график

Я пытаюсь использовать Angular-chart.js, он ничего не отображает для меня, вот моя страница JavaScript и HTML

(function(){
 angular.module("app", ["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]
    ];
 });
})(); 
    
<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js
    "></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="angular-chart.min.js
    "></script>
    <script src="app.js"></script>
</head>

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

</body>

</html>

Я не понимаю, где ошибка, спасибо заранее за вашу помощь

 Syed Ekram Uddin Emon10 мая 2016 г., 17:52
Какой браузер вы используете. Используете ли вы какие-либо инструменты Dev, что-нибудь в консоли?
 Belal Mostafa Amin10 мая 2016 г., 17:55
Я использую Google Chrome, я перепробовал каждую возможную разметку, много раз проверял свой app.js, вообще ничего в консоли, ни предупреждений, ни ошибок, ничего.

Ответы на вопрос(4)

Решение Вопроса

Похоже, angular-chart.js не поддерживает версию 2 Chart.js. Ниже приведен фрагмент, который показывает рабочий график. Включает в себя v1.1.1 chart.js

angular.module("app", ["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]
  ];
});
<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="app.js"></script>
</head>

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

</html>

 Dustin Hodges24 окт. 2016 г., 16:21
Странно, я нигде не могу найти этот файл. Если найду, обновлю ответ
 Dustin Hodges10 мая 2016 г., 18:57
Рад помочь :) Я раньше использовал angular-chart.js и мне это очень нравится. Надеюсь, он будет обновлен для поддержки v2 файла chart.js.
 MobileEvangelist24 окт. 2016 г., 12:12
 Dustin Hodges10 мая 2016 г., 19:15
Это действительно зависит от вашего приложения. Если вы используете angular, вам, вероятно, потребуется найти библиотеку, которая будет предлагать привязки к нативной библиотеке диаграмм js (например, angular-chart.js). Если вы используете только angular, поэтому вы можете использовать библиотеку angular-chart.js, вероятно, было бы лучше просто использовать нативные библиотеки. Существует ряд библиотек углов, которые позволяют вам взаимодействовать с разными библиотеками диаграмм, хотя я использовал только angular-chart.js
 Belal Mostafa Amin10 мая 2016 г., 19:10
он говорит мне, как только я заработаю 15 репутации, только тогда я смогу поднять голос, обещаю, что буду;), вы рекомендуете использовать native chat.js? Я не знаю, на каких основаниях я должен решить, использовать ли одну из них поверх другой?
 Belal Mostafa Amin10 мая 2016 г., 18:55
Человек, ты герой: D Это сработало: D Я хочу дать вам 100 стартов, прошло около 3 часов, и я не понимаю, что делать: D спасибо миллион человек действительно большое спасибо
 Dustin Hodges10 мая 2016 г., 19:00
Кроме того, если вы найдете ответ полезным, проголосуйте за него, нажав на стрелку вверх слева от ответа. Чтобы принять ответ, нажмите на галочку.

Я получаю эту ошибку при попытке вашего кода:

(intermediate value)[e] is not a function angular chart

Кажется, есть несоответствие версий, попробовал то же самое с моим собственным проектом, получил ту же ошибку. Пожалуйста, возьмите V1.1.1 изChart.js, как уже ответил @dustin.

Проверь этоиграть на скрипке.

В html data = "данные-диаграммы" будут данные-диаграммы = "данные"

 Belal Mostafa Amin10 мая 2016 г., 18:11
Готово, но все равно ничего, на самом деле возникла ошибка: TypeError: (промежуточное значение) [e] не является функцией в d (angular-chart.min.js: 1) в Object.fn (angular-chart. min.js: 1) в r. $ digest (angular.js: 15896) в r. $ apply (angular.js: 16160) в angular.js: 1679 в Object.e [как вызов] (angular.js: 4523 ) при c (angular.js: 1677) при yc (angular.js: 1697) при Zd (angular.js: 1591) при angular.js: 29013
 Belal Mostafa Amin10 мая 2016 г., 18:15
Можете ли вы дать мне полностью рабочий пример, включающий необходимые сценарии в голове, чтобы попробовать его, по некоторым причинам, я думаю, что-то не так, не с кодом, а с включенным angular.js и другими сценариями, потому что я могу не найти проблему в моей разметке или в приложении, JS

Ваша привязка данных неверна

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

В вашем контроллере нет переменных данных диаграммы или меток диаграммы. Вы назвали их по-другому.

На самом деле, атрибуты в обратном порядке. Должны быть диаграммы-данные = "данные" диаграммы-метки = "метки"

Пример изhttp://jtblin.github.io/angular-chart.js/

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
 Belal Mostafa Amin10 мая 2016 г., 18:08
когда я сделал то, что вы посоветовали, я обнаружил эту ошибку на консоли: TypeError: (промежуточное значение) [e] не является функцией в d (angular-chart.min.js: 1) в Object.fn (angular-chart. min.js: 1) в r. $ digest (angular.js: 15896) в r. $ apply (angular.js: 16160) в angular.js: 1679 в Object.e [как вызов] (angular.js: 4523 ) в c (angular.js: 1677) в yc (angular.js: 1697) в Zd (angular.js: 1591) в angular.js: 29013 (анонимная функция) @
 Belal Mostafa Amin10 мая 2016 г., 18:10
и до сих пор ничего не отображается

Ваш ответ на вопрос