Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Grafico de barras

Esta dificil :-{

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>

    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

    function escribirTexto(x , y, texto) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.font="15px Georgia";
        pincel.fillStyle="red";
        pincel.fillText(texto, x, y);    
    }

    function dibujarBarra(x, y, serie, colores, texto) {

        escribirTexto(x + 10, y - 10, texto);

        var sumaAltura = 0;
        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
            sumaAltura = sumaAltura + altura;
        }
    }

    var colores = ["blue","green","yellow", "red","gray"];
    var serie2009 = [6,47,41,3,3];
    var serie2019 = [81,9,3,3,4];

    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");

</script>
1 respuesta

¡Hola Richard!

Entiendo que estás teniendo dificultades con el código que compartiste. Este código es para dibujar un gráfico de barras en un canvas HTML5 utilizando JavaScript. El gráfico muestra la comparación de dos series de datos, una para el año 2009 y otra para el año 2019.

El código utiliza dos funciones principales: "dibujarRectangulo" y "escribirTexto", que se utilizan para dibujar los rectángulos y escribir el texto en el canvas, respectivamente. Luego, utiliza la función "dibujarBarra" para dibujar las barras del gráfico.

Para cada serie de datos, se especifica un conjunto de alturas y colores de barras en los arrays "serie2009" y "serie2019", y se llama a la función "dibujarBarra" para dibujar las barras correspondientes.

Si tienes alguna pregunta específica sobre el código o necesitas ayuda para hacer algún cambio, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)