Web Components Capa de Anotación de Usuario de Gráficos

    En Ignite UI for Web Components, puedes anotar conIgcDataChartComponent anotaciones de corte, desnudo y punto en tiempo de ejecución usando la función de anotaciones de usuario. Esto permite al usuario final añadir más detalles al gráfico, como señalar eventos importantes individuales como informes trimestrales de la empresa usando la anotación de cortes o eventos que tienen una duración mediante la anotación de tira. También puedes señalar puntos individuales en la serie trazada usando la anotación de puntos o cualquier combinación de estos tres.

    Esto está directamente integrado con las herramientas disponibles de laIgcToolbarComponent. El siguiente tema explica, con ejemplos, cómo puedes utilizar laIgcToolbarComponent para añadir anotaciones de usuario al área gráfica del gráfico, así como cómo añadir estas anotaciones de usuario de forma programática.

    [!Note] This feature is designed to support X and Y axes and does not currently support radial or angular axes.

    Using the User Annotations with the Toolbar

    ExponeIgcToolbarComponent un elemento del menú Anotaciones con dos herramientas con las etiquetas "Anotar carta" y "Eliminar nota". Para que aparezca este elemento del menú, primero tienes que establecer laisUserAnnotationsEnabled propiedad en el gráfico correspondiente paratrue.

    La opción "Anotar Gráfico" que aparece tras abrirla te permite anotar el área delIgcDataChartComponent gráfico. Esto se puede hacer añadiendo anotaciones de cortes, tiras o puntos. Puedes añadir una anotación de corte haciendo clic en una etiqueta en el eje X o Y. Puedes añadir una anotación de tira haciendo clic y arrastrando en el área de la trama. Además, puedes añadir una anotación de puntos haciendo clic en un punto de una serie representada en la tabla.

    Web Components user-annotation-create

    Puedes eliminar las anotaciones que hayas añadido previamente seleccionando el elemento del menú "Eliminar nota" y luego haciendo clic en la anotación del eje para las anotaciones de usuario de corte o strip, o haciendo clic en el punto de datos correspondiente para la anotación de usuario del punto.

    Web Components user-annotation-delete

    Al añadir una de estas anotaciones de usuario a través de elXamToolbar, seIgcDataChartComponent generará un evento llamadoUserAnnotationInformationRequested donde puedes proporcionar más información sobre las anotaciones de usuario. Los argumentos de este evento tienen una propiedad llamadaAnnotationInfo que devuelve unIgcUserAnnotationInformation objeto que permite añadir la configuración de múltiples aspectos diferentes de la anotación.

    La tabla siguiente detalla las diferentes propiedades configurables enIgcUserAnnotationInformation:

    Propiedad Tipo Descripción
    annotationData string Esta propiedad permite información adicional para la anotación del usuario. Esta propiedad está diseñada para ser utilizada junto con elUserAnnotationToolTipContentUpdating evento y así mostrar información adicional en la descripción emergente de la anotación.
    annotationId string Esta propiedad de solo lectura devuelve el ID de cadena único de la anotación del usuario.
    badgeColor string Esta propiedad obtiene o establece el color que se usa para la insignia en la anotación del usuario.
    badgeImageUri string Esta propiedad obtiene o establece una ruta hacia una imagen para usar como insignia en la anotación del usuario.
    dialogSuggestedXLocation double Esta propiedad obtiene una ubicación X recomendada para mostrar un diálogo basado en la ubicación donde se añadió la anotación de usuario.
    dialogSuggestedYLocation double Esta propiedad obtiene una ubicación Y recomendada para mostrar un diálogo basado en la ubicación donde se añadió la anotación de usuario.
    label string Esta propiedad obtiene o establece la etiqueta para que se muestre en la anotación del usuario.
    mainColor string Esta propiedad obtiene o establece el color que se usará para rellenar el fondo de la anotación del usuario.

    Después de haber realizado los cambios en la anotación a través delUserAnnotationInformationRequested evento, deberías invocar elfinishAnnotationFlow método paraIgcDataChartComponent terminar de crear la anotación y hacer commit de los cambios en ella. Alternativamente, también puedes cancelar la creación de la anotación llamandocancelAnnotationFlow y pasando elannotationId de la anotación, lo cual puede obtenerse a partir delAnnotationInfo parámetro de losUserAnnotationInformationRequested argumentos del evento, como se mencionó antes. Esto eliminará la anotación del área de la gráfica.

    Using the User Annotations Programmatically

    Al usar elIgcUserAnnotationLayerComponent programa programáticamente, puedes invocar dos métodos diferentes paraIgcDataChartComponent poner el gráfico en un modo donde puedas añadir o eliminar una anotación de usuario. Estos métodos se denominanstartCreatingAnnotation ystartDeletingAnnotation, respectivamente.

    Después destartCreatingAnnotation invocar, puedes añadir una anotación de corte haciendo clic en una etiqueta en el eje X o Y, añadir una anotación de tira haciendo clic y arrastrando en el área de gráfico y soltando el botón del ratón, o añadir una anotación de punto haciendo clic en un punto de datos de una serie representada en el gráfico.

    Añadir una de estas anotaciones de usuario generará un evento nombradoUserAnnotationInformationRequested, donde puedes proporcionar más información para la anotación del usuario. Los argumentos de este evento tienen una propiedad llamadaAnnotationInfo que devuelve unIgcUserAnnotationInformation objeto que permite añadir la configuración de múltiples aspectos diferentes de la anotación.

    Después de haber realizado los cambios en la anotación a través delUserAnnotationInformationRequested evento, deberías invocar elfinishAnnotationFlow método paraIgcDataChartComponent terminar de crear la anotación y hacer commit de los cambios en ella. Alternativamente, también puedes cancelar la creación de la anotación llamandocancelAnnotationFlow y pasando elannotationId de la anotación, lo cual puede obtenerse a partir delAnnotationInfo parámetro de losUserAnnotationInformationRequested argumentos del evento, como se mencionó antes. Esto eliminará la anotación del área de la gráfica.

    Una vez que la anotación de usuario se ha añadido al gráfico, aparecerá en laIgcSeriesComponent colección como unIgcUserAnnotationLayerComponent. TieneIgcUserAnnotationLayerComponent unaannotations colección que puede almacenarIgcUserSliceAnnotation,IgcUserStripAnnotation yIgcUserPointAnnotation elementos dependiendo del tipo de anotaciones añadidas al área de la trama.

    User Annotation ToolTip

    Cada una de las anotaciones del usuario puede mostrar una descripción emergente al pasar el ratón para añadir aún más detalle a las anotaciones.

    El gráfico muestra unUserAnnotationToolTipContentUpdating evento que puedes gestionar para actualizar el contenido de la descripción emergente de la anotación del usuario a medida que se muestra la descripción emergente. Los argumentos de evento de este evento exponen dos propiedades:Content yAnnotationInfo.

    La descripción emergente está diseñada para trabajar en conjunto con elUserAnnotationInformationRequested evento, de modo que puedas proporcionar más detalles a la anotación del usuario a través de la propiedad deannotationData ese evento. LaAnnotationInfo propiedad sobre los argumentosUserAnnotationToolTipContentUpdating del evento será la misma instancia que laAnnotationInfo propiedad en elUserAnnotationInformationRequested que puedes modificar en ese evento. Esto te permite utilizar la información proporcionada a la anotación del usuario en su creación y proporcionar aún más información dentro de la descripción emergente.

    API References

    La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

    Additional Resources

    Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas: