HorizontalBarChart controlo (pré-visualização)

[Este artigo inclui documentação pré-versão e está sujeito a alterações.]

Um gráfico de barras horizontal é um gráfico que apresenta dados categóricos com barras retangulares com comprimentos proporcionais aos valores que representam. Este tipo de gráfico é útil quando a intenção é mostrar comparações entre várias categorias e os rótulos para essas categorias são longos.

Este componente de código fornece um wrapper em torno do controle Fluent UI HorizontalBarChart para uso em canvas & páginas personalizadas.

Importante

• Esta é uma funcionalidade de pré-visualização.
• As caraterísticas de pré-visualização não se destinam à produção e poderão ter caraterísticas restritas. Estas caraterísticas estão disponíveis antes do lançamento oficial, para que os clientes possam ter acesso antecipado e enviar comentários.

Nota

Documentação completa e código-fonte encontrados no repositório de componentes de código do GitHub.

_Propriedades

O controlo aceita as propriedades seguintes:

• Título - Este valor indica o título do gráfico.
• HideLabels - Defina esta opção como true para ocultar rótulos no gráfico.
• BarHeight - Este valor indica a altura da barra apresentada no gráfico.
• HideTooltip - Defina esta opção como true para ocultar dicas de ferramentas no gráfico.
• CustomColors - Defina esta opção como true para permitir cores personalizadas no gráfico, se fornecidas.
• Variante - Esta opção permite que o gráfico seja mostrado em Absolute scale ou Part to whole.
• ChartDataMode - Esta opção fornece para mostrar o valor de cada barra em Fraction ou Percentage.
• Itens - Os itens de ação a serem renderizados:
  • ItemTitle - A nome a apresentar dos dados específicos do gráfico (Item).
  • ItemLegend - A legenda associada aos dados específicos do gráfico (Item).
  • ItemValue - Defina o valor dos dados específicos do gráfico (Item).
  • ItemTotalValue - O valor total a ser usado para os dados específicos do gráfico (Item).
  • ItemXPopover - O texto popover do eixo X para os dados específicos do gráfico (Item).
  • ItemYPopover - O texto popover do eixo Y para os dados específicos do gráfico (Item).
  • ItemColor - Defina o nome da cor ou o valor HEX a ser exibido para os dados específicos do gráfico (Item).

Nota

• A cor do item só se aplica se a propriedade CustomColors estiver ativada.
• Ocultar rótulos funciona quando o tipo de gráfico é 'Escala absoluta'.
• Ocultar dicas de ferramentas funciona bem quando o aplicativo é reproduzido (não no estúdio), mas pode não renderizar enquanto estiver no estúdio.

Acessibilidade

• AccessibilityLabel - Tela Leitor aria-label.

Utilização

Mapeie valores de dados para as propriedades do gráfico correspondentes na Items propriedade do controle, conforme demonstrado na fórmula a seguir.

Permita que a propriedade CustomColors defina cores 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"
    }
)

Limitações

Este componente de tela só pode ser utilizado em aplicações de tela e páginas personalizadas.