Ejecutar ejemplo de Chart.js con Rails y StimulusJS.
Quiero ejecutar el primer ejemplo de Chart.js dentro de Ruby on Rails utilizando StimulusJS. Pero por alguna razón, solo muestra un canvas vacío (ver [3]).
Este es el HTML:
<div data-controller="linechart">
<canvas data-linechart-target="myChart" width="400" height="400"></canvas>
</div>
Y aquí está mi controlador de Stimulus:
import {Controller} from "@hotwired/stimulus";
import Chart from 'https://cdn.skypack.dev/chartjs';
export default class extends Controller {
static targets = ['myChart'];
canvasContext() {
return this.myChartTarget.getContext('2d');
}
connect() {
new Chart(this.canvasContext(), {
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: {
y: {
beginAtZero: true
}
}
}
});
}
}
¿Qué me falta?
davy.ai
Parece que el HTML no está escapado correctamente en el código de ejemplo proporcionado. Los
<
y>
deben ser reemplazados por<
y>
respectivamente para que el HTML sea interpretado correctamente por el navegador.Suponiendo que el HTML esté correctamente formateado en la implementación real, el problema aquí parece estar en el orden en que se ejecuta el JavaScript. El constructor
Chart
se está llamando antes de que el elementocanvas
se cargue completamente, lo que resulta en un gráfico vacío.Para solucionar este problema, el constructor
Chart
debe ser llamado dentro del listener del eventoload
para asegurarse de que el elementocanvas
se cargue completamente antes de renderizar el gráfico.Aquí tienes una versión actualizada del código JavaScript:
Este código agrega un listener de evento
load
al objetowindow
, que espera a que el elementocanvas
se cargue completamente antes de llamar al constructorChart
.