Compartir a través de

HorizontalBarChart - Stacked control (versión preliminar)

  • Artículo

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

El gráfico de barras apiladas horizontales muestra varias series de datos como barras apiladas, en las que cada barra representa una categoría. Las barras se apilan una al lado de la otra, y la longitud de cada barra representa el valor de la categoría de la serie.

Control HorizontalBarChart - Stacked.

Este componente de código proporciona un contenedor alrededor del control de Fluent UI HorizontalBarChart - Stacked para su uso lienzo 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 la documentación completa y el código fuente, consulte repositorio de componentes de código GitHub.

Propiedades

El control acepta las siguientes propiedades:

  • HideLegend : este valor indica si se deben mostrar u ocultar las leyendas en el gráfico.

  • BarHeight : este valor indica la altura de la barra presentada en el gráfico.

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

  • CustomColors : esta opción 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).
    • ItemCallout : establece el valor que se mostrará en una ventana emergente o información sobre herramientas.

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(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Limitaciones

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