Angular Data Pie Chart

    O Gráfico de Pizza de Dados Ignite UI for Angular é 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 Data Pie Chart Example

    Você pode criar o Angular Gráfico de Pizza vinculandoIgxDataPieChartComponent seus itens de dados com uma string string e um valor numérico de dados. Esses valores de dados somam 100% da visualização.

    Angular Data 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, como Gráfico de rosca (anel), Gráfico de funil, Gráfico de área empilhada, Gráfico de barras empilhadas e Mapa de árvore.

    O gráfico de pizza de dados Angular inclui recursos interativos que fornecem ao visualizador ferramentas para analisar dados, como:

    • Lendas
    • Seleção de fatias
    • Slice Highlighting
    • 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 Data 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.

    Para exibir uma legenda ao lado do gráfico de pizza, é necessário criar uma ItemLegend e ser atribuída àIgxLegendComponent propriedade. O ItemLegend exibirá seus itens na orientação vertical como padrão, mas isso pode ser alterado definindo suaorientation propriedade.

    Os rótulos mostrados na legenda exibirão o mesmo conteúdo do rótulo mostrado para cada fatiaIgxDataPieChartComponent no padrão, mas isso pode ser modificado utilizando alegendSliceLabelContentMode propriedade no gráfico. Isso expõe uma enumeração que permite mostrar o rótulo, valor, porcentagem ou qualquer combinação deles como o conteúdo da legenda para cada fatia do gráfico.

    Você também pode modificar o distintivo ItemLegend. Por padrão, ele aparece como um círculo preenchido correspondente à cor da fatia do gráfico associado. Você pode configurar isso usando alegendItemBadgeShape propriedade no gráfico, e pode definir como um círculo, linha, barra, coluna e mais.

    Abaixo está um exemplo que demonstra o uso do ItemLegend com oIgxDataPieChartComponent.

    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.

    A categoria Outros em temIgxDataPieChartComponent três propriedades principais configuráveis -othersCategoryType,othersCategoryThreshold, eothersCategoryText que permitem que você configure como o segmento dos Outros no gráfico é mostrado. Cada uma dessas são descritas abaixo:

    AothersCategoryType propriedade funciona em conjunto com aothersCategoryThreshold propriedade do.IgxDataPieChartComponent Para issoothersCategoryType, você pode definir se quer que oothersCategoryThreshold seja avaliado como um número ou como uma porcentagem. Por exemplo, se você decidir o número e definir comoothersCategoryThreshold 5, quaisquer fatias com valor menor que 5 passarão a fazer parte da categoria Outros. Usando o mesmo valor de 5 com um tipo percentual, quaisquer valores que sejam menores que 5% dos valores totais doIgxDataPieChartComponent passarão a fazer parte da categoria Outros.

    Para obter os itens de dados subjacentes contidos no Outros no gráfico, você pode usar ogetOthersContext método no gráfico. Esse tipo de retorno desse método é umIgxOthersCategoryContextComponent que expõe umaitems propriedade. Aitems propriedade retorna um array que conterá os itens na fatia Others. Além disso, ao clicarItem na fatia Outros, aSeriesClick propriedade dos argumentos do evento também retornará issoIgxOthersCategoryContextComponent.

    Por padrão, a fatia dos Outros será representada por um rótulo "Outros". Você pode alterar isso modificando aothersCategoryText propriedade do gráfico.

    Angular Styling the Others Slice

    Você pode estilizar a fatia Others agregada separadamente das outras fatias usando estas propriedades:

    • OthersCategoryBrush
      Fixa o preenchimento (pincel) usado para a fatia dos Outros.

    • OthersCategoryOutline
      Define o contorno (traço) usado para a fatia dos Outros.

    Essas propriedades só afetam o slice dos Outros (quando existe). Todas as outras fatias continuam usando a paleta normal e o comportamento de coloração por item.

    Note

    A fatia dos Outros só é renderizada quando o gráfico está configurado para criá-la (por exemplo, comothersCategoryThreshold maior que0 e um apropriadoothersCategoryType). Se o slice dos Outros não estiver presente eOthersCategoryBrush​OthersCategoryOutline não tiver efeito visível.

    Se quiser garantir que a categoria Outros não apareçaIgxDataPieChartComponent, pode definir paraothersCategoryThreshold 0.

    O exemplo a seguir demonstra o uso do segmento Others noIgxDataPieChartComponent:

    Angular Data Pie Chart Selection

    O suporteIgxDataPieChartComponent a seleção de fatias por meio do clique do mouse nas fatias representadas no gráfico. Isso pode ser configurado utilizando asselectionBehavior propriedades eselectionMode do gráfico, descritas abaixo:

    As duas principais opções doselectionBehavior sãoPerDataItemSingleSelect ePerDataItemMultiSelect, que permitirão a seleção única e múltipla, respectivamente.

    AselectionMode propriedade expõe uma enumeração que determina como as fatias do gráfico de pizza respondem à sua seleção. A seguir estão as opções dessa enumeração e o que elas fazem:

    • Brighten: As fatias selecionadas serão destacadas.
    • FadeOthers: As fatias selecionadas permanecerão da mesma cor e as outras desbotarão.
    • FocusColorFill: As fatias selecionadas mudarão seu fundo para o FocusBrush do gráfico.
    • FocusColorOutline: As fatias selecionadas terão um contorno com a cor definida pelo FocusBrush do gráfico.
    • FocusColorThickOutline: As fatias selecionadas terão um contorno com a cor definida pelo FocusBrush do gráfico. A espessura desse contorno pode ser configurada também pela propriedade Thickness do controle.
    • GrayscaleOthers: As fatias não selecionadas terão um filtro de cor cinza aplicado a elas.
    • None: Não há efeito nas fatias selecionadas.
    • SelectionColorFill: As fatias selecionadas mudarão seu fundo para o SelectionBrush do gráfico.
    • SelectionColorOutline: As fatias selecionadas terão um contorno com a cor definida pelo SelectionBrush do gráfico.
    • SelectionColorThickOutline: As fatias selecionadas terão um contorno com a cor definida pelo FocusBrush do gráfico. A espessura desse contorno pode ser configurada também pela propriedade Thickness do controle.
    • ThickOutline: As fatias selecionadas aplicarão um contorno com a espessura dependendo da propriedade Thickness do gráfico.

    Quando uma fatia é selecionada, seu item de dados subjacente será adicionado à coleção SelectedSeriesItems do gráfico. Dessa forma, o XamDataPieChart expõe o evento SelectedSeriesItemsChanged para detectar quando uma fatia foi selecionada e essa coleção foi alterada.

    O exemplo a seguir demonstra a função de seleção doIgxDataPieChartComponent controle:

    Angular Data Pie Chart Highlighting

    O suporteIgxDataPieChartComponent o mouse sobre o realce, assim como uma sobreposição de destaque que pode ser configurada fornecendo uma fonte de dados separada.

    Primeiro, ahighlightingBehavior propriedade enumerada determina como uma fatia será destacada. A seguir estão as opções daquele imóvel e o que eles fazem:

    • DirectlyOver: As fatias só são destacadas quando o mouse está diretamente sobre elas.
    • NearestItems: A fatia mais próxima da posição do mouse será destacada.
    • NearestItemsAndSeries: A fatia e a série mais próximas da posição do mouse serão destacadas.
    • NearestItemsRetainMainShapes: Os itens mais próximos da posição do mouse serão destacados e as formas principais da série não serão desvalorizadas.

    AhighlightingMode propriedade enumerada determina como as fatias do gráfico de pizza de dados respondem ao ser destacado. A seguir estão as opções daquele imóvel e o que eles fazem:

    • Brighten: A série terá sua cor mais clara quando a posição do mouse estiver acima ou próxima a ela.
    • BrightenSpecific: A fatia específica terá sua cor mais clara quando a posição do mouse estiver acima ou próxima.
    • FadeOthers: A série manterá sua cor quando a posição do mouse estiver acima ou próxima a ela, enquanto as outras parecerão desbotadas.
    • FadeOthersSpecific: A fatia específica manterá sua cor quando a posição do mouse estiver acima ou próxima, enquanto as outras parecerão desbotadas.
    • None: A série e os slices não serão destacados.

    O exemplo a seguir demonstra os comportamentos de destaque doIgxDataPieChartComponent componente com o mouse:

    Além do realce do mouse, eleIgxDataPieChartComponent expõe uma capacidade de filtro de destaque que pode exibir um subconjunto dos seus dados. Isso é aplicado especificando aHighlightedDataSource para o controle e definindo ahighlightedValuesDisplayMode propriedade comoOverlay. OHighlightedDataSource espera um subconjunto dos dados atribuídos àDataSource propriedade daIgxDataPieChartComponent.

    Quando essas condições forem atendidas, os valores do subconjunto serão destacados, enquanto o restante do conjunto completo de dados será esmaecido - criando efetivamente um destaque para o subconjunto e permitindo uma visualização mais fácil de um subconjunto de seus dados dentro do mesmo controle.

    O exemplo a seguir demonstra a filtragem de realce.

    Angular Data Pie Chart Animation

    OsIgxDataPieChartComponent suportes animam seus slices para a visualização, assim como quando um valor muda.

    Você pode definir aisTransitionInEnabled propriedade como true para que o gráfico de pizza seja animado e apareça. O tipo de animação realizada pode ser configurado definindo atransitionInMode propriedade enumerada para o tipo de animação que você deseja ver. Além disso, você também pode configurar atransitionInSpeedType propriedade para escalar com índice, valor, normal ou randomizado. A duração dessa animação pode ser controlada pelatransitionInDuration propriedade, que leva umTimeSpan.

    Se você quiser animar mudanças de dados, isso também pode ser feito definindo aanimateSeriesWhenAxisRangeChanges propriedade como true. A duração dessa mudança pode ser configurada também definindo atransitionDuration propriedade.

    O exemplo a seguir demonstra o uso da animação noIgxDataPieChartComponent:

    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 de dados IgxDataPieChartComponent IgxDataPieChartComponent
    Item Legend IgxItemLegendComponent IgxItemLegendComponent