React Anotaciones de gráficos

Las interacciones y anotaciones al pasar el cursor del gráfico de React se implementan a través de capas de interacción al pasar el cursor, 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 anotaciones proporciona una interacción al pasar el cursor diferente que se puede usar de forma individual o combinada con otras para proporcionar interacciones al pasar el cursor potentes.

React Annotations Example

El siguiente ejemplo muestra las capas de anotación que están disponibles en el gráfico React. 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 React completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

React Crosshair Layer

The IgrCrosshairLayer renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.

Los tipos de punto de mira incluyen:

• Horizontal
• Vertical
• Ambos

The chart's crosshairs can also be configured to snap to data points by setting the crosshairsSnapToData property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.

You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the targetSeries property.

By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the brush property of the Crosshair Layer.

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.

React Final Value Layer

The IgrFinalValueLayer of the IgrDataChart control provides a quick view along the axis of the ending value displayed in a series.

You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the targetSeries property.

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

• axisAnnotationBackground: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
• axisAnnotationTextColor: This property is used to choose the brush for the annotation's text color.
• axisAnnotationOutline: This property is used to choose the brush for the annotation's outline color.

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

 <IgrCategoryChart
    dataSource={this.state.data}
    finalValueAnnotationsVisible={true} />

React Callout Layer

The IgrCalloutLayer displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.

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.

You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the targetSeries property.

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

• calloutLeaderBrush: This property is used to choose the brush for the leader lines for the callouts for the layer.
• calloutOutline: This property is used to choose the brush for the annotation's outline color.
• calloutBackground: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
• calloutTextColor: This property is used to choose the brush for the annotation's text color.
• calloutStrokeThickness: This property is used to choose the thickness for the callout backing.
• calloutCornerRadius: This property is used to curve the corners of the callouts.
• allowedPositions: This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom

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

 <IgrCategoryChart
    dataSource={this.state.data}
    calloutsVisible={true}
    calloutsDataSource={this.state.calloutData}
    calloutsXMemberPath="index"
    calloutsYMemberPath="value"
    calloutsLabelMemberPath="info" />

API References

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

• crosshairsSnapToData
• IgrCategoryChart