Angular sobreposições de gráficos

    O AngularIgxDataChartComponent permite posicionar linhas horizontais ou verticais em um único valor numérico que você define por meio do uso doIgxValueOverlayComponent. Isso pode ajudar você a visualizar dados como a média ou mediana de uma série específica.

    Angular Value Overlay Example

    O exemplo a seguir descreve um gráfico de colunas com algumas sobreposições de valores horizontais plotadas.

    Angular Value Overlay Properties

    Diferente de outros tipos de série que usam aItemsSource para vinculação de dados, a sobreposição de valores usa umaValueMemberPath propriedade para vincular um único valor numérico. Além disso, a sobreposição de valores exige que você defina um únicoaxis para usar. Se você usar um eixo X, a sobreposição de valores será uma linha vertical, e se usar um eixo Y, será uma linha horizontal.

    Ao usar um eixo numérico X ou Y, aValueMemberPath propriedade deve refletir o valor numérico real no eixo onde você deseja que a sobreposição de valor seja desenhada. Ao usar um eixo de categoria X ou Y, oValueMemberPath deve refletir o índice da categoria na qual você deseja que a sobreposição de valores apareça.

    Ao usar a sobreposição de valor com um eixo de ângulo numérico, ele aparecerá como uma linha do centro do gráfico e, ao usar um eixo de raio numérico, ele aparecerá como um círculo.

    IgxValueOverlayComponentPropriedades de aparência são herdadas deIgxSeriesComponent e, porbrush exemplo,thickness estão disponíveis e funcionam da mesma forma que com outros tipos de séries.

    Também é possível mostrar uma anotação de eixo em aIgxValueOverlayComponent para mostrar o valor da sobreposição no eixo proprietário. Para mostrar isso, você pode definir aisAxisAnnotationEnabled propriedade como verdadeira.

    Angular Value Layer

    Os componentes de gráficos Angular também expõem a capacidade de usar linhas de valor para destacar diferentes pontos focais de seus dados, como valores mínimos, máximos e médios.

    Aplicar osIgxValueLayerComponent componentes em eIgxCategoryChartComponent​IgxFinancialChartComponent é feito definindo avalueLines propriedade no gráfico. Essa propriedade reúne uma coleção daValueLayerValueMode enumeração. Você pode misturar e combinar múltiplas camadas de valor no mesmo gráfico adicionando múltiplasValueLayerValueMode enumerações àvalueLines coleção do gráfico.

    Em ,IgxDataChartComponent isso é feito adicionando aIgxValueLayerComponent àIgxSeriesComponent coleção do gráfico e então definindo aValueMode propriedade para uma dasValueLayerValueMode enumerações. Cada uma dessas enumerações e o seu significado estão listados abaixo:

    • Auto: O modo padrão de valor daValueLayerValueMode enumeração.
    • Average: Aplica potencialmente múltiplas linhas de valor para indicar o valor médio de cada série plotada no gráfico.
    • GlobalAverage: Aplica uma única linha de valor para chamar a média de todos os valores da série no gráfico.
    • GlobalMaximum: Aplica uma única linha de valor para chamar o valor absoluto máximo de todos os valores da série no gráfico.
    • GlobalMinimum: Aplica uma única linha de valor para indicar o valor mínimo absoluto de todos os valores da série no gráfico.
    • Maximum: Aplica potencialmente múltiplas linhas de valor para indicar o valor máximo de cada série representada no gráfico.
    • Minimum: Aplica potencialmente múltiplas linhas de valor para indicar o valor mínimo de cada série representada no gráfico.

    Se você quiser evitar que qualquer série específica seja levada em conta ao usar oIgxValueLayerComponent elemento, pode definir atargetSeries propriedade na camada. Isso vai forçar a camada a mirar na série que você definiu. Você pode ter quantosIgxValueLayerComponent elementos quiser em umIgxDataChartComponent só.

    O exemplo a seguir demonstra o uso da diferençavalueLines noIgxCategoryChartComponent:

    Angular Financial Overlays

    Você também pode plotar sobreposições e indicadores financeiros integrados em Angular gráfico de ações.

    Chart Overlay Text

    As camadas AngularIgxValueOverlayComponent eIgxValueLayerComponent todas as Anotações de Dados podem renderizar texto sobreposto personalizado dentro da área de plot do componente XamDataChart. Você pode usar esse texto sobreposto para anotar eventos importantes (por exemplo, relatórios trimestrais da empresa) no eixo x ou valores importantes no eixo y em relação às camadas.

    Por exemplo, você pode usarIgxDataAnnotationSliceLayerComponent,IgxValueOverlayComponent, eIgxValueLayerComponent para mostrar texto sobreposto.

    Styling Overlay Text

    Este exemplo de código mostra como estilizar e personalizar o Texto Sobreposto noIgxDataAnnotationSliceLayerComponent,IgxValueOverlayComponent, eIgxValueLayerComponent.

    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: