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