DonutChart control (versión preliminar)

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

Los gráficos de anillos se utilizan para mostrar proporciones, que expresan un valor parcial en comparación con un valor total. Este tipo de gráficos son mejores para mostrar el porcentaje de partes individuales en comparación con un todo, donde el cambio a lo largo del tiempo no es importante de visualizar. Son gráficos estadísticos circulares divididos en porciones para ilustrar la proporción numérica.

Este componente de código proporciona un contenedor alrededor del control Fluent UI DonutChart 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

La documentación completa y el código fuente se encuentran en 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.

• HideLabel : esta opción controla si se mostrarán u ocultarán las etiquetas en el gráfico.

• HideTooltip : esta opción controla si se mostrará u ocultará la información sobre herramientas en el gráfico.

• ShowLabelsInPercentage : esta opción controla si se mostrarán las etiquetas en porcentaje.

• InnerRadius : establece el valor para el radio interno del gráfico de anillos.

• ValueInsideDonut : esta propiedad indica el valor que se mostrará dentro del gráfico de anillos.

• CustomColors : esta propiedad se utiliza para mostrar colores personalizados en el gráfico si se proporciona

• Elementos : los elementos de acción que se deben representar

  • ItemTitle : el nombre de los datos del gráfico en particular (Elemento).
  • ItemKey : la clave a utilizar para identificar el artículo. Las teclas deben ser únicas.
  • ItemValue : establece el valor 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

• Etiqueta de accesibilidad - Pantalla Lector aria-label

Uso

Asigne valores de datos a las propiedades del gráfico correspondientes en la propiedad Items del control, como se demuestra en la siguiente fórmula. El gráfico ajusta automáticamente el objeto visual para que coincida con los valores relativos.

Habilite la propiedad CustomColors para definir colores consistentes.

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Limitaciones

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