ReferenceError: Diagramm ist nicht definiert - chartjs

Ist es ein bug Chart.js? Jedes mal, wenn ich, fügen Sie eine der Grafiken an Chart.js auf meiner Webseite bekomme ich eine Fehlermeldung, aber wenn ich das Diagramm als eigenständiges Programm und es läuft reibungslos ohne Fehler. Ich bin mit HTML5.

   <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 entkoppelte das Skript aus dem canvas-element (eine andere Datei für das Skript, um dessen 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);

Bitte fügen Sie einige details, wie genau Sie verknüpft ChartJS. Wo ist der <script> tag?
Danke! Dies scheint seltsam, in der Tat...
Ist "Chart.min.js" im selben Ordner wie die HTML?
Ihre JS mit dem richtigen Typ. <script type="text/javascript" src="Chart.min.js"></script> Was ist in der Konsole ausgegeben ? alle 404 auf Ihrem Chart.min.js Datei?
die type Attribut auf <script> - tags ist optional. Es sollte keine Rolle spielen.
Chart.min.js ist im selben Ordner. 404?keine.
Bitte, wenn Sie haben Ihre eigene Frage beantwortet, Beitrag eine Antwort im Gegensatz zu der Bearbeitung der Frage. (Auch kann es helfen, wenn Sie aktualisieren die Frage ein bisschen mit mehr details, wie repro-Sachen.)

InformationsquelleAutor iWantToLearn | 2015-04-22

7

hier ist ein workding von jsfiddle code:

new Chart(rice).Line(riceData);

http://jsfiddle.net/mahmalsami/jqcthmyo/

Das problem ist also definitiv kommen, die mit Ihrer externen Chart.min.js Inklusion

Sie können einen 404 auf Ihre js bekommen. Bitte stellen Sie sicher, dass Sie die Verlinkung zu den richtigen Ordner js. (versuchen Sie, auf Ihre localhost/Chart.min.js zu sehen, wenn Sie Zugriff auf Ihre Datei)
- Dank bekam ich einen Tipp, was zu tun ist.
InformationsquelleAutor SamiX

Ich war auch immer die gleichen Fehler. Um dies zu beheben, ich zog den Diagramm-Skript in separate graph.js Datei.

Immer noch war ich immer die gleichen Fehler. Das wird später behoben, wenn ich Tags in der folgenden Reihenfolge vor dem Ende von tag, 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 wie folgt Aussehen:
ReferenceError: Diagramm ist nicht definiert - chartjs

JS:

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

HTML:

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

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

Danke das funktioniert! 🙂

InformationsquelleAutor Rahul Varadkar

2

1) ich habe versucht Chart.js heruntergeladen Chartjs.org.
Aber, es funktioniert nicht.

2) Versuchen Sie, dieses.
```
<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js">
</script>
```
Arbeiten gut.
- Neue Art der Zugabe ist Sie über die CDN: <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
InformationsquelleAutor 김강욱
0

Ich habe den gleichen Fehler. Um das problem zu lösen, müssen Sie include die chart.js Bibliothek korrekt wie folgt:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
- Dies funktioniert für mich
InformationsquelleAutor Sidi M. Aourid
0

Ändern <script src='Chart.min.js'></script> zu <script src='chart.min.js'>
und ändern Sie den Namen von Chart.min.js auf den Ordner zu chart.min.js

InformationsquelleAutor chuckrutis
0

Wenn Sie sehen, wie dieser zeitweise auf Ruby on Rails 5, wie ich war, das Problem hatte damit zu tun, Turbolinks, die ich deaktiviert. Funktioniert Super jetzt!

InformationsquelleAutor legoblocks

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.