Angular Gráfico de pizza

    O Ignite UI for Angular Gráfico de Pizza, ou Gráfico de Pizza, é um gráfico de parte para todo que mostra como as categorias (partes) de um conjunto de dados somam um valor total (inteiro). As categorias são renderizadas como seções em um gráfico circular ou em forma de pizza. Cada seção, ou fatia de pizza, tem um comprimento de arco proporcional ao seu valor de dados subjacente. As categorias são mostradas em proporção a outras categorias com base em sua porcentagem de valor em relação ao valor total que está sendo analisado, como partes de 100 ou 100%.

    Angular Pie Chart Example

    Você pode criar o Angular Gráfico de Pizza no IgxPieChartComponent vinculando seus itens de dados a uma cadeia de caracteres e um valor de dados numérico. Esses valores de dados somarão um valor de 100% de visualização. Nesse caso, o exemplo mostra o detalhamento geral dos gastos do orçamento por departamento.

    Angular Pie Chart Recommendations

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

    • Torta
    • Rosquinha (Anel)
    • Funil
    • Área empilhada
    • 100% de área empilhada (área de porcentagem empilhada)
    • Barra empilhada
    • Barra 100% empilhada (barra de porcentagem empilhada)
    • Mapa de árvore
    • Cascata

    O Angular gráfico de pizza 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

    Práticas recomendadas para um gráfico de pizza:

    • 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.
    • Apresentar conjuntos de dados pequenos e não hierárquicos (menos de 6 a 8 segmentos de dados).
    • Garantir que os segmentos de dados somem 100%.
    • Organizar a ordem dos dados do maior (mais alto) para o menor (menor).
    • Usando técnicas de apresentação padrão, como começar na posição de 12 horas e continuar no sentido horário.
    • Garantir que a paleta de cores seja distinguível para segmentos/fatias das peças.
    • Considerando rótulos de dados em segmentos vs. legendas para facilitar a leitura.
    • Escolher um gráfico alternativo ao Pie, como Bar ou Ring, com base na facilidade de compreensão.
    • Evitar posicionar vários gráficos de pizza próximos uns dos outros para análise comparativa.

    Não use o gráfico de pizza quando:

    • 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.

    Angular Pie Chart Legend

    As legendas são usadas para mostrar informações sobre cada ponto, para saber sobre sua contribuição para a soma total. Você pode recolher o ponto usando o clique da legenda.

    Para exibir uma legenda ao lado do gráfico de pizza, um ItemLegend precisa ser criado e atribuído à IgxLegendComponent propriedade. Em seguida, ele legendLabelMemberPath pode ser usado para especificar qual propriedade em seu modelo de dados ele usará para exibir dentro da legenda para cada fatia de pizza.

    Além disso, você pode usar as legendItemTemplate propriedades and legendItemBadgeTemplate e as várias propriedades de fonte em ItemLegend para personalizar ainda mais a aparência dos itens de legenda.

    Angular Pie Chart Others Category

    Às vezes, os dados subjacentes do gráfico de pizza conterão muitos itens com valores pequenos. Nesse caso, a categoria Outros permitirá a agregação automática de vários valores de dados em uma única fatia

    No exemplo abaixo, o othersCategoryThreshold é definido como 2 e othersCategoryType é definido como Número. Portanto, itens com valor menor ou igual a 2 serão atribuídos à categoria "Outros".

    Se você definir othersCategoryType como Porcentagem, então othersCategoryThreshold será interpretado como uma porcentagem e não como um valor, ou seja, itens cujos valores são menores que 2% da soma de todos os valores de itens seriam atribuídos à categoria Outros. Você pode usar o que othersCategoryType for mais apropriado para sua aplicação.

    Angular Pie Chart Explosion

    O gráfico de pizza suporta a explosão de fatias de pizza individuais, bem como um SliceClick evento que permite modificar estados de seleção e implementar lógica personalizada

    Angular Pie Chart Selection

    O gráfico de pizza suporta a seleção de fatias por clique do mouse como o comportamento padrão. Você pode determinar as fatias selecionadas usando a selectedItems propriedade. As fatias selecionadas são então destacadas.

    Há uma propriedade chamada selectionMode que é como você define o modo que deseja que o gráfico de pizza use. O valor padrão é Single. Para desativar a seleção, defina a propriedade como Manual.

    O gráfico de pizza suporta três modos de seleção diferentes.

    • Único - Quando o modo é definido como único, apenas uma fatia pode ser selecionada por vez. Quando você seleciona uma nova fatia, a fatia selecionada anteriormente será desmarcada e a nova será selecionada.
    • Múltiplo - Quando o modo é definido como Múltiplo, muitas fatias podem ser selecionadas de uma só vez. Se você clicar em uma fatia, ela será selecionada e clicar em uma fatia diferente também selecionará essa fatia, deixando a fatia anterior selecionada.
    • Manual - Quando o modo é definido como Manual, a seleção é desativada.

    O gráfico de pizza tem 4 eventos associados à seleção:

    • SelectedItemChanging
    • SelectedItemChanged
    • SelectedItemsChanging
    • SelectedItemsChanged

    Os eventos que terminam em "Alterando" são eventos canceláveis, o que significa que você pode interromper a seleção de uma fatia definindo a propriedade Cancel event argument como true. Quando definida como true, a propriedade associada não será atualizada e a fatia não será selecionada. Isso é útil para cenários em que você deseja impedir que os usuários possam selecionar determinadas fatias com base nos dados contidos nela.

    Para cenários em que você clica na fatia Outros, o gráfico de pizza retornará um objeto chamado IgxPieSliceOthersContext. Esse objeto contém uma lista dos itens de dados contidos na fatia Outros.

    Angular Pie Chart Animation

    Você pode animar o gráfico de pizza suavemente definindo a radiusFactor propriedade, que dimensionará o raio do gráfico. Defina também a startAngle propriedade para inclinar o gráfico de forma que ele continue aumentando o ângulo do gráfico enquanto gira.

    No código abaixo, o radiusFactor está aumentando o gráfico em 0,25% do tamanho e startAngle está girando o gráfico em 1 grau. Quando radiusFactor e startAngle atingem seu limite máximo, a animação é interrompida por redefinir o sinalizador de animação e limpar o intervalo.

    Angular Pie Chart Styling

    Depois que nosso gráfico de pizza for criado, talvez queiramos fazer mais algumas personalizações de estilo, como uma alteração das cores das fatias do gráfico, conforme demonstrado abaixo:

    Angular Radial Pie Chart

    O Gráfico de Pizza Radial pertence a um grupo de Gráficos Radiais e usa um grupo de gráficos radiais e usa fatias de pizza que se estendem do centro do gráfico em direção aos locais dos pontos de dados. Esse tipo de gráfico usa conceitos de categorização de várias séries de pontos de dados e os envolve em torno de um eixo circular, em vez de esticar os pontos de dados ao longo de uma linha horizontal.

    Additional Resources

    API References

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

    Tipo de gráfico Nome do controle Membros da API
    Gráfico de pizza IgxPieChartComponent PieChart
    Gráfico de pizza radial IgxDataChartComponent IgxRadialPieSeriesComponent