HorizontalBarChart - Stacked controlo (pré-visualização)

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

O gráfico de barras empilhadas horizontal apresenta várias séries de dados como barras empilhadas, com cada barra representando uma categoria. As barras são empilhadas lado a lado, com o comprimento de cada barra representando o valor da categoria da série.

Este componente de código fornece um wrapper em torno do controlo Fluent UI HorizontalBarChart - Stacked para utilização em telas e 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

Para obter a documentação completa e o código-fonte, consulte Repositório de componentes de código do GitHub.

_Propriedades

O controlo aceita as propriedades seguintes:

• HideLegend - Este valor indica se as legendas devem ser mostradas ou ocultadas no gráfico.

• BarHeight - Este valor indica a altura da barra apresentada no gráfico.

• HideTooltip - Esta opção controla se as dicas de ferramentas devem ser mostradas ou ocultadas no gráfico.

• CustomColors - Esta opção é usada para mostrar cores personalizadas no gráfico, se fornecido

• Itens - Os itens de ação a serem renderizados

  • ItemTitle - A nome a apresentar dos dados específicos do gráfico (Item).
  • ItemKey - A chave a ser usada para identificar o Item. As chaves têm de ser exclusivas.
  • ItemValue - Defina o valor dos 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).
  • ItemCallout - Defina o valor a ser exibido em uma dica de popover/ferramenta.

Nota

A cor do item só se aplica se a propriedade CustomColors estiver ativada.

Acessibilidade

• AccessibilityLabel - Etiqueta de ária de Leitor de tela

Utilização

Mapeie os valores de dados para as propriedades do gráfico correspondentes na propriedade do controlo Items, como demonstrado na fórmula abaixo. O gráfico ajusta automaticamente o visual para corresponder aos valores relativos.

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

Limitações

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