Partilhar via

GaugeChart controlo (pré-visualização)

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

Existem dois tipos de gráficos de medidor: velocímetro e medidor de classificação.

Controle GaugeChart.

O velocímetro mede um valor numérico em relação a um todo, como a capacidade de armazenamento. A agulha é um componente opcional. A cor do segmento que representa o valor que está a ser medido pode ser personalizada para se adequar a determinados cenários ou para se alinhar com as cores da marca.

O medidor de classificação mostra o estatuto do valor atual dentro de alguns intervalos ou segmentos predefinidos. A agulha é um componente obrigatório aqui.

Este componente de código fornece um wrapper em torno do controlo Fluent UI GaugeChart para utilização em telas e páginas personalizadas.

Importante

  • Esta é uma funcionalidade de pré-visualização.
  • As funcionalidades de pré-visualização não se destinam a utilização em produção e podem ter funcionalidades 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:

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

  • Subrótulo - Este valor indica o subrótulo do gráfico.

  • ChartValue - Este valor indica o valor a ser exibido no medidor.

  • MinValue - Este valor denota o valor mínimo do medidor.

  • MaxValue - Este valor indica o valor máximo do medidor.

  • HideMinMax - Este valor indica se os valores min e max devem ser ocultados no medidor.

  • HideLegend - Este valor indica se a legenda deve ser ocultada no medidor.

  • ChartValueFormat - Este valor indica para mostrar o valor do gráfico em Percentage ou Fraction.

  • CustomColors - Defina esse valor como true para permitir cores personalizadas no gráfico, se fornecido.

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

    • ItemLegend - O nome para exibição dos dados específicos do gráfico (Item).
    • ItemSize - O tamanho 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 aria-label para leitor de ecrã.

Utilização

Velocímetro

Apenas uma linha é necessária para Items. Use o ChartValue para indicar a posição de destino.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

Medidor de classificação

Forneça os intervalos como a Items propriedade. A soma de todos os ItemSize valores deve somar até 100% da diferença entre o MinValue e MaxValue. Use o ChartValue para indicar a posição atual.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

Limitações

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

  • Last updated on