ReferenceError: Diagramm ist nicht definiert - chartjs

Gibt es einen Fehler mit Chart.js? Jedes Mal, wenn ich einer der Grafiken in Chart.js auf meiner Website hinzufüge, erhalte ich einen Fehler, aber wenn ich die Grafik als eigenständiges Programm verwende, läuft sie reibungslos und ohne Fehler. Ich benutze HTML5.ReferenceError: Diagramm ist nicht definiert - chartjs

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Rice Consumption</title> 
     <script src='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 entkoppelt nur das Skript aus dem Canvas-Element (eine andere Datei für das Skript aus seiner Funktion auszuführen).

aktualisierte HTML:

 <html> 
     <head> 
     <meta charset="utf-8" /> 
     <title>Rice Consumption</title> 
     <script src='Chart.min.js'></script> 
     </head> 
     <body> 
     <canvas id="rice" width="600" height="400"></canvas> 
     <script src='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);

Quelle

2015-04-22 iWantToLearn

Bitte fügen Sie einige Details darüber, wie genau Sie verknüpft ChartJS. Wo ist der '

1) Ich habe versucht Chart.js heruntergeladen von Chartjs.org. Aber es funktioniert nicht.

2) Versuchen Sie es.

<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"> 
</script>

Funktioniert gut.

Quelle

2016-03-18 01:47:05

Neue Art des Hinzufügens ist über das CDN: – Sharpy35

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

Noch bekam ich denselben Fehler. Was später behoben wird, wenn ich das Tag in der folgenden Reihenfolge vor dem Ende des Tags anbringe, wie unten gezeigt.

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

Quelle

2017-07-03 15:33:14

Danke, das funktioniert! :) –

Verwandte Themen