ReferenceError: el gráfico no está definido – chartjs

Question 1

¿Hay algún error con Chart.js? Cada vez que agrego alguno de los gráficos en Chart.js a mi sitio web, aparece un error, pero cuando utilicé el gráfico como programa independiente, funciona sin problemas y sin errores. Estoy usando 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>

RESUELTO: Acabo de desacoplar el script del elemento canvas (creé otro archivo para que el script ejecute su función).

HTML actualizado:

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

Nuevo archivo 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);

Question 2

También estaba recibiendo el mismo error. Para solucionar esto, moví el script del gráfico a un archivo graph.js separado.

Todavía estaba recibiendo el mismo error. Lo cual se corrige más tarde cuando coloco la etiqueta en el siguiente orden antes del final de la etiqueta como se muestra a continuación.

<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 página se ve así:

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

aquí hay un jsfiddle de trabajo de su código:
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/

Entonces, el problema definitivamente proviene de su inclusión externa de Chart.min.js

Puede encontrar un 404 en su js get. Asegúrese de estar vinculando a la carpeta js correcta. (intente acceder a su localhost/Chart.min.js para ver si puede acceder a su archivo)

Question 4

Tengo el mismo error. Para resolver el problema, debe incluir la biblioteca chart.js correctamente de la siguiente manera:

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

Question 5

1) lo intenté Chart.js descargado de Chartjs.org. Pero, no está funcionando.

2) Intenta esto.

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

Trabajando bien.

Question 6

Este error muestra que no instaló el complemento que ayuda a ejecutar la biblioteca Chart.js en la página HTML. si esa secuencia de comandos no está presente, este error muestra qué versión usó Chart.js y luego se pega esa versión de la secuencia de comandos.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Te ayudará a resolver el problema. Viene en muchas versiones como

<script src="https://cdn.jsdelivr.net/npm/chart.js/Chart.min.js"></script>

Question 7

Si ve esto de manera intermitente en Ruby on Rails 5, como yo, el problema tenía que ver con Turbolinks, que deshabilité. ¡Funciona muy bien ahora!

Question 8

Me encontré con este problema dos veces con Chartjs y resolví ambos usando setTimeout para retrasar la llamada de la función que está causando el error.

¿Ha sido útil esta solución?