Web Components Superposiciones de gráficos

    El Web ComponentsIgcDataChartComponent permite colocar líneas horizontales o verticales en un único valor numérico que defines mediante el uso de laIgcValueOverlayComponent. Esto puede ayudarte a visualizar datos como la media o mediana de una serie concreta.

    Web Components Value Overlay Example

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

    Web Components 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.

    IgcValueOverlayComponentLas propiedades de apariencia se heredan deIgcSeriesComponent 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 unIgcValueOverlayComponent para mostrar el valor de la superposición en el eje propietario. Para demostrar esto, puedes poner laisAxisAnnotationEnabled propiedad en verdadero.

    Web Components Value Layer

    Los componentes de gráficos de Web Components 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 losIgcValueLayerComponent componentes en yIgcCategoryChartComponent​IgcFinancialChartComponent 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 elIgcDataChartComponent, esto se hace añadiendo aIgcValueLayerComponent a a laIgcSeriesComponent 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 elIgcValueLayerComponent elemento, puedes establecer latargetSeries propiedad en la capa. Esto obligará a la capa a apuntar a la serie que definas. Puedes tener tantosIgcValueLayerComponent elementos dentro de unoIgcDataChartComponent como quieras.

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

    Web Components Financial Overlays

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

    Chart Overlay Text

    La Web ComponentsIgcValueOverlayComponent yIgcValueLayerComponent todas las capas de anotación de datos pueden renderizar texto superpuesto personalizado dentro del área de gráfico del componente XamDataChart. Puedes usar este texto superpuesto para anotar eventos importantes (por ejemplo, informes trimestrales de la empresa) en el eje x o valores importantes en el eje y en relación con las capas.

    Por ejemplo, puedes usarIgcDataAnnotationSliceLayerComponent,IgcValueOverlayComponent, yIgcValueLayerComponent para mostrar texto superpuesto.

    Styling Overlay Text

    Este ejemplo de código muestra cómo estilizar y personalizar el texto superpuesto en elIgcDataAnnotationSliceLayerComponent,IgcValueOverlayComponent, yIgcValueLayerComponent.

    <igc-data-annotation-slice-layer
    name="AnnoLayer"
    id="AnnoLayer"
    brush="green"
    annotation-text-color="white"
    annotation-label-member-path="label"
    annotation-value-member-path="value"
    overlay-text-color="red"
    overlay-text-background="green"
    overlay-text-border-color="black"
    overlay-text-member-path="label"
    overlay-text-vertical-margin="20"
    overlay-text-horizontal-margin="0"
    overlay-text-location="OutsideBottomCenter"
    overlay-text="OverlayText on DataAnnotationSliceLayer"
    thickness="2">
    </igc-data-annotation-slice-layer>

    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: