es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Ejecutar ejemplo de Chart.js con Rails y StimulusJS.

27 Jul, 2023 Programación

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?

Captura de pantalla de canvas vacío

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 elemento canvas 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 evento load para asegurarse de que el elemento canvas se cargue completamente antes de renderizar el gráfico.

    Aquí tienes una versión actualizada del código JavaScript:

    import { Controller } from "@hotwired/stimulus"
import Chart from 'https://cdn.skypack.dev/chart.js';

export default class extends Controller {
  static targets = ['myChart'];

  canvasContext() {
    return this.myChartTarget.getContext('2d');
  }

  connect() {
    window.addEventListener('load', () => {
      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
            }
          }
        }
      });
    })
  }
}

    Este código agrega un listener de evento load al objeto window, que espera a que el elemento canvas se cargue completamente antes de llamar al constructor Chart.

Comments are closed.