Angular gráfico de rosca

    O gráfico de rosca Ignite UI for Angular é semelhante ao gráfico de pizza, ilustrando proporcionalmente as ocorrências de uma variável. O gráfico de rosca pode exibir várias variáveis em anéis concêntricos e fornece suporte interno para visualização de dados hierárquicos. Os anéis podem ser associados a um item de dados diferente ou podem compartilhar uma fonte de dados comum.

    Angular Donut Chart Example

    Você pode criar um gráfico de rosca usando o IgxDoughnutChartComponent controle vinculando seus dados, conforme mostrado no exemplo abaixo.

    Angular Donut Chart Recommendations

    Are Angular Donut Charts right for your project?

    Os gráficos de rosca são apropriados para pequenos conjuntos de dados e são fáceis de ler rapidamente. Os gráficos de rosca são apenas um tipo de visualização de parte para todo. Outros incluem:

    O Angular Donut Chart inclui recursos interativos que fornecem ao visualizador ferramentas para analisar dados, como:

    • Lendas
    • Explosão de fatia
    • Seleção de fatias
    • Animações de gráficos

    Best Practices for Donut Charts

    • Usando vários conjuntos de dados para exibir seus dados em um monitor de anel.
    • Colocar as informações, como valores ou rótulos, dentro do orifício do donut para uma explicação rápida dos dados.
    • Comparar fatias ou segmentos como valores percentuais em proporção a um valor total ou inteiro.
    • Mostrando como um grupo de categorias é dividido em segmentos menores.
    • Garantir que os segmentos de dados somem 100%.
    • Garantir que a paleta de cores seja distinguível para segmentos/fatias das peças.

    When not to use a Donut Chart

    • Comparando a mudança ao longo do tempo - use um gráfico de barras, linhas ou áreas.
    • Exigindo comparação de dados precisa - use um gráfico de barras, linhas ou áreas.
    • Você tem mais de 6 ou 8 segmentos (alto volume de dados) - considere um gráfico de barras, linhas ou áreas se funcionar para sua história de dados.
    • Seria mais fácil para o espectador perceber a diferença de valor em um gráfico de barras.
    • Você tem dados negativos, pois isso não pode ser representado em um gráfico de rosca.

    Angular Donut Chart - Slice Selection

    O Angular Donut Chart tem a capacidade de selecionar fatias com um clique. Opcionalmente, você pode aplicar um único estilo visual personalizado às fatias selecionadas. O SliceClick evento é gerado quando o usuário clica em uma fatia. Ativar a seleção de fatias permite que você modifique a seleção da fatia ao clicar. O exemplo a seguir demonstra como habilitar a seleção de fatias e definir a cor da fatia selecionada como cinza.

    Angular Donut Chart - Multiple Rings

    É possível ter uma exibição de vários anéis no Angular Gráfico de rosca, com cada um dos anéis podendo ser vinculado a um item de dados diferente ou podem compartilhar uma fonte de dados comum. Isso pode ser útil se você precisar exibir seus dados como camadas que têm uma categoria comum subjacente, como a exibição de dados de estação para mês abaixo:

    Additional Resources

    Você pode encontrar mais informações sobre os tipos de gráficos relacionados nestes tópicos:

    API References

    A tabela a seguir lista os membros da API mencionados nas seções acima: