GaugeChart control (segmento)

[Este artículo es documentación preliminar y está sujeto a modificaciones].

Hay dos tipos de gráficos de indicadores: velocímetro y medidor de clasificación.

El velocímetro mide un valor numérico frente a un todo, como la capacidad de almacenamiento. La aguja es un componente opcional. El color del alinear que representa el valor que se mide se puede personalizar para adaptarse a ciertos escenarios o para combinar con los colores de la marca.

El medidor de calificación muestra el estado del valor actual dentro de unos pocos rangos o segmentos predefinidos. La aguja es un componente necesario aquí.

Este componente de código proporciona un contenedor alrededor del control Fluent UI GaugeChart para su uso en lienzos y páginas personalizadas.

Importante

• Esta es una característica en versión preliminar.
• Las características en vista previa no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Estas características están disponibles antes del lanzamiento oficial para que los clientes puedan tener un acceso anticipado y proporcionar comentarios.

Nota

Para obtener la documentación completa y el código fuente, consulte el repositorio de componentes de código de GitHub . |

Propiedades

El control acepta las siguientes propiedades:

• Título : este valor indica el título del gráfico.

• Subetiqueta : este valor indica la subetiqueta del gráfico.

• ChartValue : este valor indica el valor que se mostrará en el indicador.

• MinValue : este valor indica el valor mínimo del indicador.

• MaxValue : este valor indica el valor máximo del indicador.

• HideMinMax : este valor indica si se deben ocultar los valores mínimo y máximo en el indicador.

• HideLegend : este valor indica si se debe ocultar la leyenda en el indicador.

• ChartValueFormat : este valor indica que se mostrará el valor del gráfico en Percentage o Fraction.

• CustomColors : establezca este valor en verdadero para permitir colores personalizados en el gráfico, si se proporcionan.

• Elementos - Los elementos de acción a representar:

  • ItemLegend : el nombre de los datos del gráfico en particular (Elemento).
  • ItemSize : el tamaño de los datos del gráfico en particular (elemento).
  • ItemColor : establece el nombre del color o el valor HEX que se mostrará para los datos del gráfico en particular (Elemento).

Nota

El color del elemento solo se aplica si la propiedad CustomColors está activada.

Accesibilidad

• AccessibilityLabel - Pantalla Lector aria-label.

Uso

Velocímetro

Sólo se necesita una fila para Items. Utilice ChartValue para indicar la posición del objetivo.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

Medidor de calificación

Proporcione los rangos como la propiedad Items . La suma de todos los valores debe sumar el 100% de la diferencia entre ItemSize y MinValue . MaxValue Utilice ChartValue para indicar la posición actual.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

Limitaciones

Este componente de lienzo solo se puede usar en aplicaciones de lienzo y páginas personalizadas.