Angular chart.js, показывающий диаграмму ошибок, не определен

я новичок в угловых js. Когда я пытаюсь сделать приведенный ниже код. Он показывает некоторые ошибки в консоли. ReferenceError: Диаграмма не определена. Я не могу понять ошибки. Так что кто-нибудь, пожалуйста, помогите мне. А если вопрос не корректный, поправьте пожалуйста вопрос

Мой HTML-код:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>school</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link rel="stylesheet" href="fonts/text-font/css/font_icon.css" type="text/css"/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <!-- angular -->
        <script type="text/javascript" src="js/angular/angular.min.js"></script>
        <!-- angular chart -->
        <link rel="stylesheet" href="js/angular/angular-chart.css" type="text/css"/>
        <script type="text/javascript" src="js/angular/angular-chart.min.js"></script><br />
        <script type="text/javascript" src="js/angular/angular.js"></script>

        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body ng-app="app">
        <div ng-controller="LineCtrl">
                <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
                chart-legend="true" chart-series="series" chart-click="onClick"></canvas> 

            </div>
    </body >
</html>

мой angular.js:

angular.module("app", ["chart.js"]) 
  // Optional configuration
  .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      colours: ['#FF5252', '#FF8A80'],
      responsive: false
    });
    // Configure all line charts
    ChartJsProvider.setOptions('Line', {
      datasetFill: false
    });
  }])
  .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  // Simulate async data update
  $timeout(function () {
    $scope.data = [
      [28, 48, 40, 19, 86, 27, 90],
      [65, 59, 80, 81, 56, 55, 40]
    ];
  }, 3000);
}]);

charts angularjs angular-chart
person Thameem    schedule 21.10.2015    source источник
comment
Вам не хватает директивы ng-app=app в html, а также контроллер не установлен в html. Добавьте ng-app=app в тело и оберните тег canvas в div с директивой ng-controller=LineCtrl.   -  person Anfelipe    schedule 21.10.2015
comment
спасибо. я сделал это. но все равно это не работает @Anfelipe. что это за файл chart.js в angular.module(app,[chart.js])   -  person Thameem    schedule 21.10.2015
comment
что «chart.js» - это не файл, это имя модуля, который вы вводите.   -  person Anfelipe    schedule 21.10.2015
comment
@Анфелипе спасибо. Но это не работает.   -  person Thameem    schedule 21.10.2015

Ответы (5)


arrow_upward
4
arrow_downward

Я внес исправления, о которых я упоминал в комментариях, ng-app и ng-directives отсутствуют.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>school</title>
        <link rel="stylesheet" href=
  "http://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css" type=
  "text/css" />
  <script src="http://cdn.rawgit.com/nnnick/Chart.js/master/Chart.min.js" type=
  "text/javascript">
</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"
  type="text/javascript">
</script>
  <script src=
  "http://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.js"
  type="text/javascript">
</script>

        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body ng-app="app">
      <div ng-controller="LineCtrl">
        <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
                    chart-legend="true" chart-series="series" chart-click="onClick"></canvas> 
        </div>
    </body>
</html>

script.js

angular.module("app", ["chart.js"]) // here i couldn't understand about chart.js fil
  // Optional configuration
  .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      colours: ['#FF5252', '#FF8A80'],
      responsive: false
    });
    // Configure all line charts
    ChartJsProvider.setOptions('Line', {
      datasetFill: false
    });
  }])
  .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  // Simulate async data update
  $timeout(function () {
    $scope.data = [
      [28, 48, 40, 19, 86, 27, 90],
      [65, 59, 80, 81, 56, 55, 40]
    ];
  }, 3000);
}]);

Я сделал для него jsbin.

person Anfelipe    schedule 21.10.2015
comment
не могли бы вы увидеть мой вопрос, может быть, у вас есть идея stackoverflow.com/questions/37256487/ - person Abderrahim; 17.05.2016

arrow_upward
12
arrow_downward

Вам нужно добавить ссылку на библиотеку chart.js, чтобы ваша диаграмма работала. Поскольку angular-chart.js внутренне использует Chart объект библиотеки chart.js.

person Pankaj Parkar    schedule 21.10.2015
comment
@Thameem Рад помочь вам .. Спасибо :) - person Pankaj Parkar; 10.12.2015
comment
Хорошо, я тоже застрял в этой проблеме, и я уверен, что что-то упустил, если вы добавите пакет через диспетчер пакетов NPM, зачем мне включать chart.js, пакет еще не включает его как зависимость? Разве вы не думаете, что он будет включать его для простоты использования?! - person TGarrett; 25.05.2016

arrow_upward
1
arrow_downward

Это может быть вопрос порядка файлов chart.min.js и angular-chart.min.js. На самом деле angular-chart.min.js нужна chart.min.js зависимость. angular-chart.min.js проверяет наличие chart.min.js, и это приводит к ошибкам, если chart.min.js ставится после.

<script src="/lib/chart.js/dist/Chart.min.js"></script>
<script src="/lib/angular-chart.js/dist/angular-chart.min.js"></script>
person edkeveked    schedule 07.07.2016

arrow_upward
0
arrow_downward

У меня была аналогичная проблема (та же ошибка) после использования официальной документации Angular Chart (http://jtblin.github.io/angular-chart.js/). В моем случае единственное, что отсутствовало (и не упоминалось там), это ссылка на "Chart,js" в "index.html".

<script src="bower_components/Chart.js/Chart.min.js"></script>
person Fernando Ghisi    schedule 09.06.2016

arrow_upward
0
arrow_downward

Это сработало для меня:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<script src="http://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
person Oscar2av    schedule 18.07.2017