<meta charset="UTF - 8">
<canvas width="600" height="400"></canvas>
<script>
// essa função cria os retangulos que representara os dados
function retanguloPorcentagem(x, y, x1, y1, cor){
var tela = document.querySelector("canvas");//trazendo o canva para o javascript
var pincel = tela.getContext("2d");//criando um pincel
pincel.fillStyle = cor; //dando cor ao pincel
pincel.fillRect(x, y, x1, y1); //criando um retangulo
pincel.strokeStyle = "black"; //dando cor a borda
pincel.strokeRect(x, y, x1, y1); //criando uma borda
}
//criando uma função para criar uma texto com o ano dos dados
function desenhaTexto(x, y, texto){
var tela = document.querySelector("canvas");//trazendo o canva para o javascript
var pincel = tela.getContext("2d");//criando um pincel
pincel.font = '15px Georgia'; // dando uma fonte para o que sera escrito
pincel.fillStyle = "black"; //cor do que será escrito
pincel.fillText(texto, x, y); //passando as coordenadas e o texto
}
function desenhaBarra(x, y, x1, y1, cor, texto, legenda) {
var cont = 0; //crie dentro da função e antes do laço, pois se for usado novamente o valor de cont sera 4.
while(cont < 4){ //com esse laço percorro as posições dos vetores e acrescento um novo valor a y
retanguloPorcentagem(x, y, x1, y1[cont], cor[cont]);
y = y + y1[cont]; // falo onde y deve começar
cont++; //acrescentando
}
desenhaTexto(x, y+20, texto);//desenhando o texto, acrescento 20 a y para no ficar colado ao fim da coluna
}
//vetores a serem usados
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];
//chamando a função
desenhaBarra(50, 50, 50, serie2015, cores, "2015");
desenhaBarra(150, 50, 50, serie2016, cores, "2016");
</script>
