ReferenceError: Diagramm ist nicht definiert – chartjs

Question 1

Gibt es einen Fehler mit Chart.js? Jedes Mal, wenn ich eine der Grafiken in Chart.js zu meiner Website hinzufüge, erhalte ich eine Fehlermeldung, aber wenn ich die Grafik als eigenständiges Programm verwendet habe, läuft sie reibungslos und ohne Fehler. Ich verwende HTML5.

   <html>
   <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src="https://stackoverflow.com/questions/29785623/Chart.min.js"></script>
    </head>
    <body>

      <canvas id="rice" width="600" height="400"></canvas>

      <script>
        var riceData = {
        labels : ["January","February","March","April","May","June"],
        datasets :
         [
            {
              fillColor : "rgba(172,194,132,0.4)",
              strokeColor : "#ACC26D",
              pointColor : "#fff",
              pointStrokeColor : "#9DB86D",
              data : [203000,15600,99000,25100,30500,24700]
            }
         ]
        }

          var rice = document.getElementById('rice').getContext('2d');
               new Chart(rice).Line(riceData);
    </script>
    </body>
    </html>

GELÖST: Ich habe gerade das Skript vom Canvas-Element entkoppelt (eine andere Datei für das Skript erstellt, um seine Funktion auszuführen).

Aktualisierter HTML-Code:

      <html>
      <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src="https://stackoverflow.com/questions/29785623/Chart.min.js"></script>
      </head>
      <body>
      <canvas id="rice" width="600" height="400"></canvas>
      <script src="https://stackoverflow.com/questions/29785623/Chart.min.js"></script>
      <script src="rice.js"></script>
      </body>
      </html>

Neue JavaScript-Datei:

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : [203000,15600,99000,25100,30500,24700]
        }
    ]
}

var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);

Question 2

Ich bekam auch denselben Fehler. Um dies zu beheben, habe ich das Diagrammskript in eine separate graph.js-Datei verschoben.

Trotzdem bekam ich denselben Fehler. Dies wird später behoben, wenn ich das Tag wie unten gezeigt in der folgenden Reihenfolge vor dem Ende des Tags einfüge.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript" src="jscript/graph.js"></script>
</body>

Die Seite sieht so aus:

var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!DOCTYPE html>

<canvas id="myChart"></canvas>

Question 3

Hier ist eine funktionierende jsfiddle Ihres Codes:
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/

Das Problem kommt also definitiv von Ihrer externen Chart.min.js-Einbindung

Möglicherweise finden Sie einen 404 auf Ihrem js get. Bitte stellen Sie sicher, dass Sie auf den richtigen js-Ordner verlinken. (Versuchen Sie, auf Ihren localhost/Chart.min.js zuzugreifen, um zu sehen, ob Sie auf Ihre Datei zugreifen können.)

ReferenceError: Diagramm ist nicht definiert – chartjs

Menu

Verwandte Inhalte

Weitere interessante Artikel