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>

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


javascript chart.js angularjs angular-chart
person Belal Mostafa Amin    schedule 10.05.2016    source источник
comment
Какой браузер вы используете. Используете ли вы какие-либо инструменты разработки, что-нибудь в консоли?   -  person Syed Ekram Uddin    schedule 10.05.2016
comment
Я использую google chrome, я пробовал все возможные разметки, много раз проверял мой app.js, в консоли вообще ничего, ни предупреждений, ни ошибок, ничего.   -  person Belal Mostafa Amin    schedule 10.05.2016

Ответы (4)


arrow_upward
3
arrow_downward

Похоже, angular-chart.js не поддерживает версию 2 Chart.js. Ниже приведен фрагмент, который показывает рабочую диаграмму. Он включает версию 1.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>

person Dustin Hodges    schedule 10.05.2016
comment
Чувак, ты герой :D Это РАБОТАЛО :D Я хочу дать тебе 100 запусков, прошло около 3 часов, и я не понимаю, что делать :D спасибо миллион человек действительно большое спасибо - person Belal Mostafa Amin; 10.05.2016
comment
Рад помочь :) Раньше я использовал angular-chart.js, и он мне очень нравится. Надеюсь, он будет обновлен для поддержки v2 chart.js. - person Dustin Hodges; 10.05.2016
comment
Кроме того, если вы найдете ответ полезным, проголосуйте за него, нажав стрелку вверх слева от ответа. Чтобы принять ответ, нажмите на галочку. - person Dustin Hodges; 10.05.2016
comment
он говорит мне, что как только я заработаю 15 репутации, только тогда я смогу проголосовать, обещаю, что сделаю;), вы рекомендуете использовать нативный chat.js? Я не знаю, на каком основании я должен решить, использовать ли какой-либо из них вместо другого? - person Belal Mostafa Amin; 10.05.2016
comment
Это действительно зависит от вашего приложения. Если вы используете angular, вам, вероятно, потребуется найти библиотеку, которая будет предлагать привязки к собственной библиотеке построения диаграмм js (например, angular-chart.js). Если вы используете только angular, поэтому вы можете использовать библиотеку angular-chart.js, вероятно, было бы лучше просто использовать собственные библиотеки. Существует ряд библиотек angular, которые позволяют вам взаимодействовать с различными библиотеками построения диаграмм, хотя я использовал только angular-chart.js. - person Dustin Hodges; 10.05.2016
comment
Получил 404 для raw.githubusercontent.com /jtblin/angular-chart.js/master/dist/ .... - person MobileEvangelist; 24.10.2016
comment
Странно, нигде не могу найти этот файл. Если найду, обновлю ответ - person Dustin Hodges; 24.10.2016

arrow_upward
0
arrow_downward

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

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

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

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

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

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
person yBrodsky    schedule 10.05.2016
comment
когда я сделал то, что вы посоветовали, я обнаружил эту ошибку в консоли: 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 (анонимная функция) @ - person Belal Mostafa Amin; 10.05.2016
comment
и все равно ничего не отображается - person Belal Mostafa Amin; 10.05.2016

arrow_upward
0
arrow_downward

В html data="chart-data" будет chart-data="data"

person Syed Ekram Uddin    schedule 10.05.2016
comment
Сделано, но все равно ничего, на самом деле появилась ошибка :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 - person Belal Mostafa Amin; 10.05.2016
comment
можете привести полностью рабочий пример включая необходимые скрипты в шапку чтобы попробовать, почему-то мне кажется что то не так не с кодом а с включенным angular.js, и остальными скриптами, т.к. не нахожу проблему в моей разметке или в моем приложении, js - person Belal Mostafa Amin; 10.05.2016

arrow_upward
0
arrow_downward

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

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

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

Проверьте эту скрипту.

person optimus    schedule 10.05.2016