Blazor Chart Data Annotations

    No gráfico Blazor, 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 Blazor completo e comece a criar seus próprios aplicativos em minutos. Baixe-o gratuitamente.

    Blazor Data Annotation Slice Layer Example

    Em Blazor, 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 IgbDataChart 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.

    Blazor Data Annotation Strip Layer Example

    In Blazor, the IgbDataAnnotationStripLayer renders multiple vertical or horizontal strips between 2 values on an axis in the IgbDataChart component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the IgbDataAnnotationStripLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.

    For example, you can use IgbDataAnnotationStripLayer to annotate chart with stock market crashes and changes in federal interest rates.

    Blazor Data Annotation Line Layer Example

    In Blazor, IgbDataAnnotationLineLayer renders multiple lines between 2 points in plot area of the IgbDataChart component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties.

    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.

    Blazor Data Annotation Rect Layer Example

    In Blazor, the IgbDataAnnotationRectLayer renders multiple rectangles defined by starting and ending points in plot area of the IgbDataChart component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties.

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

    Blazor Data Annotation Band Layer Example

    In Blazor, the IgbDataAnnotationBandLayer renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the IgbDataChart component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.

    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 |: CenterLabelXDisplayMode essas 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: This property is a mapping to the data column representing the axis label for the starting position of IgbDataAnnotationBandLayer, IgbDataAnnotationLineLayer, IgbDataAnnotationRectLayer on the y-axis.
    • EndLabelYMemberPath: This property is a mapping to the data column representing the axis label for the ending position of IgbDataAnnotationBandLayer, IgbDataAnnotationLineLayer, IgbDataAnnotationRectLayer on the y-axis.