[Proyecto] grafico barra | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

En este código, se definen los datos a mostrar en el gráfico, que son la participación de mercado de cinco navegadores web. Se calcula la altura de cada barra en función del valor correspondiente y se llama a la función dibujarBarra() para dibujar cada barra. También se añaden las leyendas de los colores y el título del gráfico. La función dibujarBarra() se define para dibujar una sola barra y se utiliza dentro del bucle for para dibujar cada barra del gráfico.

var pantalla = document.querySelector("canvas"); var pincel = pantalla.getContext("2d"); pincel.fillStyle = "lightgray"; pincel.fillRect(0, 0, 600, 400);

var datos = [ {nombre: "Chrome", valor: 70, color: "blue"}, {nombre: "Firefox", valor: 20, color: "green"}, {nombre: "IE", valor: 5, color: "yellow"}, {nombre: "Safari", valor: 4, color: "red"}, {nombre: "Otros", valor: 1, color: "gray"}];

var anchoBarra = 80; var espacioEntreBarras = 50; var alturaMaxima = 300; var margenIzquierdo = 60; var margenSuperior = 50;

pincel.font = "bold 18px Arial"; pincel.fillText("Uso de navegadores", 200, 30);

for (var i = 0; i < datos.length; i++) { var nombre = datos[i].nombre; var valor = datos[i].valor; var color = datos[i].color; var x = margenIzquierdo + i(anchoBarra + espacioEntreBarras); var altura = valoralturaMaxima/100; var y = pantalla.height - margenSuperior - altura; dibujarBarra(x, y, anchoBarra, altura, color); }

pincel.font = "bold 12px Arial"; pincel.textAlign = "center"; for (var i = 0; i < datos.length; i++) { var nombre = datos[i].nombre; var x = margenIzquierdo + i*(anchoBarra + espacioEntreBarras) + anchoBarra/2; var y = pantalla.height - margenSuperior + 20; pincel.fillText(nombre, x, y); }

function dibujarBarra(x, y, ancho, altura, color) { pincel.fillStyle = color; pincel.fillRect(x, y, ancho, altura); }

Hola Karen, ¡impresionante tu código!, me gusta mucho eso de ponerlo todo en un array de objetos.

Me gustaría mostrarte una forma de postear tu código para que sea más fácil de leer.

Así se vería tu código:

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);

var datos = [  {nombre: "Chrome", valor: 70, color: "blue"},  {nombre: "Firefox", valor: 20, color: "green"},  {nombre: "IE", valor: 5, color: "yellow"},  {nombre: "Safari", valor: 4, color: "red"},  {nombre: "Otros", valor: 1, color: "gray"}];

var anchoBarra = 80;
var espacioEntreBarras = 50;
var alturaMaxima = 300;
var margenIzquierdo = 60;
var margenSuperior = 50;

pincel.font = "bold 18px Arial";
pincel.fillText("Uso de navegadores", 200, 30);

for (var i = 0; i < datos.length; i++) {
  var nombre = datos[i].nombre;
  var valor = datos[i].valor;
  var color = datos[i].color;
  var x = margenIzquierdo + i * (anchoBarra + espacioEntreBarras);
  var altura = valor * alturaMaxima / 100;
  var y = pantalla.height - margenSuperior - altura;
  dibujarBarra(x, y, anchoBarra, altura, color);
}

pincel.font = "bold 12px Arial";
pincel.textAlign = "center";
for (var i = 0; i < datos.length; i++) {
  var nombre = datos[i].nombre;
  var x = margenIzquierdo + i * (anchoBarra + espacioEntreBarras) + anchoBarra / 2;
  var y = pantalla.height - margenSuperior + 20;
  pincel.fillText(nombre, x, y);
}

function dibujarBarra(x, y, ancho, altura, color) {
  pincel.fillStyle = color;
  pincel.fillRect(x, y, ancho, altura);
}

¿Cómo puedes hacer que se vea así?, antes de pegar el código, debes hacer clic en este botón:

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

Y entonces te aparecerá algo cómo esto:

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

Debes pegar el código en medio de las comillas.