web-dev-qa-db-fra.com

ReferenceError: le graphique n'est pas défini - chartjs

Y a-t-il un problème avec Chart.js? Chaque fois que j'ajoute l'un des graphiques de Chart.js à mon site Web, un message d'erreur s'affiche, mais lorsque j'utilise le graphique en tant que programme autonome, il s'exécute correctement et sans erreur. J'utilise 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>

R&EACUTE;SOLU: Je viens de découpler le script de l'élément canvas (création d'un autre fichier pour que le script exécute sa fonction).

HTML mis à jour:

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

Nouveau fichier JavaScript:

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);
javascripthtml5html5-canvaschart.js
12
iWantToLearn

J'avais aussi la même erreur. Pour résoudre ce problème, j'ai déplacé le script de graphique dans un fichier graph.js séparé.

J'avais toujours la même erreur. Ce qui est corrigé plus tard lorsque je mets la balise dans l'ordre suivant avant la fin de la balise, comme indiqué ci-dessous.

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

La page ressemble à ceci:  enter image description here 

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>

4
Rahul Varadkar

1) J'ai essayé Chart.js téléchargé à partir du Chartjs.org. Mais cela ne fonctionne pas.

2) Essayez ceci.

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

Travailler bien.

2
김강욱

J'ai eu la même erreur. Pour résoudre le problème, vous devez inclure la bibliothèque chart.js correctement en tant que:

0
Sidi M. Aourid