GaugeChart controlo (pré-visualização)

Artigo
10/16/2024

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

Existem dois tipos de gráficos de medição: 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 controle Fluent UI GaugeChart para uso em canvas & 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:

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 indica 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 - A nome a apresentar 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 - Tela Leitor aria-label.

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 conforme 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.

Partilhar via