HorizontalBarChart control (versión preliminar)

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

Un gráfico de barras horizontal es un gráfico que presenta datos categóricos con barras rectangulares con longitudes proporcionales a los valores que representan. Este tipo de gráfico es útil cuando la intención es mostrar comparaciones entre varias categorías y las etiquetas de esas categorías son largas.

Este componente de código proporciona un contenedor alrededor del control Fluent UI HorizontalBarChart 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.
• HideLabels : establezca esta opción en verdadero para ocultar las etiquetas en el gráfico.
• BarHeight : este valor indica la altura de la barra presentada en el gráfico.
• HideTooltip : configure esta opción como verdadera para ocultar la información sobre herramientas en el gráfico.
• CustomColors : configure esta opción como verdadera para permitir colores personalizados en el gráfico, si se proporcionan.
• Variante : esta opción permite que el gráfico se muestre en Absolute scale o Part to whole.
• ChartDataMode : esta opción permite mostrar el valor de cada barra en Fraction o Percentage.
• Elementos - Los elementos de acción a representar:
  • ItemTitle : el nombre de los datos del gráfico en particular (Elemento).
  • ItemLegend : la leyenda asociada con los datos del gráfico particular (Elemento).
  • ItemValue : establece el valor de los datos del gráfico en particular (Elemento).
  • ItemTotalValue : el valor total que se utilizará para los datos del gráfico en particular (elemento).
  • ItemXPopover : el texto emergente del eje X para los datos del gráfico en particular (Elemento).
  • ItemYPopover : el texto emergente del eje Y para 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.
• La función Ocultar etiquetas funciona cuando el tipo de gráfico es "Escala absoluta".
• Ocultar la información sobre herramientas funciona bien cuando se reproduce la aplicación (no en el estudio), pero es posible que no se represente mientras está en el estudio.

Accesibilidad

• AccessibilityLabel - Pantalla Lector aria-label.

Uso

Asigne valores de datos a las propiedades del gráfico correspondientes en la propiedad Items del control, como se muestra en la siguiente fórmula.

Habilite la propiedad CustomColors para definir colores consistentes.

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Limitaciones

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