Angular Minigráfico

    O Ignite UI for Angular Minigráfico é um controle de gráficos leve. Destina-se à renderização em um layout de pequena escala, como em uma célula de grade, mas também pode ser renderizado sozinho. O Sparkline possui vários elementos visuais e recursos correspondentes que podem ser configurados e personalizados, como o tipo de gráfico, marcadores, intervalos, linhas de tendência, plotagem de valor desconhecido e dicas de ferramentas.

    Angular Sparkline Example

    O exemplo a seguir mostra todos os diferentes tipos de Sparkline disponíveis. O tipo é definido definindo a displayType propriedade. Se a displayType propriedade não for especificada, por padrão, o Line tipo será exibido.

    Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

    Sparkline Recommendations

    Is the Sparkline chart right for your project?

    O principal benefício do controle Sparkline em comparação a outros controles de gráficos é que ele pode renderizar em um espaço limitado, como uma célula de grade, com todos os seus elementos visuais exibidos.

    O minigráfico Angular tem a capacidade de marcar os pontos de dados com ícones elípticos para indicar os valores mais altos, mais baixos, primeiro, último e negativo. Os marcadores podem ser personalizados com uma forma, cor ou imagem desejada.

    Sparkline Use Cases

    • Você tem um espaço compacto para exibir um gráfico.
    • Você quer mostrar tendências em uma série de valores, como receita semanal.

    Sparkline 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 Sparkline

    • Você precisa analisar os dados em detalhes.
    • Você precisa exibir cada rótulo dos pontos de dados. Ele só permite mostrar valores altos e baixos no eixo Y, e os primeiros e últimos valores no eixo X.

    Sparkline Data Structure

    • Requer dados unidimensionais.
    • O conjunto de dados deve conter pelo menos dois campos numéricos.
    • O texto nos campos da fonte de dados pode ser usado para exibir o primeiro e o último rótulo no eixo X.

    Sparkline Types

    O minigráfico Angular dá suporte aos seguintes tipos de minigráficos definindo a displayType propriedade de acordo:

    • Line: Exibe o tipo de gráfico de linhas do Minigráfico com dados numéricos, conectando os pontos de dados com segmentos de linha. Pelo menos dois pontos de dados devem ser fornecidos para visualizar os dados no Minigráfico.
    • Area: Exibe o tipo de gráfico de área do Minigráfico com dados numéricos. É como o tipo de linha com etapas adicionais de fechamento da área após cada linha ser desenhada. Pelo menos dois pontos de dados devem ser fornecidos para visualizar os dados no Minigráfico.
    • Column: Exibe o tipo de gráfico de colunas do Minigráfico com dados numéricos. Alguns podem se referir a ele como barras verticais. Esse tipo pode renderizar um único ponto de dados, mas exigiria a especificação da propriedade de intervalo de valores mínimo (mínimo) no Minigráfico para que o ponto de dados único fornecido possa ficar visível, caso contrário, o valor será tratado como o valor mínimo e não ficará visível.
    • WinLoss: esse tipo é semelhante em sua aparência visual ao tipo de gráfico de colunas, no qual o valor de cada coluna é igual ao máximo positivo (para valores positivos) ou ao mínimo negativo (para valor negativo) do conjunto de dados. A ideia é indicar um cenário de vitória ou derrota. Para que o gráfico de ganhos/perdas seja exibido corretamente, o conjunto de dados deve ter valores positivos e negativos. Se o minigráfico WinLoss estiver associado aos mesmos dados que os outros tipos, como o tipo Line, que pode ser associado a uma coleção de valores numéricos, o minigráfico Angular selecionará dois valores da coleção - o mais alto e o mais baixo - e renderizará o minigráfico com base nesses valores.

    Markers

    O minigráfico Angular permite que você mostre marcadores como ícones de cores circulares em sua série para indicar os pontos de dados individuais com base nas coordenadas X/Y. Os marcadores podem ser definidos em minigráficos de tipos de exibição de Line, Area, e Column. O WinLoss tipo de minigráfico atualmente não aceita marcadores. Por padrão, os marcadores não são exibidos, mas podem ser ativados definindo a propriedade de visibilidade do marcador correspondente.

    Os marcadores no minigráfico podem ser colocados em qualquer combinação dos seguintes locais:

    • All: exibe marcadores para todos os pontos de dados no minigráfico.
    • Low: Exibe marcadores no ponto de dados do menor valor. Se houver vários pontos no menor valor, ele será exibido em cada ponto com esse valor.
    • High: Exibe marcadores no ponto de dados do valor mais alto. Se houver vários pontos no valor mais alto, ele será exibido em cada ponto com esse valor.
    • First: exibe um marcador no primeiro ponto de dados no minigráfico.
    • Last: exibe um marcador no último ponto de dados no minigráfico.
    • Negative: exibe marcadores nos pontos de dados negativos plotados no minigráfico.

    Todos os marcadores mencionados acima podem ser personalizados usando a propriedade do tipo de marcador relacionado em aspectos de cor, visibilidade e tamanho. Por exemplo, os Low marcadores acima terão propriedades lowMarkerBrush, lowMarkerVisibility, e lowMarkerSize.

    Normal Range

    O recurso de intervalo normal do minigráfico Angular é uma faixa horizontal que representa algum intervalo significativo predefinido quando os dados estão sendo visualizados. O intervalo normal pode ser definido como uma área sombreada delineada com a cor desejada.

    O intervalo normal pode ser maior do que o ponto de dados máximo ou além, e também pode ser tão fino quanto o tipo de exibição do Line minigráfico, para servir como um indicador de limite, por exemplo. A largura do intervalo normal é determinada pelas três propriedades a seguir, que servem como as configurações mínimas necessárias para exibir o intervalo normal:

    Por padrão, o intervalo normal não é exibido. Quando ativado, o intervalo normal aparece com uma aparência de cor cinza claro, que também pode ser configurada usando a normalRangeFill propriedade.

    Você também pode configurar se deseja mostrar o intervalo normal na frente ou atrás da série plotada no minigráfico Angular definindo a displayNormalRangeInFront propriedade.

    Trendlines

    O minigráfico Angular tem suporte para um intervalo de linhas de tendência que são exibidas como outra camada sobre a camada de minigráfico real. Para exibir um minigráfico, você pode usar a trendLineType propriedade.

    As linhas de tendência são calculadas de acordo com o algoritmo especificado pela trendLineType propriedade usando os valores dos dados aos quais o gráfico está vinculado.

    As linhas de tendência só podem ser exibidas uma de cada vez e, por padrão, a linha de tendência não é exibida.

    O exemplo abaixo mostra todas as linhas de tendência disponíveis por meio do menu suspenso:

    Unknown Value Interpolation

    O Angular Minigráfico pode detectar valores desconhecidos e renderizar o espaço para valores desconhecidos por meio de um algoritmo de interpolação especificado. Se seus dados contiverem valores nulos e você não usar esse recurso, o que significa que nenhuma interpolação é especificada, o valor desconhecido não será plotado.

    Para plotar os valores desconhecidos, você pode definir a unknownValuePlotting propriedade do minigráfico Angular. O exemplo abaixo mostra as diferenças entre os valores da propriedade, permitindo que você a ative ou desative usando uma caixa de unknownValuePlotting seleção:

    Sparkline in Data Grid

    Você pode inserir o minigráfico Angular em uma coluna de modelo da grade de dados ou em outros controles de interface do usuário que dão suporte a modelos. O exemplo de código a seguir mostra como fazer isso:

    Additional Resources

    Você pode encontrar mais informações sobre os tipos de gráficos relacionados nestes tópicos:

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima: