Angular Superposiciones de gráficos

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

    Angular Value Overlay Example

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

    Angular Value Overlay Properties

    Unlike other series types that use a ItemsSource for data binding, the value overlay uses a ValueMemberPath property to bind a single numeric value. In addition, the value overlay requires you to define a single axis to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.

    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.

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

    Angular Value Layer

    Los componentes de gráficos de Angular 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.

    Applying the IgxValueLayerComponent in the IgxCategoryChartComponent and IgxFinancialChartComponent components is done by setting the valueLines property on the chart. This property takes a collection of the ValueLayerValueMode enumeration. You can mix and match multiple value layers in the same chart by adding multiple ValueLayerValueMode enumerations to the valueLines collection of the chart.

    In the IgxDataChartComponent, this is done by adding a IgxValueLayerComponent to the IgxSeriesComponent collection of the chart and then setting the ValueMode property to one of the ValueLayerValueMode enumerations. Each of these enumerations and what they mean is listed below:

    • Auto: The default value mode of the ValueLayerValueMode enumeration.
    • Average: Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
    • GlobalAverage: Applies a single value line to call out the average of all of the series values in the chart.
    • GlobalMaximum: Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
    • GlobalMinimum: Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
    • Maximum: Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
    • Minimum: Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.

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

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

    Angular Financial Overlays

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

    Chart Overlay Text

    The Angular IgxValueOverlayComponent, IgxValueLayerComponent, 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 usarIgxDataAnnotationSliceLayerComponent,IgxValueOverlayComponent, yIgxValueLayerComponent para mostrar texto superpuesto.

    Styling Overlay Text

    Este ejemplo de código muestra cómo estilizar y personalizar el texto superpuesto en elIgxDataAnnotationSliceLayerComponent,IgxValueOverlayComponent, yIgxValueLayerComponent.

    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: