Blazor Anotaciones de datos de gráficos
En el gráfico de Blazor, las capas de anotación de datos le permiten anotar datos trazados en Gráfico de datos con líneas inclinadas, líneas verticales/horizontales (también conocidas como cortes de eje), franjas verticales/horizontales (dirigidas a ejes específicos), rectángulos e incluso paralelogramos (también conocidos como bandas). Con el enlace de datos compatible, puede crear tantas anotaciones como desee para personalizar sus gráficos. Además, puede combinar diferentes capas de anotación y puede superponer texto dentro del área de trazado para anotar eventos, patrones y regiones importantes en sus datos.
[!Note] These features are designed to support cartesian axes and does not currently support radius or angle axes.
Por ejemplo, puede anotar los precios de las acciones con eventos y patrones de acciones.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas Blazor completo y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Blazor Data Annotation Slice Layer Example
En Blazor, el enlace:{DataChartLink}. DataAnnotationSliceLayer.html[DataAnnotationSliceLayer] renderiza múltiples líneas verticales u horizontales que cortan el gráfico en varios valores de un eje dentro delIgbDataChart componente. Esta capa de anotación de datos se utiliza a menudo para anotar eventos importantes (por ejemplo, informes trimestrales de la empresa) en el eje x o valores importantes en el eje y. Configurar la propiedad Eje Objetivo en eje y renderizará la capa de anotación de datos como cortes horizontales o establecer la propiedad Eje Objetivo en eje x renderizará la capa de anotación de datos como cortes verticales. De forma similar a todas las series, DataAnnotationSliceLayer también soporta la vinculación de datos mediante laDataSource propiedad que puede configurarse en una colección de elementos de datos que deberían tener al menos una columna numérica de datos asignada a laAnnotationValueMemberPath propiedad.
Por ejemplo, puede usar DataAnnotationSliceLayer para anotar los precios de las acciones con eventos importantes, como la división de acciones y los informes de resultados de ganancias.
Blazor Data Annotation Strip Layer Example
En Blazor, seIgbDataAnnotationStripLayer renderiza varias tiras verticales u horizontales entre 2 valores en un eje dentro delIgbDataChart componente. Esta capa de anotación de datos puede utilizarse para anotar la duración de eventos (por ejemplo, el desplome bursátil) en el eje x o en un rango importante de valores en el eje y. Configurar la propiedad Eje Objetivo en eje y renderizará la capa de anotación de datos como tiras horizontales o establecer la propiedad Eje Objetivo en eje x renderizará la capa de anotación de datos como tiras verticales. De forma similar a todas las series,IgbDataAnnotationStripLayer también soporta la vinculación de datos mediante laDataSource propiedad que puede configurarse en una colección de elementos de datos que deben tener al menos una columna numérica de datos asignada a la propiedad AnnotationValueMemberPath.
Por ejemplo, puedes usarIgbDataAnnotationStripLayer para anotar gráficos con los desplomes bursátiles y los cambios en los tipos de interés federales.
Blazor Data Annotation Line Layer Example
En Blazor,IgbDataAnnotationLineLayer renderiza múltiples líneas entre 2 puntos en el área de la gráfica delIgbDataChart componente. Esta capa de anotación de datos puede utilizarse para anotar el gráfico de acciones con el crecimiento y la caída de los precios de las acciones. De forma similar a todas las series, DataAnnotationLineLayer también soporta la vinculación de datos mediante laDataSource propiedad que puede establecerse en una colección de elementos de datos que deben tener al menos 4 columnas numéricas de datos que representen las coordenadas x/y del punto de inicio y el punto final de las líneas. Los puntos de inicio deben mapearse usando las propiedades usandoStartValueXMemberPath yStartValueYMemberPath los puntos finales deben mapearse usandoEndValueXMemberPath propiedades yEndValueYMemberPath.
Por ejemplo, puede usar DataAnnotationLineLayer para anotar los patrones de crecimiento y disminución en los precios de las acciones y los máximos y mínimos de 52 semanas de los precios de las acciones en el eje Y.
Blazor Data Annotation Rect Layer Example
En Blazor, renderizaIgbDataAnnotationRectLayer múltiples rectángulos definidos por puntos de inicio y fin en el área de trazado delIgbDataChart componente. Esta capa de anotación de datos puede utilizarse para anotar regiones del área del gráfico, como patrones bajistas en los precios de las acciones. De forma similar a todas las series, la DataAnnotationRectLayer también soporta la vinculación de datos mediante laDataSource propiedad que puede establecerse en una colección de elementos de datos que deben tener al menos 4 columnas numéricas de datos que representen las coordenadas x/y del punto de inicio y el punto final de los rectángulos. Los puntos de inicio deben mapearse usando las propiedades usandoStartValueXMemberPath yStartValueYMemberPath los puntos finales deben mapearse usandoEndValueXMemberPath propiedades yEndValueYMemberPath.
Por ejemplo, puede usar DataAnnotationRectLayer para anotar patrones bajistas y brechas en los precios de las acciones en el eje Y.
Blazor Data Annotation Band Layer Example
En Blazor, representaIgbDataAnnotationBandLayer múltiples rectángulos sesgados (paralelogramo libre) entre 2 puntos en el área delIgbDataChart componente del representante. Esta capa de anotación de datos puede utilizarse para anotar el rango de crecimiento y caída en los precios de las acciones. De forma similar a todas las series, DataAnnotationBandLayer también soporta la vinculación de datos mediante laDataSource propiedad que puede establecerse en una colección de elementos de datos que deberían tener al menos 4 columnas numéricas de datos que representen las coordenadas x/y del punto de inicio y el punto final de las líneas. Los puntos de inicio deben mapearse usandoStartValueXMemberPath propiedades yStartValueYMemberPath los puntos finales deben mapearse usandoEndValueXMemberPath propiedades yEndValueYMemberPath. Además, puedes especificar el grosor/tamaño del rectángulo sesgado vinculando la columna numérica de datos a la propiedad AnnotationBreadthMemberPath.
Por ejemplo, puede usar DataAnnotationBandLayer para anotar el rango de crecimiento en los precios de las acciones.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
TargetAxis: Esta propiedad especifica qué eje debe tener habilitadas una CapaBandaAnotación, CapaLíneaDatos, CapaRectaAnotación.DataSource: Esta propiedad vincula los datos a la capa de anotación para proporcionar la forma precisa.StartValueXMemberPath: Esta propiedad es un mapeo al nombre de la columna de datos con posiciones x para el inicio de la CapaBandaAnotación, CapaLíneaAnotación, CapaRectaAnotación.StartValueYMemberPath: Esta propiedad es un mapeo al nombre de la columna de datos con posiciones y para el inicio de la CapaBandaAnotación, CapaLíneaAnotación, CapaRectaAnotación.EndValueXMemberPath: Esta propiedad es un mapeo a la columna de datos con posiciones x para el final de la CapaBandaAnotación, CapaLíneaAnotación, CapaRectaAnotación.EndValueYMemberPath: Esta propiedad es un mapeo a la columna de datos con posiciones y para el final de la CapaBandaAnotación, CapaLíneaAnotación, CapaRectCapaAnotación.StartLabelXMemberPath: Esta propiedad es un mapeo a la columna de datos que representa la etiqueta superpuesta para la posición inicial del eje x a lo largo del eje.StartLabelXDisplayMode|StartLabelYDisplayMode|EndLabelXDisplayMode||EndLabelYDisplayMode|:CenterLabelXDisplayModeEstas propiedades especifican qué deben mostrar las etiquetas de anotación al inicio, al final o al centro de la forma de anotación, por ejemplo, valor de datos mapeados, etiqueta de datos mapeados, valor de eje o ocultar una etiqueta de anotación dada.StartLabelYMemberPath: Esta propiedad es un mapeo a la columna de datos que representa la etiqueta del eje para la posición inicial deIgbDataAnnotationBandLayer,IgbDataAnnotationLineLayer,IgbDataAnnotationRectLayeren el eje y.EndLabelYMemberPath: Esta propiedad es un mapeo a la columna de datos que representa la etiqueta del eje para la posición final deIgbDataAnnotationBandLayer,IgbDataAnnotationLineLayer,IgbDataAnnotationRectLayeren el eje y.