El React IgrDataChart permite la colocación de líneas horizontales o verticales en un único valor numérico que se define mediante el uso de la función . IgrValueOverlay Esto puede ayudarle a visualizar datos como la media o la mediana de una serie en particular.
Ejemplo de superposición de valores de React
El siguiente ejemplo muestra un Gráfico de columnas con algunas superposiciones de valores horizontales trazadas.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
React Propiedades de superposición de valores
A diferencia de otros tipos de series que utilizan ItemsSource para el enlace de datos, la superposición de valores utiliza una propiedad ValueMemberPath para enlazar un único valor numérico. Además, la superposición de valores requiere que usted defina un único axis para usar. Si usa un eje X, la superposición de valores será una línea vertical, y si usa un eje Y, será una línea horizontal.
Cuando se utiliza un eje numérico X o Y, la propiedad ValueMemberPath debe reflejar el valor numérico real en el eje donde desea que se dibuje la superposición de valores. Cuando se utiliza un eje de categoría X o Y, ValueMemberPath debe reflejar el índice de la categoría en la que desea que aparezca la superposición de valores.
Cuando se utiliza la superposición de valores con un eje de ángulo numérico, aparecerá como una línea desde el centro del gráfico y cuando se utiliza un eje de radio numérico, aparecerá como un círculo.
Las propiedades de apariencia IgrValueOverlay se heredan de IgrSeries, por lo que brush y thickness, por ejemplo, están disponibles y funcionan de la misma manera que con otros tipos de series.
También es posible mostrar una anotación de eje en IgrValueOverlay para mostrar el valor de la superposición en el eje propietario. Para mostrar esto, puede establecer la propiedad isAxisAnnotationEnabled en verdadero.
React Capa de valor
Los componentes de gráficos de React también exponen la capacidad de usar líneas de valor para llamar a diferentes puntos focales de los datos, como los valores mínimo, máximo y promedio.
En IgrDataChart, esto se hace agregando un IgrValueLayer a la colección IgrSeries del gráfico y luego estableciendo la propiedad ValueMode en una de las enumeraciones ValueLayerValueMode. Cada una de estas enumeraciones y lo que significan se enumeran a continuación:
Average: aplica líneas de valor potencialmente múltiples para indicar el valor promedio de cada serie trazada en el gráfico.
GlobalAverage: aplica una línea de valor único para mostrar el promedio de todos los valores de la serie en el gráfico.
GlobalMaximum: aplica una línea de valor único para indicar el valor máximo absoluto de todos los valores de la serie en el gráfico.
GlobalMinimum: aplica una línea de valor único para indicar el valor mínimo absoluto de todos los valores de la serie en el gráfico.
Maximum: aplica líneas de valor potencialmente múltiples para indicar el valor máximo de cada serie trazada en el gráfico.
Minimum: aplica líneas de valor potencialmente múltiples para indicar el valor mínimo de cada serie trazada en el gráfico.
Si desea evitar que se tenga en cuenta una serie en particular al utilizar el elemento IgrValueLayer, puede establecer la propiedad targetSeries en la capa. Esto obligará a la capa a apuntar a la serie que usted defina. Puede tener tantos elementos IgrValueLayer dentro de un único IgrDataChart como desee.