React Superposiciones de gráficos

    The React IgrDataChart allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the IgrValueOverlay. This can help you to visualize data such as the mean or median of a particular series.

    React Value Overlay Example

    El siguiente ejemplo muestra un Gráfico de columnas con algunas superposiciones de valores horizontales trazadas.

    React Value Overlay Properties

    A diferencia de otros tipos de serie que usan aItemsSource para la vinculación de datos, la superposición de valores utiliza unaValueMemberPath propiedad para vincular un único valor numérico. Además, la superposición de valores requiere que definas un únicoaxis para usar. Si usas un eje X, la superposición de valores será una línea vertical, y si usas un eje Y, será una línea horizontal.

    Al usar un eje numérico X o Y, laValueMemberPath propiedad debe reflejar el valor numérico real en el eje donde quieres dibujar la superposición de valores. Al usar un eje de categoría X o Y, debeValueMemberPath reflejar el índice de la categoría en la que quieres 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.

    IgrValueOverlayLas propiedades de apariencia se heredan deIgrSeries y, por ejemplo,brush​thickness están disponibles y funcionan igual que con otros tipos de series.

    También es posible mostrar una anotación de eje en unIgrValueOverlay para mostrar el valor de la superposición en el eje propietario. Para demostrar esto, puedes poner laisAxisAnnotationEnabled propiedad en verdadero.

    React Value Layer

    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.

    Aplicar losIgrValueLayer componentes en yIgrCategoryChart​IgrFinancialChart se realiza estableciendo lavalueLines propiedad en la carta. Esta propiedad toma una colección de laValueLayerValueMode enumeración. Puedes mezclar y combinar varias capas de valores en la misma tabla añadiendo múltiplesValueLayerValueMode enumeraciones a lavalueLines colección de la tabla.

    En elIgrDataChart, esto se hace añadiendo aIgrValueLayer a a laIgrSeries colección del gráfico y luego estableciendo laValueMode propiedad a una de lasValueLayerValueMode enumeraciones. Cada una de estas enumeraciones y su significado se enumeran a continuación:

    • Auto: El modo de valor por defecto de laValueLayerValueMode enumeración.
    • Average: Aplica potencialmente múltiples líneas de valor para indicar el valor medio de cada serie trazada en el gráfico.
    • GlobalAverage: Aplica una sola línea de valor para indicar el promedio de todos los valores de la serie en el gráfico.
    • GlobalMaximum: Aplica una línea de valor única para indicar el valor absoluto máximo de todos los valores de la serie en el gráfico.
    • GlobalMinimum: Aplica una línea de valor única para indicar el valor mínimo absoluto de todos los valores de serie en el gráfico.
    • Maximum: Aplica potencialmente múltiples líneas de valor para indicar el valor máximo de cada serie trazada en el gráfico.
    • Minimum: Aplica potencialmente múltiples líneas de valor para indicar el valor mínimo de cada serie representada en el gráfico.

    Si quieres evitar que se tenga en cuenta alguna serie concreta al usar elIgrValueLayer elemento, puedes establecer latargetSeries propiedad en la capa. Esto obligará a la capa a apuntar a la serie que definas. Puedes tener tantosIgrValueLayer elementos dentro de unoIgrDataChart como quieras.

    El siguiente ejemplo demuestra el uso de la diferenciavalueLines en elIgrCategoryChart:

    React Financial Overlays

    También puede trazar superposiciones financieras e indicadores incorporados en React gráfico de acciones.

    Chart Overlay Text

    The React IgrValueOverlay, IgrValueLayer, and all Data Annotation Layers can render custom overlay text inside plot area of the XamDataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers.

    Por ejemplo, puedes usarIgrDataAnnotationSliceLayer,IgrValueOverlay, yIgrValueLayer para mostrar texto superpuesto.

    Styling Overlay Text

    Este ejemplo de código muestra cómo estilizar y personalizar el texto superpuesto en elIgrDataAnnotationSliceLayer,IgrValueOverlay, yIgrValueLayer.

    Additional Resources

    Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:

    API References

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