DonutChart controle (versão preliminar)

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

Gráficos de rosca são usados para mostrar proporção, que expressa um valor parcial em comparação a um valor total. Esses tipos de gráficos são melhores para mostrar a porcentagem de partes individuais em comparação com o todo, onde a mudança ao longo do tempo não é importante para visualizar. Eles são gráficos estatísticos circulares divididos em fatias para ilustrar a proporção numérica.

Este componente de código fornece um wrapper em torno do controle Fluent UI DonutChart 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.

• HideLabel - Esta opção controla se os rótulos devem ser mostrados ou ocultados no gráfico.

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

• ShowLabelsInPercentage - Esta opção controla se os rótulos devem ser mostrados em porcentagem.

• InnerRadius - Define o valor do raio interno do gráfico de rosca.

• ValueInsideDonut - Esta propriedade denota o valor a ser mostrado dentro do gráfico de donuts.

• CustomColors - Esta propriedade é 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).

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(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Limitações

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