<meta charset="UTF-8">
<body>
<canvas width="600" height="400"></canvas>
<script>
/* ============================ FUNÇÕES ============================ */
function criarVetor(porcentagem, cor, ano){
if (ano == 2015){
armazena2015.push(porcentagem,cor);
} else {
armazena2016.push(porcentagem,cor);
}
}
function calculaAltura(armazena, ano){
if (ano == 2015){
for(let i=0; i<armazena.length; i++){
let calcAlturaNav = (altTotalGrafA * armazena[i])/100;
armazena[i] = calcAlturaNav;
i++;
}
} else {
for(let i=0; i<armazena.length; i++){
let calcAlturaNav = (altTotalGrafB * armazena[i])/100;
armazena[i] = calcAlturaNav;
i++;
}
}
return armazena;
}
function gerarGrafico(armazena, ano){
if (ano == 2015){
calculaAltura(armazena, ano);
let posYgrafA
for (let j=0; j<armazena.length; j++){
posYgrafA = alturaTela - armazenaValores - armazena[j];
armazenaValores = armazenaValores+armazena[j];
pincel.fillStyle = armazena[j+1];
pincel.fillRect(posXgrafA, posYgrafA, largGrafA, armazena[j]);
pincel.strokeStyle="black";
pincel.strokeRect(posXgrafA, posYgrafA, largGrafA, armazena[j])
j++;
}
desenhaTexto("2015",posXgrafA,posYgrafA-20,ano )
}
if (ano == 2016){
calculaAltura(armazena, ano);
armazenaValores = 0;
let posYgrafB
for (let k=0; k<armazena.length; k++){
posYgrafB = alturaTela - armazenaValores - armazena[k];
armazenaValores = armazenaValores+armazena[k];
pincel.fillStyle = armazena[k+1];
pincel.fillRect(posXgrafB, posYgrafB, largGrafB, armazena[k]);
pincel.strokeStyle="black";
pincel.strokeRect(posXgrafB, posYgrafB, largGrafB, armazena[k])
k++;
}
desenhaTexto("2016",posXgrafB,posYgrafB-20,ano )
}
}
function desenhaTexto(texto, x , y, ano) {
pincel.font='20px Georgia';
pincel.fillStyle='white';
pincel.fillText(texto, x, y);
}
/* == VARIÁVEIS === */
let armazena2015 = [];
let armazena2016 = [];
let alturaTela = 400;
let armazenaValores = 0;
let ano;
// Gráfico A
const posXgrafA = 150;
const largGrafA = 100;
let altTotalGrafA = 300;
// Gráfico B
const posXgrafB = 350;
const largGrafB = 100;
let altTotalGrafB = 300;
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
/* ============================ PARÂMETROS DOS GRÁFICOS ============================ */
//gráfico 2015 -Apenas para tirar parâmetros
// pincel.fillStyle="white";
// pincel.fillRect(150,100,100,300);
// pincel.fill();
//gráfico 2016 - Apenas para tirar parâmetros
// pincel.fillStyle="white";
// pincel.fillRect(350,100,100,300);
// pincel.fill();
/* == INICIANDO AS CONFIGURAÇÕES DE TELA E PASSANDO PARÂMETROS AS FUNÇÕES == */
// Deixando a tela da cor preta
pincel.fillStyle="black";
pincel.fillRect(0,0,600,400);
pincel.fill();
// ============== ANO 2015 ==============
//Outros - vermelho
criarVetor(5, "red", 2015);
//safari - amarelo
criarVetor(20, "yellow", 2015);
//Firefox - azul
criarVetor(25, "blue", 2015);
//chrome - verde
criarVetor(50, "green", 2015);
gerarGrafico(armazena2015, 2015);
// ============== ANO 2016 ==============
//Outros - vermelho
criarVetor(2, "red", 2016);
//safari - amarelo
criarVetor(13, "yellow");
//Firefox - azul
criarVetor(20, "blue");
//chrome - verde
criarVetor(65, "green");
gerarGrafico(armazena2016, 2016);
</script>
