Tentei fazer o gráfico mais completo e adicionei uma tabela de legenda no canto superior direito, deem uma olhada e vejam como ficou. Até a proxima pessoal :D
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function triangulo(cor,x_1,y_1,x_2,y_2,x_3,y_3){
pincel.fillStyle = cor;
pincel.beginPath();
pincel.moveTo(x_1, y_1);
pincel.lineTo(x_2, y_2);
pincel.lineTo(x_3, y_3);
pincel.fill();
}
function retangulo (cor, x_inicial, y_inicial, x_final, y_final, borda){
pincel.fillStyle = cor;
pincel.fillRect(x_inicial, y_inicial, x_final , y_final);
if(borda >=0){
pincel.fillStroke = "black"
pincel.strokeRect(x_inicial, y_inicial, x_final , y_final);
}
}
function circulo(cor, x_inicial, y_inicial, raio){
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x_inicial, y_inicial, raio, 0, 2*3.14);
pincel.fill()
}
function escrever(texto, x, y){
pincel.fonte="25px Georgia";
pincel.fillStyle="black";
pincel.fillText(texto, x, y);
}
//grafico
retangulo("white", 50, 25, 350, 350, 1)
escrever("2015", 75 , 390)
escrever("2016", 135 , 390)
retangulo("red", 75, 370, 50, 5, 1)
retangulo("yellow", 75, 350, 50, 20, 1)
retangulo("green", 75, 325, 50, 25, 1)
retangulo("blue", 75, 275, 50, 50, 1)
retangulo("red", 135, 373, 50, 2, 1)
retangulo("yellow", 135, 360, 50, 13, 1)
retangulo("green", 135, 340, 50, 20, 1)
retangulo("blue", 135, 275, 50, 65, 1)
//legenda
retangulo("white", 450, 25, 100, 100, 1)
retangulo("blue", 460, 35, 10, 10 ,1)
escrever("Chrome", 480, 45)
retangulo("green", 460, 55, 10, 10, 1)
escrever("Firefox", 480, 65)
retangulo("yellow", 460, 75, 10, 10, 1)
escrever("Safari", 480, 85)
retangulo("red", 460, 95, 10, 10, 1)
escrever("Outros", 480, 105)
</script>Ficou bem longo e n ta dos mais bonitos mas acho que consegui, rsrs.
Só agora percebi que fiz tudo manualmente quando na verdade o objetivo era automatizar a criação dessas barras, relevem esse post rsrs
