Ola galera,
Este é o 3 exercício desta série e cada vez aumentando seu grau de dificuldade.
Deu dor de cabeça. Passei 2 dias pensando e resolvendo os erros para fazer, pois tentei trazer alguma coisa melhor que as anteriores, senão não teria graça. Sendo assim segue abaixo meu código.
Não sei se teria alguma expressão que deixa se o código mais limpo, porque foi através dos testes e falhas que consegui chegar neste resultado.
Espero que gostem.
<meta charset="UTF-8">
<h1><center>..:: Gráfico de barras ::..</center></h1>
<h3>% dos navegadores utilizavam em 2015 e 2016</h3>
<h4>Valores em:</h4>
<p><b>2015:</b> <input id="serie20151" size="1" value=50>% Chrome, <input id="serie20152" size="1" value=25>% Firefox, <input id="serie20153" size="1" value=20>% Safari, <input id="serie20154" size="1" value=5>% Outros (<i>Opera, IE, etc</i>).</p>
<p><b>2016:</b> <input id="serie20161" size="1" value=65>% Chrome, <input id="serie20162" size="1" value=20>% Firefox, <input id="serie20163" size="1" value=13>% Safari, <input id="serie20164" size="1" value=2>% Outros (<i>Opera, IE, etc</i>).</p>
<p><b>Cores:</b> <input id="cor1" size="2" value="blue"> Chrome, <input id="cor2" size="2" value="green"> Firefox, <input id="cor3" size="2" value="yellow"> Safari, <input id="cor4" size="2" value="red"> Outros (<i>Opera, IE, etc</i>).</p>
<button id="grafico">Gerar Gráfico</button>
<button id="limpa">Limpa Tela</button>
<br>
<br>
<canvas id="tela" width="350" height="400"></canvas>
<script>
function limpaTela(){
var tela = document.querySelector('#tela');
var mao = tela.getContext('2d');
mao.fillStyle = 'white';
mao.fillRect(0, 0, 350, 400);
}
function coletaDados2015() {
//Coleta os dados do periodo 2015 e armazena em vetor
var serie2015 = [];
var perc = 0; //Acumula valores para teste
for (var i = 1 ; i<=4 ; i++){
var x = '#serie2015' + [i];
var valor = document.querySelector(x);
serie2015[i-1] = parseInt(valor.value);
console.log(serie2015[i-1]); //Valores individuais 2015 (teste)
perc += parseInt(valor.value); //perc = perc + parseInt(valor.value);
}
console.log(perc); //resultado da soma dos valores 2015
if (perc != 100){
desenhaTexto(30, 170, '% <> 100'); // x(coord X) | y(coord Y) | texto(texto escrito)
serie2015.length = 0; //Apagando toda o vetor, pois a soma dos valores > 100%
return serie2015; //Retorna o vetor vazio
} else {
return serie2015; //Retorna o vetor com os valores informados
}
}
function coletaDados2016() {
//Coleta os dados do periodo 2016 e armazena em vetor
var serie2016 = [];
var perc = 0; //Acumula valores para teste
for (var i = 1 ; i<=4 ; i++){
var x = '#serie2016' + [i];
var valor = document.querySelector(x);
serie2016[i-1] = parseInt(valor.value);
console.log(serie2016[i-1]); //Valores individuais 2016 (teste)
perc += parseInt(valor.value); //perc = perc + parseInt(valor.value);
}
console.log(perc); //resultado da soma dos valores 2016
if (perc!=100){
desenhaTexto(255, 170, '% <> 100'); // x(coord X) | y(coord Y) | texto(texto escrito)
serie2016.length = 0; //Apagando toda o vetor, pois a soma dos valores > 100%
return serie2016; //Retorna o vetor vazio
} else {
return serie2016; //Retorna o vetor com os valores informados
}
}
function coletaCores() {
//Coleta as cores para fazer o grafico
var cores = [];
for (var i = 1 ; i<=4 ; i++){
var x = '#cor' + [i];
var valor = document.querySelector(x);
cores[i-1] = valor.value;
console.log(cores[i-1]); //valores individuais 2016
}
return cores; //Retorna o vetor com as cores
}
function desenhaRetangulo(x, y, largura, altura, cor) {
var tela = document.querySelector('#tela');
var mao = tela.getContext('2d');
mao.fillStyle = cor;
mao.fillRect(x,y, largura, altura);
mao.strokeStyle = 'black';
mao.strokeRect(x,y, largura, altura);
}
function desenhaRetanguloVazio() {
var tela = document.querySelector('#tela');
var mao = tela.getContext('2d');
//Dados 2015
mao.fillStyle = 'white';
mao.fillRect(0, 20, 125, 300);
mao.strokeStyle = 'black';
mao.strokeRect(0, 20, 125, 300);
//Dados 2016
mao.fillStyle = 'white';
mao.fillRect(225, 20, 125, 300);
mao.strokeStyle = 'black';
mao.strokeRect(225, 20, 125, 300);
}
function desenhaRetangulo2015(serie2015, cores) {
var tela = document.querySelector('#tela');
var mao = tela.getContext('2d');
var x = 0;
var y = 20;
for (var i = 0 ; i < 4 ; i++) {
var altura = serie2015[i] * 3;
desenhaRetangulo(x, y, 125, altura, cores[i]);
y += altura; //y = y + altura;
}
}
function desenhaRetangulo2016(serie2016, cores) {
var tela = document.querySelector('#tela');
var mao = tela.getContext('2d');
var x = 225;
var y = 20;
for (var i = 0 ; i < 4 ; i++) {
var altura = serie2016[i] * 3;
desenhaRetangulo(x, y, 125, altura, cores[i]);
y += altura; //y = y + altura;
}
}
function desenhaTexto(x, y, texto) {
var tela = document.querySelector('#tela');
var mao = tela.getContext('2d');
mao.font='15px Georgia'; // Tamanho e estilo da fonte
mao.fillStyle='blue'; // cor da font
mao.fillText(texto, x, y); // texto(texto escrito) | x(coord X) | y(coord Y)
}
function geraGrafico(){
limpaTela();
desenhaTexto(0, 15, '2015'); // x(coord X) | y(coord Y) | texto(texto escrito)
desenhaTexto(225, 15, '2016'); // x(coord X) | y(coord Y) | texto(texto escrito)
retornCores = coletaCores(); //Retorno das cores
desenhaRetanguloVazio();
retorn2015 = coletaDados2015();
desenhaRetangulo2015(retorn2015, retornCores);
retorn2016 = coletaDados2016();
desenhaRetangulo2016(retorn2016, retornCores);
}
var grafico = document.querySelector("#grafico");
grafico.onclick = geraGrafico;
var limpa = document.querySelector("#limpa");
limpa.onclick = limpaTela;
</script>
