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

    In Angular, the link:{DataChartLink}.DataAnnotationSliceLayer.html[DataAnnotationSliceLayer] renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the IgxDataChartComponent component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer 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.

    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

    In Angular, the IgxDataAnnotationStripLayerComponent renders multiple vertical or horizontal strips between 2 values on an axis in the IgxDataChartComponent 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 IgxDataAnnotationStripLayerComponent 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.

    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

    In Angular, IgxDataAnnotationLineLayerComponent renders multiple lines between 2 points in plot area of the IgxDataChartComponent 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 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

    In Angular, the IgxDataAnnotationRectLayerComponent renders multiple rectangles defined by starting and ending points in plot area of the IgxDataChartComponent 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 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

    In Angular, the IgxDataAnnotationBandLayerComponent renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the IgxDataChartComponent 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 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.