User Interface Explorer

Páginas filhas
  • Portlet - Gráficos

Quando usar

  • Para representar entidades que possam ser analisadas e perceber tendências através de gráficos em portlets e áreas de conteúdo.
  • Para representar um conteúdo do tipo Lista ou Resumo.

Estrutura

Os Gráficos apresentam a seguinte estrutura: Título, Legenda, Rótulos de Indices/Valores, Eixos, Série, Tooltip, Cores.

A Série pode utilizar toda a biblioteca padrão disponível de gráfico exemplo: Barra, Linha, Coluna, Pizza, Área, Dispersão e outros disponíveis na biblioteca do flex.

Comportamentos

Para o gráfico de pizza, ocorre o efeito de zoom após clicar sobre ele deslocando uma fatia escolhida.
Todos os gráficos ao serem carregados devem ter animação mostrando sua formação.
Conforme o resize dos portlet ele apresenta as legendas.
Ao passar o mouse sobre o gráfico são apresentadas as legendas em forma de tooltip com descrição dos dados.

Ações ao clicar no gráfico pode haver alguns comportamentos de acordo com o contexto em 4 modelos distintos.

  1. Click simples para ação de Drilldown no gráfico. O gráfico é detalhado, ajustando novos dados que o usuário escolheu no primeiro nível, caso clicado novamente volta ao estado inicial de informação.
  2. Click simples para ação de Destaque. Apenas desloca a fatia no gráfico do tipo pizza. Ao clicar novamente reposiciona a fatia para dentro do circulo.
  3. Click duplo para Detalhar informação em nova Aba. Quando o usuário clicar em uma parte do gráfico ele abrirá uma nova Aba onde a informação que o usuário escolheu funcionará como pré-filtro daquela informação escolhida.
  4. Click simples para Interface sobre posta. Quando o usuário clicar em uma parte do gráfico aparecerá uma interface sobreposta, com algumas informações de acesso rápido.

Boas Práticas

  • Aconselha-se a utilização de legendas ao lado esquerdo do gráfico;
  • Ao expandir os gráficos, apresentar legenda ao lado;
  • Utilizar cores que contrastem entre si.

Exemplo

Código fonte
<em desenvolvimento >

Referências

Veja Também

\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}