GaugeChart controle (versão preliminar)

Artigo
10/16/2024

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

There Existem dois tipos de gráficos de medidores: 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á sendo medido pode ser personalizada para se adequar a determinados cenários ou para alinhar com cores de marca.

O medidor de classificação mostra o status do valor atual dentro de alguns intervalos ou segmentos predefinidos. A agulha é um componente necessário Here.

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

Para obter a documentação completa e o código-fonte, consulte o 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.
Subrótulo - Este valor denota 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 denota o valor máximo do medidor.
HideMinMax - Este valor indica se os valores mínimo e máximo devem ser ocultados no medidor.
HideLegend - Este valor indica se a legenda deve ser ocultada no medidor.
ChartValueFormat - Este valor indica que o valor do gráfico deve ser exibido em Percentage ou Fraction.
CustomColors - Defina este valor como verdadeiro para permitir cores personalizadas no gráfico, se fornecido.
Itens - Os itens de ação a serem renderizados:
- ItemLegend - O nome de 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).

Observação

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

Acessibilidade

AccessibilityLabel - Rótulo aria do leitor de tela.

Uso

Velocímetro

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

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 100% da diferença entre MinValue e MaxValue. Use 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

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

Compartilhar via