Neste artigo mostrarei como gerar um gráfico, com legenda em javascript, simples e sem complicações.
Abra um editor de texto de sua preferência e no topo adicione o CSS abaixo.
Após a inclusão do css, vamos JavaScript
Criaremos uma função chamada Empresa com a seguintes propriedades {Nome,AreamCrescimentoAnual,CorBarra},
function Empresa()
{ // SERÁ USADA PARA CADASTRAR AS EMPRESAS
this.Nome;
this.Area;
this.CrescimentoAnual;
this.CorBarra;
}
A próxima função apenas mostra as propriedades de cada empresa.
function ExibirLabel(obj,Id)
{// ADICIONAMOS AO DIV LABELGRAFICO O CONTEUDO DE CADA OJETO
// EMPRESA PASSADO POR ELE
var alvo = document.getElementById("LabelGrafico"+Id);
alvo.innerHTML = "";
alvo.innerHTML = "
"+ obj.Nome +"
";
alvo.innerHTML += "Area de atuação: "+obj.Area;
alvo.innerHTML += "
Cresimento Anual: "+obj.CrescimentoAnual + "%";
alvo.style.display = '';
}
se estamos mostrando as propriedades, temos que ocultar J
function OcultarLabel(Id)
{// SIMPLESMENTE ESTAMOS OCULTANDO O ID CORRENTE.
var alvo = document.getElementById("LabelGrafico"+Id);
alvo.style.display = 'none';
}
Agora vamos ao coração do programa, a função GRAFICOS.
function Graficos(dados){
var Abarra = 19; // altura da barra
var Lbarra = 0; // largura da barra
var calc_largura = 0; // calculo da largura da barra
var calc_percent = 0; // calculo do percent de valores
var construtor = ""; // responsavel por montar todo o grafico
var total = 0; // contabilizador de valores
var i;
//AQUI ESTAMOS SOMANDO O CRESIMENTO ANUAL
// DE CADA EMPRESA
for (i = 0; i
';
construtor+= ' ';
construtor+= ' | '+calc_percent+'% | ';
}
construtor += '';
return construtor;
}
Agora o que falta para nosso programa funcionar, é criamos as empresas e chamar a função gráfico.
// CRIAMOS UM ARRAY E DENTRO DE CADA INDICE ALOCAMOS
// UMA NOVA INSTANCIA DE EMPRESA , SIMPLES ASSIM! J
var dados =new Array()
dados[0] = empresa = new Empresa();
dados[0].CorBarra ="#CCFFCC";
dados[0].Nome = 'CODIGO FONTE';
dados[0].CrescimentoAnual = 93.37;
dados[0].Area = 'TI';
dados[1] = empresa = new Empresa();
dados[1].CorBarra ="#CCFFFF";
dados[1].Nome = 'PIRAQUE';
dados[1].CrescimentoAnual = 54.94;
dados[1].Area = 'COMERCIO';
dados[2] = empresa = new Empresa();
dados[2].CorBarra ="#FFCC99";
dados[2].Nome = 'JEANS TK';
dados[2].CrescimentoAnual = 78.01;
dados[2].Area = 'TEXTIL';
// AGORA SÓ PASSAR ESSE ARRAY PARA O GRAFICOS e PRONTO RESULTADO NA HORA!
document.write(Graficos(dados));
salve em uma página html e pronto! ;-)
bom pessoal, até o próximo artigo!
[]´s