HorizontalBarChart controle (versão preliminar)

[Este artigo faz parte da documentação de pré-lançamento e está sujeito a alterações.]

Um gráfico de barras horizontais é 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 dessas categorias são longos.

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

Importante

• Este é um recurso em versão preliminar.
• Os recursos de versão preliminar não foram criados para uso em ambientes de produção e podem ter funcionalidade restrita. Esses recursos são disponibilizados antes de um lançamento oficial para que os clientes possam ter acesso antecipado e forneçam comentários.

Observação

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

Propriedades

O controle aceita as seguintes propriedades:

• Título - Este valor denota o título do gráfico.
• HideLabels - Defina esta opção como verdadeira para ocultar rótulos no gráfico.
• BarHeight - Este valor denota a altura da barra apresentada no gráfico.
• HideTooltip - Defina esta opção como verdadeira para ocultar dicas de ferramentas no gráfico.
• CustomColors - Defina esta opção como verdadeira para permitir cores personalizadas no gráfico, se fornecidas.
• Variante - Esta opção permite que o gráfico seja exibido em Absolute scale ou Part to whole.
• ChartDataMode - Esta opção permite mostrar o valor de cada barra em Fraction ou Percentage.
• Itens - Os itens de ação a serem renderizados:
  • ItemTitle - O nome de exibição dos dados específicos do gráfico (Item).
  • ItemLegend - A legenda associada aos dados específicos do gráfico (Item).
  • ItemValue - Define 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).

Observação

• A cor do item só se aplica se à 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 - Rótulo aria do leitor de tela.

Uso

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

Habilite a propriedade CustomColors para definir 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

Esse componente de tela só pode ser usado em aplicativos de tela e páginas personalizadas.