<meta charset="utf-8">
<canvas width="600" height="600"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaRetangulo(x,y,largura,altura,cor){
pincel.fillStyle = cor;
pincel.strokeRect(x,y,largura,altura);
pincel.fillRect(x,y,largura,altura);
}
function desenhaTexto(x,y,texto){
pincel.font = '20px Georgia';
pincel.fillStyle = 'black';
pincel.fillText(texto,x,y);
}
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];
var legenda = ['Chrome','Firefox','Safari','Outros (Opera,IE,Etc)'];
var cores = ['blue','green','yellow','red'];
function desenhaBarra(x,y,serie,cor,texto){
var somaAltura = 0;
desenhaTexto(x,y - 15,texto);
for(var i = 0; i < serie.length; i++){
var altura = serie[i] *2;
desenhaRetangulo(x,y + somaAltura,50,altura,cores[i]);
somaAltura = somaAltura + altura;
}
}
function desenhaLegenda(){
var altura = 0
for(var i = 0; i < cores.length; i++){
desenhaTexto(380,50 + altura,legenda[i]);
desenhaRetangulo(320,20 + altura,50,50,cores[i]);
altura = altura + 60;
}
}
function desenhaIndice(x,serie){
var somaAltura = 0;
for(var i = 0; i < serie.length; i++){
var altura = serie[i] * 2;
desenhaTexto(x,60 + somaAltura,serie[i] + "%");
somaAltura = somaAltura + altura;
}
}
desenhaBarra(60,50,serie2015,cores,'2015');
desenhaBarra(220,50,serie2016,cores,'2016');
desenhaLegenda();
desenhaIndice(19,serie2015);
desenhaIndice(179,serie2016);
</script>