- Criado por Deborah Melo de Carvalho, última alteração em 22/10/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 14 Próxima »
Introdução
Gráficos são elementos bastante utilizados para apresentar informações de uma maneira mais compreensível e amigável, eles são indicados principalmente quando trabalham com dados numéricos. Sua utilização na IDE se dá através da combinação entre os blocos de programação da categoria gráfico e o componente visual gráfico, e eles são os responsáveis, respectivamente, por criar um gráfico e o renderiza-lo em uma view HTML.
Figura 1 - Gráfico sendo executado no browser
Pré-configuração
Será feito em etapas, primeiramente adicionando o componente na IDE e, após, desenvolvendo uma programação simples utilizando o bloco gráfico onde o mesmo utilizará dados de um banco.
Criando uma entidade no banco
- Adicione uma classe no diagrama - nesse exemplo, vai ser utilizado a classe anime;
- Crie atributos para essa classe, como anime (tipo texto), genero (tipo texto), episódios (tipo inteiro) e ano (tipo texto) (Figura 2.1);
- Faça a persistência da classe clicando com o botão direito do mouse sobre a classe e selecionando criar camada de dados para a entidade (Figura 2.1);
- Crie o formulário da classe clicando com o botão direito do mouse sobre a classe e selecionando criar visão para a entidade (Figura 2.1).
Figura 2.1 - Criar persistência e visão para a entidade
Vinculando página à barra de navegação e adicionando dados
Após, vincule a página na barra de navegação da página home (Figura 2.2) reproduzindo os passos abaixo:
- Abra a view home.view.html;
- Selecione a barra de navegação para abrir a janela Opções de Menu - caso ela não abra, clique no botão "..." (indicado pela seta vermelha na Figura 2.2) do campo configuração pertencente a aba propriedade;
- Adicione um novo item a barra (1 da Figura 2.2) e insira um nome;
- No botão "..." (2 da Figura 2.2) pertencente ao campo ação para abrir a janela de view e selecione a view da classe que foi gerada;
Figura 2.2 - Vinculando página à barra de navegação
Execute o projeto e adicione dados aleatórios, mas sempre preenchendo em todos os campos.
Adicionando componente visual
Na página da home.view.html adicione o componente gráfico. Selecione o componente e na aba propriedade, altere o conteúdo do campo identificador do gráfico para chartAnime e salve a página.
Figura 3 - Alterando o campo identificador do gráfico
Criando o bloco de programação
Vinculando página ao bloco
Crie um bloco de programação do tipo servidor e ao abrir a janela, vincule a página home com o bloco de programação (Figura 4.1) seguindo os passos abaixo:
- Clique na engrenagem do bloco de programação;
- Clique no botão "..." que fica ao lado do campo formulário de referência;
- Selecione o formulário que contém o componente gráfico.
Figura 4.1 - Vinculando página html ao bloco de programação
Programação do bloco gráfico
Primeiro, adicione o bloco criar gráfico e no parâmetro ID, selecione chartAnime para vincular o bloco com o componente. No parâmetro tipo de gráfico selecione a opção bar.
Figura 4.2 - Adicionando o bloco criar gráfico e realizando as primeiras configurações
Após, adicione o bloco abrir consulta da categoria banco de dados e encaixe-o no parâmetro da legenda. Clique na engrenagem (indicado pela seta vermelha na Figura 4.3) para abrir a janela de configuração do bloco; após, adicione a classe anime (1 da Figura 4.3), obtenha o campo ano (2 da Figura 4.3) e agrupe os dados pelo campo ano (3 da Figura 4.3).
Figura 4.3 - Configurando o bloco para o parâmetro legenda
Por fim, adicione o bloco criar série da categoria gráfico ao parâmetro série(s) do gráfico, adicione uma campo de texto para o parâmetro nome da série do bloco e o nomeie como Qtd lançadas:, adicione outro bloco abrir consulta no paramêtro dados e clique na engrenagem desse bloco para abrir a janela de configuração e reproduza os seguintes passos:
- Adicione a entidade anime;
- Adicione o campo a.anime e selecione contar;
- Agrupe os dados por a.ano.
FIgura 4.4 - Configurando o bloco para o parâmetro dados do bloco criar série
Parâmetro opções
Esse parâmetro define algumas propriedades ao gráfico, como adicionar título, definir animações no gráfico, alterar o layout e entre outros e podem criar personalizações para cada uma dessas propriedades, de acordo com as opções disponibilizadas nos links abaixo.
Saiba mais
A estrutura de configuração para o parâmetro opções é em formato JSON, formato de representação de dados que é composto basicamente de chave/valor. Por exemplo, no código abaixo, a propriedade title se refere ao título do gráfico e as combinações de chave/valor estão dentro dessa propriedade - delimitada pelo {}, onde a chave é o atributo (display, text, fontSize e fontColor) e os valores são cada uma delas fazem as seguintes personalizações:
- "display": true - habilita a visualização do título no gráfico;
- "text": "Animes assistido por ano" - define o conteúdo para o título;
- "fontSize": 20 - define o tamanho do título;
- "fontColor": "#00F" - cor para o título.
{ "title": { "display": true, "text": "Animes assistido por ano", "fontSize": 20, "fontColor": "#00F" }, "legend": { "display": true }, "animation": { "duration": 1500, "easing": "easeOutBounce" }, "layout": { "padding": { "left": 120, "right": 120, "top": 60, "bottom": 60 } } }
Sendo assim, adicione o bloco texto e o encaixa no parâmetro opções (Figura 4.5). Copie o código apresentado acima para ver as personalizações que ocorrem no gráfico.
Figura 4.5 - Personalização do gráfico
Vinculando bloco ao evento do gráfico
Na view home.view.html, no qual o componente gráfico se encontra presente, selecione o componente e na aba propriedades, selecione a sub-aba eventos. Clique em exibir mais e procure o evento ao iniciar. Após achar o evento, clique em "..." pertencente ao evento e selecione o bloco de programação para criar gráfico (Figura 4.6).
Figura 4.6 - Vinculando bloco ao componente gráfico
- Sem rótulos