<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GRAFICO DE BARRAS</title>
</head>
<body>
<canvas width='700' height="500"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle= 'aquamarine'; //color de canvas
pincel.fillRect(0,0,700,500);
var serie2009 = [6, 47, 41, 3, 3];
var serie2019 = [81, 9, 3, 3, 4];
var colores = ["blue","green","yellow", "red","gray"];
var navegador = ["Chrome", "Firefox","Internet Explorer/Edge", "Safari", "Otros"]
function dibujarRectangulo(x, y, base, altura, color) {
pincel.fillStyle=color;
pincel.fillRect(x,y, base, altura);
pincel.strokeStyle="black";
pincel.strokeRect(x,y, base, altura);
}
function escribirTexto(x, y, texto) {
pincel.font="12px Georgia"; //tamaño de letra modificado
pincel.fillStyle="black";
pincel.fillText(texto, x, y);
}
function crearBarra(x,y,serie,color,titulo){
var inicioRect = 0; //indica el comienzo del siguiente rectangulo
var aumento = 3.9; // puede modificarse para aumentar o reducir la altura de los rectangulos
var i = 0; //contador
while(i<5){
escribirTexto(x+38,y-15,titulo); //el titulo se repite 5 veces y le da el estilo tipo 'negrita'
dibujarRectangulo(x,inicioRect+y,100,serie[i]*aumento,color[i]);
escribirTexto(x+100+2,inicioRect+y+10,navegador[i] + ' - ' + serie[i] + '%');
inicioRect = inicioRect + serie[i]*aumento;
i++;
}
}
crearBarra(50, 50, serie2009, colores,"2009");
crearBarra(400, 50, serie2019, colores,"2019");
</script>
</body>
</html>
