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

[Proyecto] Gráficos de barras modificado

Es el ejercicio pero con unos datos adicionales. espero les sirva y si saben como lo puedo optimizar más, me informan. gracias

<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="black";
        pincel.fillText(texto, x, y);    
    }


    //Aquí viene el texto faltante
    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];
    var buscadores = ["Chrome", "FireFox", "Explorer", "Safari", "Otros"];

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

    function dibujarBarra(x, y, serie, colores, texto) {
        var variableY = 0;  
        for (var i = 0; i < serie.length; i++) {
            altura = serie[i];
            escribirTexto(x,y-10,texto);
            dibujarRectangulo(x,y+variableY,50,altura,colores[i]);

            variableY = variableY + parseInt(altura);
        }
        porcentaje(x,y,serie);
        porcentaje(x,y,serie);
        leyenda();

    }

    function leyenda(){

        variableX = 0;

        for (var i = 0; i < colores.length; i++) {

            dibujarRectangulo(10+variableX, 170, 20,20, colores[i]);
            escribirTexto(5+variableX,210,buscadores[i]);
            variableX = variableX + 70;

        }

    }

     function porcentaje(x, y,serie){

        variableY = 0;

        for (var i = 0; i < serie.length; i++) {
            altura = 20;
            escribirTexto(x+60, y+10+variableY, buscadores[i]+ ": " + serie[i] + "%");
            variableY =  variableY + altura;        
        }

    }
</script>
1 respuesta

Hola Angel, espero que estés bien.

Gracias por la dedicación y felicidades por el avance en tus estudios en lógica de programación, espero que nuestros cursos sean de gran aporte para tu desarrollo profesional y personal.

Para agilizar el tiempo de respuesta en caso de dudas relacionadas con los cursos, estamos priorizando el foro para postear dudas.

En caso de que desees compartir tus ejercicios o actividades, dispusimos en Discord un canal exclusivo para ese fin.

Te dejo este link que muestra donde puedes compartir tus actividades y si necesitas ayuda acerca del contenido de los cursos, aquí estaremos. :)

¡Saludos!

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