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 medidor com um mostrador, 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 há como especificar o título de um gráfico de medidor como em outros gráficos do Google. No exemplo acima, 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 valores definidos como zero e desenhe novamente com o valor desejado.

Carregando

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

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

O nome da classe da visualização é 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 identificador 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
animation.duration

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

Tipo: número
Padrão:400
animation.easing

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

  • 'linear' - velocidade constante.
  • "In" (aceleração) - Inicie devagar e acelere.
  • "out" (abrandamento): inicie rápido e desacelere.
  • "inAndOut" - Acelerar e desacelerar - Inicie devagar, acelere e depois desacelere.
Tipo: string
Padrão: 'linear'
forceIFrame

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:false
greenColor

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

Tipo: string
Padrão: '#109618'
greenFrom

O menor valor de um intervalo marcado por uma cor verde.

Tipo: número
Padrão:nenhum
greenTo

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

Tipo: número
Padrão:nenhum
height

Altura do gráfico em pixels.

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

Rótulos das principais marcações. O número de rótulos define o número de marcações principais 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
minorTicks

O número de seções de marcação secundária em cada seção de marcação principal.

Tipo:número
Padrão:2
redColor

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

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

O menor valor de um intervalo marcado pela cor vermelha.

Tipo: número
Padrão:nenhum
redTo

O valor mais alto de um intervalo marcado pela cor vermelha.

Tipo: número
Padrão:nenhum
width

Largura do gráfico em pixels.

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

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

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

O menor valor de um intervalo marcado com uma cor amarela.

Tipo: número
Padrão:nenhum
yellowTo

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

Tipo: número
Padrão:nenhum

Métodos

Método
draw(data, options)

Desenha o gráfico.

Return Type: nenhum
clearChart()

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

Return Type: 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.