Web Components Anotaciones de gráficos

Las interacciones y anotaciones de desplazamiento del gráfico de Web Components se implementan a través de capas de interacción de desplazamiento, que son series que se agregan a la colección de series. Estas capas dependen de la posición del cursor. Cada una de estas capas de anotación proporciona una interacción de desplazamiento diferente que se puede utilizar individualmente o combinarse con otras para proporcionar interacciones de desplazamiento eficaces.

Web Components Annotations Example

En el ejemplo siguiente se muestran las capas de anotación que están disponibles en el gráfico Web Components. Haga clic en las casillas de verificación para activar y desactivar cada capa.

¿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 Crosshair Layer

SeIgcCrosshairLayerComponent renderizan como líneas cruzadas que se cruzan en el valor real de cada serie a la que están configurados para dirigirse, y cada serie representa un conjunto separado de líneas.

Los tipos de punto de mira incluyen:

• Horizontal
• Vertical
• Ambos

Las miras del gráfico también pueden configurarse para acoplarse a puntos de datos configurando lacrosshairsSnapToData propiedad como verdadera, de lo contrario las miras se interpolarán entre puntos de datos. También se pueden habilitar anotaciones para mostrar el valor de la mira a lo largo del eje.

Puedes configurar la capa de mira para que solo se muestre en una serie específica, ya que por defecto apuntarán a todas las series en el control del gráfico. Para lograrlo, establece latargetSeries propiedad.

Por defecto, el color de las líneas de la mira es más claro que el de la serie con la que interactúa. Sin embargo, esta configuración por defecto puede ser anulada para que puedas seleccionar un color que se usará para las líneas de la mira. Esto se hace estableciendo labrush propiedad de la Capa de Cruz.

El siguiente ejemplo muestra cómo configurar la capa en forma de cruz pero apuntando a una sola serie, configurando el tipo en vertical y aplicando estilo al color del pincel.

Web Components Final Value Layer

ElIgcFinalValueLayerComponent control delIgcDataChartComponent de la pantalla ofrece una vista rápida a lo largo del eje del valor final mostrado en una serie.

Puedes configurar esta anotación para que apunte a una serie específica si quieres tener múltiples capas de valores finales presentes con diferentes configuraciones. Esto se puede hacer estableciendo latargetSeries propiedad.

También puede personalizar esta anotación configurando las siguientes propiedades:

• axisAnnotationBackground: Esta propiedad se utiliza para elegir el pincel para el color de fondo de la anotación. Por defecto, es usar el pincel de serie.
• axisAnnotationTextColor: Esta propiedad se utiliza para elegir el pincel para el color de texto de la anotación.
• axisAnnotationOutline: Esta propiedad se utiliza para elegir el pincel para el color de contorno de la anotación.

El siguiente ejemplo demuestra cómo aplicar estilo a la anotación de la capa de valor final estableciendo las propiedades enumeradas anteriormente.

<igc-category-chart
     id="chart"
     final-value-annotations-visible="true">
</igc-category-chart>

Web Components Callout Layer

MuestraIgcCalloutLayerComponent anotaciones de datos existentes o nuevos en el control del gráfico. Las anotaciones aparecen junto a los valores de datos dados en la fuente de datos.

Utilice las anotaciones de llamada para mostrar información adicional, como notas o detalles específicos sobre puntos de datos, que le gustaría señalar a sus usuarios.

Puedes configurar las llamadas para que se dirijan a una serie específica si quieres tener varias capas de llamadas presentes con diferentes configuraciones. Esto se puede hacer estableciendo latargetSeries propiedad.

También puede personalizar esta anotación configurando las siguientes propiedades:

• calloutLeaderBrush: Esta propiedad se utiliza para elegir el pincel para las líneas líderes para las señales de la capa.
• calloutOutline: Esta propiedad se utiliza para elegir el pincel para el color de contorno de la anotación.
• calloutBackground: Esta propiedad se utiliza para elegir el pincel para el color de fondo de la anotación. Por defecto, es usar el pincel de serie.
• calloutTextColor: Esta propiedad se utiliza para elegir el pincel para el color de texto de la anotación.
• calloutStrokeThickness: Esta propiedad se utiliza para elegir el grosor del respaldo de callout.
• calloutCornerRadius: Esta propiedad se utiliza para curvar las esquinas de las llamadas.
• allowedPositions: Esta propiedad se utiliza para elegir qué posiciones puede usar la capa de llamada. Por ejemplo, arriba, abajo

El siguiente ejemplo demuestra cómo aplicar estilo a las anotaciones de la capa de llamada estableciendo las propiedades enumeradas anteriormente:

<igc-category-chart
     id="chart"
     width="800px"
     height="400px"
     callouts-visible="true">
</igc-category-chart>

let chart = (document.getElementById("chart") as IgcCategoryChartComponent);

chart.dataSource = data;
chart.calloutsDataSource = categoryData;
chart.calloutsXMemberPath = "index";
chart.calloutsYMemberPath = "value";
chart.calloutsLabelMemberPath = "info";

API References

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

• crosshairsSnapToData
• IgcCategoryChartComponent