React Anotações de dados do gráfico

    No gráfico React, as camadas de anotação de dados permitem que você anote dados plotados no Gráfico de Dados com linhas inclinadas, linhas verticais/horizontais (também conhecidas como fatias de eixo), faixas verticais/horizontais (visando eixos específicos), retângulos e até paralelogramos (também conhecidos como bandas). Com a associação de dados suportada, você pode criar quantas anotações quiser para personalizar seus gráficos. Além disso, você pode combinar diferentes camadas de anotação e sobrepor texto dentro da área de plotagem a eventos, padrões e regiões importantes anotados em seus dados.

    [!Note] These features are designed to support cartesian axes and does not currently support radius or angle axes.

    Por exemplo, você pode anotar os preços das ações com eventos e padrões de ações.

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

    React Data Annotation Slice Layer Example

    Em React, o link:{DataChartLink}. DataAnnotationSliceLayer.html[DataAnnotationSliceLayer] renderiza múltiplas linhas verticais ou horizontais que cortam o gráfico em múltiplos valores de um eixo noIgrDataChart componente. Essa camada de anotação de dados é frequentemente usada para anotar eventos importantes (por exemplo, relatórios trimestrais da empresa) no eixo x ou valores importantes no eixo y. Definir a propriedade EixoObjecto no eixo y renderizará a camada de anotação de dados como fatias horizontais ou definir a propriedade EixoObjecto no eixo x renderizará a camada de anotação de dados como fatias verticais. De forma semelhante a todas as séries, o DataAnnotationSliceLayer também suporta a vinculação de dados por meio daDataSource propriedade que pode ser definida para uma coleção de itens de dados que devem ter pelo menos 1 coluna numérica de dados mapeada para aAnnotationValueMemberPath propriedade.

    Por exemplo, você pode usar DataAnnotationSliceLayer para anotar preços de ações com eventos importantes, como desdobramento de ações e resultados de relatórios de ganhos.

    React Data Annotation Strip Layer Example

    Em React, eleIgrDataAnnotationStripLayer renderiza múltiplas faixas verticais ou horizontais entre 2 valores em um eixo doIgrDataChart componente. Essa camada de anotação de dados pode ser usada para anotar a duração de eventos (por exemplo, queda do mercado de ações) no eixo x ou na faixa importante de valores no eixo y. Definir a propriedade EixoObjecto no eixo y renderizará a camada de anotação de dados como faixas horizontais ou definir a propriedade EixoObjecto no eixo x renderizará a camada de anotação de dados como faixas verticais. De forma semelhante a todas as séries, tambémIgrDataAnnotationStripLayer suporta vinculação de dados por meio daDataSource propriedade que pode ser definida para uma coleção de itens de dados que devem ter pelo menos 1 coluna numérica mapeada para a propriedade AnnotationValueMemberPath.

    Por exemplo, você pode usarIgrDataAnnotationStripLayer para anotar gráficos com quedas do mercado de ações e mudanças nas taxas de juros federais.

    React Data Annotation Line Layer Example

    Em React,IgrDataAnnotationLineLayer renderiza múltiplas linhas entre 2 pontos na área do plot doIgrDataChart componente. Essa camada de anotação de dados pode ser usada para anotar o gráfico de ações com crescimento e queda nos preços das ações. De forma semelhante a todas as séries, a DataAnnotationLineLayer também suporta a vinculação de dados por meio daDataSource propriedade que pode ser definida para uma coleção de itens de dados que devem ter pelo menos 4 colunas numéricas representando coordenadas x/y do ponto inicial e final das linhas. Os pontos de partida devem ser mapeados usando propriedades usandoStartValueXMemberPath eStartValueYMemberPath e os pontos finais devem ser mapeados usandoEndValueXMemberPath propriedades eEndValueYMemberPath.

    Por exemplo, você pode usar DataAnnotationLineLayer para anotar padrões de crescimento e declínio nos preços das ações e na alta e baixa de 52 semanas dos preços das ações no eixo y.

    React Data Annotation Rect Layer Example

    Em React, eleIgrDataAnnotationRectLayer renderiza múltiplos retângulos definidos por pontos de início e término na área do plot doIgrDataChart componente. Essa camada de anotação de dados pode ser usada para anotar regiões da área do gráfico, como padrões de baixa nos preços das ações. Semelhante a todas as séries, o DataAnnotationRectLayer também suporta vinculação de dados por meio daDataSource propriedade que pode ser definida para uma coleção de itens de dados que devem ter pelo menos 4 colunas numéricas representando coordenadas x/y do ponto inicial e final dos retângulos. Os pontos de partida devem ser mapeados usando propriedades usandoStartValueXMemberPath eStartValueYMemberPath e os pontos finais devem ser mapeados usandoEndValueXMemberPath propriedades eEndValueYMemberPath.

    Por exemplo, você pode usar DataAnnotationRectLayer para anotar padrões de baixa e lacunas nos preços das ações no eixo y.

    React Data Annotation Band Layer Example

    Em React, eleIgrDataAnnotationBandLayer renderiza múltiplos retângulos enviesados (paralelogramo livre) entre 2 pontos na área do plot doIgrDataChart componente. Essa camada de anotação de dados pode ser usada para anotar a faixa de crescimento e queda nos preços das ações. Semelhante a todas as séries, a DataAnnotationBandLayer também suporta vinculação de dados por meio daDataSource propriedade que pode ser definida para uma coleção de itens de dados que devem ter pelo menos 4 colunas numéricas representando coordenadas x/y do ponto inicial e final das linhas. Os pontos de partida devem ser mapeados usandoStartValueXMemberPath propriedades eStartValueYMemberPath os pontos finais devem ser mapeados usandoEndValueXMemberPath propriedades de andEndValueYMemberPath. Além disso, você pode especificar a espessura/tamanho do retângulo enviesado vinculando a coluna numérica de dados à propriedade AnnotationBreadthMemberPath.

    Por exemplo, você pode usar DataAnnotationBandLayer para anotar o intervalo de crescimento nos preços das ações.

    API References

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

    • TargetAxis: Essa propriedade especifica qual eixo deve ter uma DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer ativada.
    • DataSource: Essa propriedade vincula os dados à camada de anotação para fornecer a forma precisa.
    • StartValueXMemberPath: Essa propriedade é um mapeamento para o nome da coluna de dados com posições x para o início da DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
    • StartValueYMemberPath: Esta propriedade é um mapeamento para o nome da coluna de dados com posições y para o início da DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
    • EndValueXMemberPath: Esta propriedade é um mapeamento para a coluna de dados com posições x para o final da DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
    • EndValueYMemberPath: Essa propriedade é um mapeamento para a coluna de dados com posições y para o final da DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
    • StartLabelXMemberPath: Essa propriedade é um mapeamento para a coluna de dados que representa o rótulo sobreposto para a posição inicial do eixo x ao longo do eixo.
    • StartLabelXDisplayMode|StartLabelYDisplayMode |EndLabelXDisplayMode ||EndLabelYDisplayMode |:CenterLabelXDisplayMode Essas propriedades especificam o que os rótulos de anotação devem exibir no início, término ou centro da forma de anotação, por exemplo, valor de dados mapeados, rótulo de dados mapeados, valor de eixo ou ocultar um determinado rótulo de anotação.
    • StartLabelYMemberPath: Essa propriedade é um mapeamento para a coluna de dados que representa o rótulo do eixo para a posição inicial deIgrDataAnnotationBandLayer,IgrDataAnnotationLineLayer,IgrDataAnnotationRectLayer no eixo y.
    • EndLabelYMemberPath: Essa propriedade é um mapeamento para a coluna de dados que representa o rótulo do eixo para a posição final deIgrDataAnnotationBandLayer,IgrDataAnnotationLineLayer,IgrDataAnnotationRectLayer no eixo y.