Angular Anotaciones de datos de gráficos

    En el gráfico de Angular, 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 Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Angular Data Annotation Slice Layer Example

    En Angular, 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 delIgxDataChartComponent 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.

    Angular Data Annotation Strip Layer Example

    En Angular, seIgxDataAnnotationStripLayerComponent renderiza varias tiras verticales u horizontales entre 2 valores en un eje dentro delIgxDataChartComponent 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,IgxDataAnnotationStripLayerComponent 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 usarIgxDataAnnotationStripLayerComponent para anotar gráficos con los desplomes bursátiles y los cambios en los tipos de interés federales.

    Angular Data Annotation Line Layer Example

    En Angular,IgxDataAnnotationLineLayerComponent renderiza múltiples líneas entre 2 puntos en el área de la gráfica delIgxDataChartComponent 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.

    Angular Data Annotation Rect Layer Example

    En Angular, renderizaIgxDataAnnotationRectLayerComponent múltiples rectángulos definidos por puntos de inicio y fin en el área de trazado delIgxDataChartComponent 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.

    Angular Data Annotation Band Layer Example

    En Angular, representaIgxDataAnnotationBandLayerComponent múltiples rectángulos sesgados (paralelogramo libre) entre 2 puntos en el área delIgxDataChartComponent 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 |:CenterLabelXDisplayMode Estas 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 deIgxDataAnnotationBandLayerComponent,IgxDataAnnotationLineLayerComponent,IgxDataAnnotationRectLayerComponent en 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 deIgxDataAnnotationBandLayerComponent,IgxDataAnnotationLineLayerComponent,IgxDataAnnotationRectLayerComponent en el eje y.