DonutChart controlo (pré-visualização)

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

Os gráficos de donut são usados para mostrar proporção, que expressa um valor parcial em comparação com um valor total. Esses tipos de gráficos são melhores para mostrar a porcentagem de partes individuais em comparação com um todo, onde a mudança ao longo do tempo não é importante visualizar. 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 personalizadas do canvas & .

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

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

_Propriedades

O controlo aceita as propriedades seguintes:

• Título - Este valor indica o título do gráfico.

• HideLabel - Esta opção controla se os rótulos devem ser exibidos 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 exibidos em porcentagem.

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

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

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

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

Limitações

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