Web Components Anotações de dados do gráfico (beta)
No gráfico Web Components, 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.
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 completo Web Components e comece a criar seus próprios aplicativos em minutos. Baixe-o gratuitamente.
Web Components Data Annotation Slice Layer Example
Em Web Components, o link:{DataChartLink}. DataAnnotationSliceLayer.html[DataAnnotationSliceLayer] renderiza várias linhas verticais ou horizontais que dividem o gráfico em vários valores de um eixo no IgcDataChartComponent 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 TargetAxis como eixo y renderizará a camada de anotação de dados como fatias horizontais ou definir a propriedade TargetAxis como eixo x renderizará a camada de anotação de dados como fatias verticais. Da mesma forma que todas as séries, o DataAnnotationSliceLayer também dá suporte à associação de dados por meio da DataSource propriedade que pode ser definida como uma coleção de itens de dados que deve ter pelo menos 1 coluna de dados numéricos mapeada para a AnnotationValueMemberPath 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.
Web Components Data Annotation Strip Layer Example
No Web Components, o renderiza DataAnnotationStripLayer várias faixas verticais ou horizontais entre 2 valores em um eixo no IgcDataChartComponent componente. Essa camada de anotação de dados pode ser usada para anotar a duração de eventos (por exemplo, crash do mercado de ações) no eixo x ou intervalo importante de valores no eixo y. Definir a propriedade TargetAxis como eixo y renderizará a camada de anotação de dados como faixas horizontais ou definir a propriedade TargetAxis como eixo x renderizará a camada de anotação de dados como faixas verticais. Da mesma forma que todas as séries, o DataAnnotationStripLayer também dá suporte à associação de dados por meio da DataSource propriedade que pode ser definida como uma coleção de itens de dados que deve ter pelo menos 1 coluna de dados numéricos mapeada para a propriedade AnnotationValueMemberPath.
Por exemplo, você pode usar DataAnnotationStripLayer para anotar gráfico com quedas do mercado de ações e mudanças nas taxas de juros federais.
Web Components Data Annotation Line Layer Example
Em Web Components, DataAnnotationLineLayer renderiza várias linhas entre 2 pontos na área de plotagem do IgcDataChartComponent componente. Essa camada de anotação de dados pode ser usada para anotar o gráfico de ações com crescimento e declínio nos preços das ações. Da mesma forma que todas as séries, o DataAnnotationLineLayer também dá suporte à associação de dados por meio da DataSource propriedade que pode ser definida como uma coleção de itens de dados que devem ter pelo menos 4 colunas de dados numéricos que representam as coordenadas x/y do ponto inicial e do ponto final das linhas. Os pontos de partida devem ser mapeados usando as propriedades e StartValueXMemberPath StartValueYMemberPath e os pontos finais devem ser mapeados usando EndValueXMemberPath as propriedades and EndValueYMemberPath.
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.
Web Components Data Annotation Rect Layer Example
No Web Components, o DataAnnotationRectLayer renderiza vários retângulos definidos por pontos inicial e final na área de plotagem do IgcDataChartComponent componente. Essa camada de anotação de dados pode ser usada para anotar a região da área do gráfico, como padrões de baixa nos preços das ações. Da mesma forma que todas as séries, o DataAnnotationRectLayer também dá suporte à associação de dados por meio da DataSource propriedade que pode ser definida como uma coleção de itens de dados que deve ter pelo menos 4 colunas de dados numéricos que representam coordenadas x/y do ponto inicial e do ponto final dos retângulos. Os pontos de partida devem ser mapeados usando as propriedades e StartValueXMemberPath StartValueYMemberPath e os pontos finais devem ser mapeados usando EndValueXMemberPath as propriedades and EndValueYMemberPath.
Por exemplo, você pode usar DataAnnotationRectLayer para anotar padrões de baixa e lacunas nos preços das ações no eixo y.
Web Components Data Annotation Band Layer Example
No Web Components, o DataAnnotationBandLayer renderiza vários retângulos assimétricos (paralelogramo de forma livre) entre 2 pontos na área de plotagem do IgcDataChartComponent componente. Essa camada de anotação de dados pode ser usada para anotar a faixa de crescimento e declínio nos preços das ações. Da mesma forma que todas as séries, o DataAnnotationBandLayer também dá suporte à associação de dados por meio da DataSource propriedade que pode ser definida como uma coleção de itens de dados que devem ter pelo menos 4 colunas de dados numéricos que representam coordenadas x/y do ponto inicial e final das linhas. Os pontos de partida devem ser mapeados usando StartValueXMemberPath propriedades e StartValueYMemberPath e os pontos finais devem ser mapeados usando EndValueXMemberPath propriedades e EndValueYMemberPath. Além disso, você pode especificar a espessura/tamanho do retângulo distorcido associando a coluna de dados numéricos à 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 um DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer habilitado.DataSource: Essa propriedade vincula 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 de DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.StartValueYMemberPath: Esta propriedade é um mapeamento para o nome da coluna de dados com posições y para o início do DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.EndValueXMemberPath: Essa propriedade é um mapeamento para a coluna de dados com posições x para o final de DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.EndValueYMemberPath: Esta propriedade é um mapeamento para a coluna de dados com posições y para o final do DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.StartLabelXMemberPath: essa propriedade é um mapeamento para a coluna de dados que representa o rótulo de sobreposição para a posição inicial do xAxis ao longo do eixo.StartLabelXDisplayMode|StartLabelYDisplayMode|EndLabelXDisplayMode|EndLabelYDisplayMode|:CenterLabelXDisplayModeessas propriedades especificam o que os rótulos de anotação devem ser exibidos no início, no final ou no centro da forma de anotação, por exemplo, valor de dados mapeados, rótulo de dados mapeados, valor do eixo ou ocultam um determinado rótulo de anotação.StartLabelYMemberPath: Esta propriedade é um mapeamento para a coluna de dados que representa o rótulo do eixo para a posição inicial deDataAnnotationBandLayer,DataAnnotationLineLayer,DataAnnotationRectLayerno eixo y.EndLabelYMemberPath: Esta propriedade é um mapeamento para a coluna de dados que representa o rótulo do eixo para a posição final deDataAnnotationBandLayer,DataAnnotationLineLayer,DataAnnotationRectLayerno eixo y.