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.
- 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.
- 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.
- 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.
- 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
Referências
Veja Também
\\
h6.Navegação
{pagetree:root=@home|startDepth=2|expandCollapseAll=true}