Angular Gráfico de Barras

O Gráfico de Barras Ignite UI for Angular, Gráfico de Barras ou Gráfico de Barras Horizontais está entre os tipos de gráficos de categoria mais comuns usados para comparar rapidamente a frequência, a contagem, o total ou a média de dados em diferentes categorias com dados codificados por barras horizontais com alturas iguais, mas comprimentos diferentes. Este gráfico é ideal para mostrar variações no valor de um item ao longo do tempo. Os dados são representados usando uma coleção de retângulos que se estendem da esquerda para a direita do gráfico em direção aos valores dos pontos de dados. O gráfico de barras é muito semelhante ao gráfico de colunas, exceto que o gráfico de barras é renderizado com rotação de 90 graus no sentido horário e, portanto, tem orientação horizontal (da esquerda para a direita), enquanto o gráfico de colunas tem orientação vertical (para cima e para baixo)

Angular Bar Chart Example

Você pode criar Angular Gráfico de Barras no IgxDataChartComponent controle associando suas fontes de dados a vários IgxBarSeriesComponent, conforme mostrado no exemplo abaixo:

Bar Chart Recommendations

Are Angular Bar Charts right for your project?

Angular gráfico de barras inclui várias variantes com base em seus dados ou em como você deseja contar a história correta com seus dados. Esses incluem:

Gráfico de barras agrupadas
Gráfico de barras empilhadas
Gráfico de barras polares
Gráfico de barras empilhadas de 100

Bar Chart Use Cases

Existem vários casos de uso comuns para escolher um gráfico de barras:

Você precisa mostrar tendências ao longo do tempo ou uma mudança de valor numérico em uma categoria de dados.
Você precisa comparar valores de dados de 1 ou mais séries de dados.
Você quer mostrar uma comparação entre parte e todo.
Você quer mostrar a porcentagem superior ou inferior das categorias.
Analisando múltiplos pontos de dados agrupados em subcategorias (Barra Empilhada).

Esses casos de uso são comumente usados para os seguintes cenários:

Gestão de vendas.
Gestão de estoque.
Gráficos de ações.
Qualquer valor de sequência de caracteres que compara um valor numérico ou um valor de série temporal.

Bar Chart Best Practices:

Comece seu eixo numérico em 0.
Use uma única cor para as barras.
Certifique-se de que o espaço que separa cada barra seja metade da largura da própria barra.
Certifique-se de que a classificação ou comparação de categorias ordenadas (itens) esteja classificada em ordem crescente ou decrescente.
Alinhe os valores da categoria à direita no eixo Y (rótulos do lado esquerdo do gráfico) para facilitar a leitura.

When Not to Use Bar Chart

Você tem muitos dados, então o eixo Y não cabe no espaço ou não é legível.
Você precisa de uma análise detalhada de séries temporais - considere um gráfico de linhas com uma série temporal para esse tipo de dados.

Bar Chart Data Structure:

A fonte de dados deve ser uma matriz ou uma lista de itens de dados.
A fonte de dados deve conter pelo menos um item de dados.
A lista deve conter pelo menos uma coluna de dados (string ou data e hora).
A lista deve conter pelo menos uma coluna de dados numéricos.

Angular Bar Chart with Single Series

O Gráfico de Barras pertence a um grupo de Séries de Categorias e é renderizado usando uma coleção de retângulos que se estendem da esquerda para a direita do gráfico em direção aos valores dos pontos de dados. Você pode criar esse tipo de gráfico no IgxDataChartComponent controle associando seus dados a um IgxBarSeriesComponent, conforme mostrado no exemplo abaixo:

Angular Bar Chart with Multiple Series

O gráfico de barras é capaz de renderizar várias barras por categoria para fins de comparação. Neste exemplo, o gráfico de barras está comparando a receita de bilheteria entre franquias de filmes populares. Você pode criar esse tipo de gráfico no IgxDataChartComponent controle associando seus dados a múltiplos IgxBarSeriesComponent, conforme mostrado no exemplo abaixo:

Angular Bar Chart Styling

O gráfico de barras pode ser estilizado e permite a capacidade de usar valores de anotação para cada barra, por exemplo, para demonstrar comparações percentuais. Você pode criar esse tipo de gráfico no IgxDataChartComponent controle associando seus dados a a IgxBarSeriesComponent e adicionando a IgxCalloutLayerComponent, conforme mostrado no exemplo abaixo:

Angular Stacked Bar Chart

Um Stacked Bar Chart, ou Stacked Bar Graph, é um tipo de gráfico de categoria que é usado para comparar a composição de diferentes categorias de dados exibindo fragmentos de tamanhos diferentes nas barras horizontais do gráfico. O comprimento de cada barra, ou pilha de fragmentos, é proporcional ao seu valor geral.

O Stacked Bar Chart difere do Bar Chart porque os pontos de dados que representam seus dados são empilhados um ao lado do outro horizontalmente para agrupar visualmente seus dados. Cada pilha pode conter valores positivos e negativos. Todos os valores positivos são agrupados no lado positivo do eixo X, e todos os valores negativos são agrupados no lado negativo do eixo X.

Você pode criar esse tipo de gráfico no IgxDataChartComponent controle associando seus dados a um IgxStackedBarSeriesComponent, conforme mostrado no exemplo abaixo:

Angular Stacked 100% Bar Chart

O Angular Gráfico de Barras 100% Empilhadas é idêntico ao Gráfico de Barras Empilhadas Angular em todos os aspectos, exceto no tratamento dos valores no Eixo X (rótulos inferiores do gráfico). Em vez de apresentar uma representação direta dos dados, o gráfico de 100 barras empilhadas apresenta os dados em termos de porcentagem da soma de todos os valores em um ponto de dados.

Você pode criar esse tipo de gráfico no IgxDataChartComponent controle associando seus dados a um IgxStacked100BarSeriesComponent, conforme mostrado no exemplo 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: