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 no IgxDataPieChartComponent 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.

    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, um ItemLegend precisa ser criado e atribuído à IgxLegendComponent propriedade. O ItemLegend exibirá seus itens na orientação vertical como padrão, mas isso pode ser alterado definindo sua orientation propriedade.

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

    Você também pode modificar o emblema ItemLegend. Por padrão, ele aparece como um círculo preenchido correspondente à cor da fatia de gráfico associada. Você pode configurar isso usando a legendItemBadgeShape propriedade no gráfico e pode defini-la como um círculo, linha, barra, coluna e muito mais.

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

    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 no IgxDataPieChartComponent tem três propriedades principais e configuráveis -othersCategoryType, othersCategoryThreshold, e othersCategoryText que permitem configurar como a fatia Outros no gráfico é mostrada. Cada um deles é descrito abaixo:

    A othersCategoryType propriedade funciona em conjunto com a othersCategoryThreshold propriedade do IgxDataPieChartComponent. Para o othersCategoryType, você pode definir se deseja que o othersCategoryThreshold seja avaliado como um número ou uma porcentagem. Por exemplo, se você decidir sobre o número e definir como othersCategoryThreshold 5, todas as fatias que tiverem um valor menor que 5 se tornarão parte da categoria Outros. Usando o mesmo valor de 5 com um tipo de porcentagem, todos os valores menores que 5% dos valores totais do IgxDataPieChartComponent serão

    Para obter os itens de dados subjacentes contidos na fatia Outros no gráfico, você pode utilizar o GetOthersContext método no gráfico. Esse tipo de retorno desse método é um OthersCategoryContext que expõe uma Items propriedade. A Items propriedade retorna uma matriz que conterá os itens na fatia Outros. Além disso, ao clicar na fatia Outros, a Item propriedade dos argumentos do evento para o SeriesClick evento também retornará this OthersCategoryContext.

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

    Se você quiser garantir que a categoria Outros não apareça no IgxDataPieChartComponent, você pode definir o othersCategoryThreshold como 0.

    O exemplo a seguir demonstra o uso da fatia Outros no IgxDataPieChartComponent:

    Angular Data Pie Chart Selection

    O IgxDataPieChartComponent suporta a seleção de fatias clicando com o mouse nas fatias plotadas no gráfico. Isso pode ser configurado utilizando as selectionBehavior propriedades e selectionMode do gráfico, descritas abaixo:

    As duas principais opções do selectionBehavior são PerDataItemSingleSelect e PerDataItemMultiSelect, que permitirão a seleção única e múltipla, respectivamente.

    A selectionMode propriedade expõe uma enumeração que determina como as fatias do gráfico de pizza respondem ao serem selecionadas. 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 com a mesma cor e outras desbotarão.
    • FocusColorFill: As fatias selecionadas mudarão seu plano de 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 também pode ser configurada por meio da 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 plano de 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 também pode ser configurada por meio da propriedade Thickness do controle.
    • ThickOutline: As fatias selecionadas aplicarão um contorno com a espessura dependente da propriedade Espessura 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 o recurso de seleção do IgxDataPieChartComponent controle:

    Angular Data Pie Chart Highlighting

    O IgxDataPieChartComponent suporte passa o mouse sobre o realce, bem como uma sobreposição de realce que pode ser configurada fornecendo uma fonte de dados separada.

    Primeiro, a propriedade enumerada highlightingBehavior determina como uma fatia será realçada. A seguir estão as opções dessa propriedade e o que elas 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 enfatizadas.

    A highlightingMode propriedade enumerada determina como as fatias do gráfico de pizza de dados respondem ao realce. A seguir estão as opções dessa propriedade e o que elas fazem:

    • Brighten: A série terá sua cor iluminada quando a posição do mouse estiver sobre ou perto dela.
    • BrightenSpecific: A fatia específica terá sua cor iluminada quando a posição do mouse estiver sobre ou perto dela.
    • FadeOthers: A série manterá sua cor quando a posição do mouse estiver sobre ou perto dela, enquanto as outras parecerão desbotadas.
    • FadeOthersSpecific: A fatia específica manterá sua cor quando a posição do mouse estiver sobre ou perto dela, enquanto as outras parecerão desbotadas.
    • None: A série e as fatias não serão destacadas.

    O exemplo a seguir demonstra os comportamentos de realce do mouse do IgxDataPieChartComponent componente:

    Além do realce do mouse, o IgxDataPieChartComponent expõe um recurso de filtro de realce que pode exibir um subconjunto de seus dados. Isso é aplicado especificando a HighlightedDataSource para o controle e definindo a highlightedValuesDisplayMode propriedade como Overlay. O HighlightedDataSource espera um subconjunto dos dados atribuídos à DataSource propriedade do IgxDataPieChartComponent.

    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

    O IgxDataPieChartComponent suporta a animação de suas fatias em exibição, bem como quando um valor é alterado.

    Você pode definir a isTransitionInEnabled propriedade como true para que o gráfico de pizza seja animado para exibição. O tipo de animação executada pode ser configurado definindo a propriedade enumerada transitionInMode para o tipo de animação que você gostaria de ver. Além disso, você também pode definir a transitionInSpeedType propriedade para dimensionar com índice, valor, normal ou aleatório. A duração dessa animação pode ser controlada pela transitionInDuration propriedade, que leva a TimeSpan.

    Se você quiser animar alterações de dados, isso também pode ser feito definindo a animateSeriesWhenAxisRangeChanges propriedade como true. A duração dessa alteração também pode ser configurada definindo a transitionDuration propriedade.

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

    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