Angular Gráfico de Linhas

    O gráfico de linhas Ignite UI for Angular ou gráfico de linhas é um tipo de gráfico de categoria que mostra os valores de dados contínuos representados por pontos conectados por segmentos de linha reta de uma ou mais quantidades durante um período de tempo. É frequentemente usado para mostrar tendências e realizar análises comparativas. O eixo Y (rótulos no lado esquerdo) mostra um valor numérico, enquanto o eixo X (rótulos inferiores) mostra uma série temporal ou categoria de comparação. Você pode incluir um ou mais conjuntos de dados para comparar, o que seria renderizado como várias linhas no gráfico.

    Angular Line Chart Example

    Você pode criar o Gráfico de Linhas Angular noIgxCategoryChartComponent controle vinculando seus dados àItemsSource propriedade e definindochartType a propriedade comoLine enum, como mostrado no exemplo abaixo.

    Line Chart Recommendations

    Are Angular Line Charts right for your project?

    • Diferente de um gráfico de área, o gráfico de linhas não preenche a área entre o eixo X (eixo inferior) e a linha.
    • O gráfico de linhas Angular é idêntico ao gráfico de spline Angular em todos os aspectos, exceto que a linha que conecta os pontos de dados não tem interpolação e suavização de spline para melhorar a apresentação dos dados.

    Um Line Chart inclui diversas variantes com base em seus dados ou como você quer contar a história correta com seus dados. Elas incluem:

    • Gráfico de linhas em camadas
    • Gráfico de linhas empilhadas
    • Gráfico de linhas escalonadas
    • Gráfico de linha polar
    • Gráfico de 100 linhas empilhadas

    Line Chart Use Cases

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

    • Tenha um conjunto de dados grande e de alto volume que se adapte bem às interações do gráfico, como panorâmica, zoom e detalhamento.
    • É preciso comparar as tendências ao longo do tempo.
    • Quer mostrar a diferença entre duas ou mais séries de dados.
    • Deseja mostrar comparações cumulativas de partes e todo de categorias distintas.
    • É necessário mostrar tendências de dados para uma ou mais categorias para análise comparativa.
    • Precisa visualizar dados detalhados de séries temporais.

    Line Chart Best Practices

    • Sempre inicie o eixo Y (eixo esquerdo ou direito) em 0 para que a comparação de dados seja precisa.
    • Ordene os dados de séries temporais da esquerda para a direita.
    • Use atributos visuais como linhas sólidas para mostrar uma série de dados.

    When Not to Use Line Chart

    • Você tem muitas (mais de 7 ou 10) séries de dados. Seu objetivo é garantir que o gráfico seja legível.
    • Dados de séries temporais têm valores semelhantes (dados do mesmo período), o que torna impossível diferenciar linhas sobrepostas.

    Line Chart Data Structure

    • A fonte de dados deve ser uma matriz ou uma lista de itens de dados (para séries únicas).
    • A fonte de dados deve ser uma matriz de matrizes ou uma lista de listas (para várias séries).
    • A fonte de dados deve conter pelo menos um item de dados.
    • Todos os itens de dados devem conter pelo menos uma coluna de dados (string ou data e hora).
    • Todos os itens de dados devem conter pelo menos uma coluna de dados numéricos.

    Angular Line Chart with Single Series

    O gráfico de linhas Angular é frequentemente usado para mostrar a mudança de valor ao longo do tempo, como a quantidade de eletricidade renovável produzida desde 2009 em um período de dez anos, como mostramos no exemplo abaixo.

    Você pode criar esse tipo de gráfico noIgxCategoryChartComponent controle vinculando seus dados e definindo achartType propriedade paraLine, como mostrado no exemplo abaixo:

    Angular Line Chart with Multiple Series

    Como o gráfico de linhas Angular permite combinar várias séries e comparar ou ver como elas mudam ao longo do tempo, vamos ver como é fácil conseguir isso. Tudo o que precisamos fazer é vincular a uma fonte de dados contendo os dados da China e dos EUA, e o gráfico de linhas será atualizado automaticamente para se ajustar aos dados adicionais.

    Você pode criar esse tipo de gráfico noIgxCategoryChartComponent controle vinculando seus dados e definindo achartType propriedade paraLine, como mostrado no exemplo abaixo:

    Angular Line Chart with Live Data

    O gráfico de linhas Angular é capaz de lidar com grandes volumes de dados, variando em milhões de pontos de dados, e atualizá-los a cada poucos milissegundos, conforme demonstrado na demonstração a seguir.

    Neste exemplo, estamos transmitindo dados ao vivo para o gráfico de linhas Angular em um intervalo de sua escolha. Você pode definir os pontos de dados de 5.000 a 1 milhão e atualizar o gráfico para otimizar a escala com base no dispositivo em que você está renderizando o gráfico.

    Você pode criar esse tipo de gráfico noIgxCategoryChartComponent controle vinculando seus dados e definindo achartType propriedade paraLine, como mostrado no exemplo abaixo:

    Angular Styling Line Chart

    Depois que nosso gráfico estiver configurado, talvez queiramos fazer algumas personalizações de estilo, como alterar as cores das linhas, alterar a família da fonte da legenda e/ou aumentar o tamanho dos rótulos dos eixos para facilitar a leitura.

    Você pode criar esse tipo de gráfico noIgxCategoryChartComponent controle vinculando seus dados e definindo achartType propriedade paraLine, como mostrado no exemplo abaixo:

    Você também pode criar uma linha tracejada dentro doIgxLineSeriesComponent usando aIgxDataChartComponent e definindo adashArray propriedade na série. Essa propriedade usa um array de números que descreve o comprimento dos traços resultantes na linha.

    O exemplo a seguir demonstra o uso dodashArray em umIgxLineSeriesComponent em:IgxDataChartComponent​

    Advanced Types of Line Charts

    As seções seguintes explicam tipos mais avançados de Gráficos de Linhas Angular que podem ser criados usando oIgxDataChartComponent controle em vez doIgxCategoryChartComponent controle com API simplificada.

    Angular Stacked Line Chart

    O Gráfico de Linhas Empilhadas é frequentemente usado para mostrar a variação de valor ao longo do tempo, como a quantidade de eletricidade renovável produzida por vários anos entre regiões. Você pode criar esse tipo de gráfico noIgxDataChartComponent controle vinculando seus dados a umIgxStackedLineSeriesComponent, como mostrado no exemplo abaixo:

    Angular Stacked 100% Line Chart

    O Stacked 100% Line Chart é idêntico ao Stacked Line Chart em todos os aspectos, exceto no tratamento dos valores no eixo y. Em vez de apresentar uma representação direta dos dados, o Stacked 100% Line Chart apresenta os dados em termos de porcentagem da soma de todos os valores em um ponto de dados. O exemplo abaixo mostra um estudo feito para tráfego de compras on-line por departamentos via tablet, telefone e computadores pessoais.

    Você pode criar esse tipo de gráfico noIgxDataChartComponent controle vinculando seus dados a umIgxStacked100LineSeriesComponent, como mostrado no exemplo abaixo:

    Angular Radial Line Chart

    O Gráfico de Linha Radial pertence a um grupo de gráficos radiais e tem o formato de um polígono não preenchido que é limitado por uma coleção de linhas retas conectando pontos de dados. Este tipo de gráfico usa o mesmo conceito de plotagem de dados que o Gráfico de Linha, mas envolve os pontos de dados em torno de um eixo circular em vez de esticá-los horizontalmente.

    Você pode criar esse tipo de gráfico noIgxDataChartComponent controle vinculando seus dados a umIgxRadialLineSeriesComponent, como mostrado no exemplo abaixo:

    Angular Polar Line Chart

    O Gráfico de Linha Polar pertence a um grupo de gráficos polares e é renderizado usando uma coleção de linhas retas conectando pontos de dados em um sistema de coordenadas polares (ângulo/raio). Os Gráficos de Linha Polar usam os mesmos conceitos de plotagem de dados que o Gráfico de Linha de Dispersão, com a diferença de que a visualização envolve pontos de dados em torno de um círculo em vez de esticá-los horizontalmente.

    Você pode criar esse tipo de gráfico noIgxDataChartComponent controle vinculando seus dados a umIgxPolarLineSeriesComponent, como 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:

    Tipo de gráfico Nome do controle Membros da API
    Linha IgxCategoryChartComponent chartType = Line
    Linha Polar IgxDataChartComponent IgxPolarLineSeriesComponent
    Linha Radial IgxDataChartComponent IgxRadialLineSeriesComponent
    Linha empilhada IgxDataChartComponent IgxStackedLineSeriesComponent
    Linha 100% empilhada IgxDataChartComponent IgxStacked100LineSeriesComponent