Angolare chart.js mostrando l’errore grafico non è definito

sono un nuovo angolare js. Quando provo a fare il codice di seguito. Esso mostra alcuni errori nella console. ReferenceError: Grafico non è definito .Io non sono in grado di capire gli errori. Così qualcuno per favore mi aiuti. E se la domanda non è corretta , si prega di correggere la domanda

Mio codice 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>

mio 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);
}]);
Ti manca il ng-app=”app” direttiva in html, anche il controller non è impostato nel codice html. Aggiungere ng-app=”app” nel corpo, e avvolgere la tela ” tag div con ng-controller=”LineCtrl” direttiva su di esso.
grazie.l’ho fatto .ma ancora non funziona @Anfelipe. che cosa è che chart.js file nella angolare.modulo(“app”,[“chart.js”])
che ‘chart.js’ non è un file, il nome del modulo che si sta iniettando.
grazie. Ma non il suo lavoro.

OriginaleL’autore Thameem | 2015-10-21

5 risposte

  1. 4

    Ho messo le correzioni che ho citato nei commenti, ng-app e ng-direttive sono mancanti.

    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);
    }]);

    Ho fatto un jsbin.

    grazie mille..ha funzionato. In realtà ho perso un file di script “angular-chart.js”..
    potete vedere la mia domanda forse si dovrebbe avere un’idea stackoverflow.com/questions/37256487/…

    OriginaleL’autore

  2. 12

    È necessario aggiungere un riferimento di chart.js biblioteca di rendere il grafico di lavoro. Come angular-chart.js utilizza internamente Chart oggetto di chart.js biblioteca.

    thaks. Ora ho capito.
    Felice di aiutarvi.. Grazie 🙂
    Ok, mi sono bloccato su questo problema, e sono sicuro che mi manca qualcosa, se si aggiunge il pacchetto via NPM gestore di pacchetti, perché avrei dovuto includere chart.js il pacchetto non include già come una dipendenza? Non pensate che sarebbe includere per la facilità d’uso?!

    OriginaleL’autore

  3. 1

    Che potrebbe essere una questione di ordine del chart.min.js e angular-chart.min.js i file.Infatti angular-chart.min.js esigenze chart.min.js di dipendenza. angular-chart.min.js controlli per chart.min.js e questo genera errori se chart.min.js è posto dopo.

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

    OriginaleL’autore

  4. 0

    Ho avuto un problema simile (stesso errore), dopo aver seguito Angolare del Grafico di una documentazione ufficiale (http://jtblin.github.io/angular-chart.js/). Nel mio caso, l’unica cosa che manca (e non è detto c’è il riferimento a “Grafico,js” in “index.html”.

    <script src="bower_components/Chart.js/Chart.min.js"></script>

    OriginaleL’autore

  5. 0

    Questo ha funzionato per me:

    <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>

    OriginaleL’autore

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *