Visualização: medidor

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados

Visão geral

Um mostrador com um indicador renderizado no navegador usando SVG ou VML.

Exemplo

 
<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

No momento, não é possível especificar o título de um gráfico de medidor, como em outros gráficos do Google. No exemplo acima, um HTML simples é usado para exibir o título.

Além disso, a opção animation.startup disponível para muitos outros gráficos do Google não está disponível para o gráfico de medidor. Se você quiser uma animação de inicialização, desenhe o gráfico inicialmente com os valores definidos como zero e, em seguida, desenhe novamente com o valor que você quer animar.

Carregando

O nome do pacote google.charts.load é "gauge".

  google.charts.load('current', {packages: ['gauge']});

O nome da classe do layout é google.visualization.Gauge. 

  var visualization = new google.visualization.Gauge(container);

Formato de dados

Cada valor numérico é exibido como um medidor. Há suporte para dois formatos de dados alternativos:

  1. Duas colunas. A primeira coluna deve ser uma string e conter o rótulo do medidor. A segunda coluna deve ser um número e conter o valor do medidor.
  2. Qualquer número de colunas numéricas. O rótulo de cada medidor é o rótulo da coluna.

Opções de configuração

Nome
animação.duração

É a duração da animação em milissegundos. Para mais detalhes, consulte a documentação de animação.

Tipo: número
Padrão: 400
animação.easing

A função de easing aplicada à animação. As seguintes opções estão disponíveis:

  • "linear" - Velocidade constante.
  • 'in' - Facilidade em - Começar devagar e acelerar.
  • "out" - "easing" - comece rápido e desacelere.
  • "InAndOut" - facilidade dentro e fora - Inicie devagar, acelere e, em seguida, desacelere.
Tipo: string
Padrão: "linear"
FrameIForce

Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames.

Tipo: booleano
Padrão:falso
GreenColor

A cor a ser usada para a seção verde, em notação de cor HTML.

Tipo: string
Padrão: "#109618"
verdeDe

O valor mais baixo de um intervalo marcado com a cor verde.

Tipo:número
Padrão: nenhum
verdePara

O valor mais alto de um intervalo marcado com a cor verde.

Tipo:número
Padrão: nenhum
altura

Altura do gráfico em pixels.

Tipo: número
Padrão:largura do contêiner
Marcação importante

Rótulos para as principais marcações. O número de rótulos define o número de marcações importantes em todos os medidores. O padrão é cinco marcações principais, com os rótulos do valor mínimo e máximo do medidor.

Tipo:matriz de strings
Padrão: nenhum
max

O valor máximo de um medidor.

Tipo:número
Padrão:100
min

O valor mínimo de um medidor.

Tipo:número
Padrão: 0
Tíquetes menores

O número de seção de marcação em cada seção principal.

Tipo:número
Padrão: 2
redColor

A cor a ser usada para a seção vermelha, em notação de cor HTML.

Tipo: string
Padrão: "#DC3912"
redDe

O valor mais baixo de um intervalo marcado com a cor vermelha.

Tipo:número
Padrão:nenhum
vermelho para

O valor mais alto de um intervalo marcado com a cor vermelha.

Tipo: número
Padrão:nenhum
largura

Largura do gráfico em pixels.

Tipo: número
Padrão: largura do contêiner
amarelo

A cor a ser usada para a seção amarela, em notação de cor HTML.

Tipo: string
Padrão: '#FF9900'
amareloDe

O valor mais baixo de um intervalo marcado com a cor amarela.

Tipo:número
Padrão:nenhum
amareloPara

O valor mais alto de um intervalo marcado com a cor amarela.

Tipo: número
Padrão:nenhum

Métodos

Método
draw(data, options)

Desenha o gráfico.

Tipo de retorno: nenhum
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Tipo de retorno: nenhum

Eventos

Nenhum evento acionado.

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.