Controle HorizontalBarChart (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.

Controle HorizontalBarChart.

Este componente de código fornece um envoltório para o controle Fluent UI HorizontalBarChart para uso em páginas de tela e personalizadas.

Importante

  • Esta é uma versão preliminar do recurso.
  • A versão prévia dos recursos não foi criada para uso em ambientes de produção e pode ter funcionalidade restrita. Esses recursos estão disponíveis antes de um lançamento oficial para que os clientes possam obter acesso antecipado e fornecer comentários.

Note

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

Propriedades

O controle aceita as seguintes propriedades:

  • Título - Este valor indica o título do gráfico.
  • HideLabels - Defina esta opção como verdadeira 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 verdadeira para permitir cores personalizadas no gráfico, se fornecido.
  • 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 do popover no eixo X para 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 valor HEX a ser exibido para os dados específicos do gráfico (Item).

Note

  • 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 é executado (não no estúdio), mas pode não renderizar corretamente enquanto estiver no estúdio.

Accessibility

  • AccessibilityLabel - Rótulo ARIA do leitor de tela.

Uso

Mapeie os valores de dados às propriedades correspondentes do gráfico na propriedade Items do controle, conforme demonstrado na seguinte fórmula.

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.

  • Last updated on