0

Estoy tratando de hacer graficas en Chartjs en conjunto con Gatsbyjs, pero cuando ejecuto mi ruta en donde se encuentra la grafica que quiero mostrar me aparece el error 'TypeError: Cannot read property 'getContext' of null' debido a esto no me puede mostrar la gráfica. Aquí dejo mi código

const jsonfile = {
  "jsonarray": [
  {
     "Anio":2016,
     "Bovino":"48,148.76",
     "Porcino":"10,153.27"
  },
  {
     "Anio":2017,
     "Bovino":"45,501.43",
     "Porcino":"10,801.30"
  },
  {
     "Anio":2018,
     "Bovino":"46,365.48",
     "Porcino":"11,010.21"
  },
  {
     "Anio":2019,
     "Bovino":"44,627.29",
     "Porcino":"10,228.82"
  }
]
};
const labels = jsonfile.jsonarray.map(function(e) {
  return e.Anio;
});
const dataBovino = jsonfile.jsonarray.map(function(e) {
  return +e.Bovino.replace(',',''); 
});
const dataPorcino = jsonfile.jsonarray.map(function(e) {
  return +e.Porcino.replace(',','');
});
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const config = {
  type: 'bar',
  data: {
     labels: labels,
     datasets: [{
        label: 'Bovino',
        data: dataBovino,
        backgroundColor: 'rgba(0, 119, 204, 0.3)'
     },
     {
        label: 'Porcino',
        data: dataPorcino,
        backgroundColor: 'rgba(230, 119, 204, 0.3)'
     }]
  } 
};

const chart = new Chart(ctx, config);
  

export default function Grafica() {
    return <div align='center'>
        <h2>Producción de leche</h2>
        <Bar
          data={{dataBovino,dataPorcino}}
          width={100}
          height={40}
          options={chart}
        />
      </div>
}

Así es la forma en como se puede mostrar una grafica de chart e gatsby, espero puedan ayudarme, desconozco mi error

Supongo que en esto se encuentra en error const ctx = canvas.getContext('2d'); en realidad no se que suceda, porque en html este codigo si funciona bien, pero yo necesito que este chart vaya con gatsby

2
  • Asegúrate que tienes un elemento <canvas> en tu html generado, porque document.querySelector('canvas') no te está retornando nada. Commented el 28 oct. 2020 a las 1:35
  • Si, lo tengo en la parte superior, pero pareciera que no lo reconoce @AlterLagos
    – Ale
    Commented el 28 oct. 2020 a las 2:42

2 respuestas 2

0

Lo que debe de estar pasando es que en el momento en que ejecutas esta línea const ctx = canvas.getContext('2d'); el elemento canvas aún no se ha procesado (no existe en el DOM), por este motivo al hacer cualquier función sobre él en este punto falla (const canvas = document.querySelector('canvas'); es nulo aunque lo pongas arriba).

La solución es hacerlo cuando el componente ya se ha procesado y los elementos ya están disponibles en el DOM.

Te recomiendo que revises el Hook de efecto useEffect para controlar esto.

Documentación aquí: https://es.reactjs.org/docs/hooks-effect.html

0

Todo lo que necesitas hacer es el documento JavaScript lo pongas al final ejemplo:

<!DOCTYPE html>
<html>
<head>
   <!--Tu codigo de la cabeza-->
</head>
<body>
   <!--Tu codigo de el body-->
<script src="./index.js"></script>
</body>
</html>

El problema no es tu script, es tu posición del src.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.