HorizontalBarChart - Stacked controle (versão preliminar)

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

O gráfico de barras empilhadas horizontais exibe várias séries de dados como barras empilhadas, com cada barra representando uma categoria. As barras são empilhadas uma ao lado da outra, 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 controle Fluent UI HorizontalBarChart - Empilhadas para usar nas telas e páginas 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

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

Propriedades

O controle aceita as seguintes propriedades:

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

• BarHeight - Este valor denota 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 - O nome de exibição dos dados do gráfico específico (Item).
  • ItemKey - A chave a ser usada para identificar o Item. As chaves devem ser exclusivas.
  • ItemValue - Define 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 um popover/dica de ferramenta.

Observação

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

Acessibilidade

• AccessibilityLabel - Leitor de tela aria-label

Uso

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

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

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