Superposiciones de gráficos Blazor
Blazor IgbDataChart
permite la colocación de líneas horizontales o verticales en un único valor numérico que usted define mediante el uso de IgbValueOverlay
. Esto puede ayudarle a visualizar datos como la media o mediana de una serie en particular.
Blazor Value Overlay Example
El siguiente ejemplo muestra un Gráfico de columnas con algunas superposiciones de valores horizontales trazadas.
Blazor Value Overlay Properties
A diferencia de otros tipos de series que utilizan un DataSource
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 IgbValueOverlay
se heredan de Series
, 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 IgbValueOverlay
para mostrar el valor de la superposición en el eje propietario. Para mostrar esto, puede establecer la propiedad IsAxisAnnotationEnabled
en verdadero.
Blazor Value Layer
Los componentes de gráficos Blazor también exponen la capacidad de utilizar líneas de valor para resaltar diferentes puntos focales de sus datos, como valores mínimos, máximos y promedio.
La aplicación de IgbValueLayer
en los componentes IgbCategoryChart
e IgbFinancialChart
se realiza estableciendo la propiedad ValueLines
en el gráfico. Esta propiedad toma una colección de la enumeración ValueLayerValueMode
. Puede mezclar y combinar varias capas de valores en el mismo gráfico agregando varias enumeraciones ValueLayerValueMode
a la colección ValueLines
del gráfico.
En IgbDataChart
, esto se hace agregando un IgbValueLayer
a la colección Series
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:
Auto
: el modo de valor predeterminado de la enumeraciónValueLayerValueMode
.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 IgbValueLayer
, 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 IgbValueLayer
dentro de un único IgbDataChart
como desee.
El siguiente ejemplo demuestra el uso de las diferentes ValueLines
en IgbCategoryChart
:
Blazor Financial Overlays
También puede trazar superposiciones e indicadores financieros integrados en Blazor Stock Chart.
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:
IgbDataChart
DataSource
IgbValueOverlay
Axis
Brush
IsAxisAnnotationsEnabled
Series
Thickness
IgbValueLayer
ValueLayerValueMode
ValueLines