Web Components Anotaciones de datos de gráficos
En el gráfico de Web Components, 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 esta muestra? Obtenga acceso a nuestro kit de herramientas de Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Web Components Data Annotation Slice Layer Example
En Web Components, 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 delIgcDataChartComponent 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.
Web Components Data Annotation Strip Layer Example
En Web Components, seIgcDataAnnotationStripLayerComponent renderiza varias tiras verticales u horizontales entre 2 valores en un eje dentro delIgcDataChartComponent 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,IgcDataAnnotationStripLayerComponent 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 usarIgcDataAnnotationStripLayerComponent para anotar gráficos con los desplomes bursátiles y los cambios en los tipos de interés federales.
Web Components Data Annotation Line Layer Example
En Web Components,IgcDataAnnotationLineLayerComponent renderiza múltiples líneas entre 2 puntos en el área de la gráfica delIgcDataChartComponent 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.
Web Components Data Annotation Rect Layer Example
En Web Components, renderizaIgcDataAnnotationRectLayerComponent múltiples rectángulos definidos por puntos de inicio y fin en el área de trazado delIgcDataChartComponent 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.
Web Components Data Annotation Band Layer Example
En Web Components, representaIgcDataAnnotationBandLayerComponent múltiples rectángulos sesgados (paralelogramo libre) entre 2 puntos en el área delIgcDataChartComponent 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 deIgcDataAnnotationBandLayerComponent,IgcDataAnnotationLineLayerComponent,IgcDataAnnotationRectLayerComponenten 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 deIgcDataAnnotationBandLayerComponent,IgcDataAnnotationLineLayerComponent,IgcDataAnnotationRectLayerComponenten el eje y.