Panoramica
Un indicatore con un quadrante, visualizzato all'interno del browser tramite SVG o VML.
Esempio
<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>
Al momento non è possibile specificare il titolo di un grafico a contatore come accade con altri grafici Google. Nell'esempio precedente, per visualizzare il titolo viene usato HTML semplice.
Inoltre, l'opzione animation.startup disponibile per molti altri grafici Google non è disponibile per i grafici a contatore. Se vuoi
un'animazione all'avvio, disegna il grafico inizialmente con valori impostati su
zero, poi di nuovo con il valore da animare.
Caricamento in corso...
Il nome del pacchetto google.charts.load è "gauge".
google.charts.load('current', {packages: ['gauge']});
Il nome della classe della visualizzazione è google.visualization.Gauge.
var visualization = new google.visualization.Gauge(container);
Formato dei dati
Ogni valore numerico viene visualizzato come un indicatore. Sono supportati due formati di dati alternativi:
- Due colonne. La prima colonna deve essere una stringa e contenere l'etichetta dell'indicatore. La seconda colonna deve essere un numero e contenere il valore dell'indicatore.
- Qualsiasi numero di colonne numeriche. L'etichetta di ogni indicatore è l'etichetta della colonna.
Opzioni di configurazione
| Nome | |
|---|---|
| animation.duration |
La durata dell'animazione, in millisecondi. Per maggiori dettagli, consulta la documentazione sull'animazione. Tipo:numero
Predefinito:400
|
| animation.easing |
La funzione di easing applicata all'animazione. Sono disponibili le seguenti opzioni:
Tipo:stringa
Predefinito: "lineare"
|
| forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame. Tipo: booleano
Predefinito:false
|
| greenColor |
Il colore da utilizzare per la sezione verde, nella notazione del colore HTML. Tipo:stringa
Predefinito: "#109618"
|
| greenFrom |
Il valore più basso di un intervallo contrassegnato da un colore verde. Tipo:numero
Predefinito:nessuno
|
| greenTo |
Il valore più alto di un intervallo contrassegnato da un colore verde. Tipo:numero
Predefinito:nessuno
|
| altezza |
Altezza del grafico in pixel. Tipo:numero
Predefinita: la larghezza del contenitore
|
| majorTicks |
Etichette per i segni di graduazione principali. Il numero di etichette definisce il numero di segni di graduazione principali in tutti i misuratori. Il valore predefinito è costituito da cinque segni di graduazione principali, con le etichette del valore del misuratore minimo e massimo. Tipo: array di stringhe
Predefinito:nessuno
|
| max |
Il valore massimo di un misuratore. Tipo:numero
Predefinito:100
|
| min |
Il valore minimo di un indicatore. Tipo:numero
Predefinito:0
|
| minorTicks |
Il numero di sezioni di graduazione minori in ogni sezione di graduazione principale. Tipo:numero
Predefinito:2
|
| redColor |
Il colore da utilizzare per la sezione rossa, nella notazione del colore HTML. Tipo:stringa
Predefinito: "#DC3912"
|
| redFrom |
Il valore più basso per un intervallo contrassegnato da un colore rosso. Tipo:numero
Predefinito:nessuno
|
| redTo |
Il valore più alto per un intervallo contrassegnato da un colore rosso. Tipo:numero
Predefinito:nessuno
|
| larghezza |
Larghezza del grafico in pixel. Tipo:numero
Predefinita: la larghezza del contenitore
|
| yellowColor |
Il colore da utilizzare per la sezione gialla, nella notazione del colore HTML. Tipo:stringa
Predefinito: "#FF9900"
|
| yellowFrom |
Il valore più basso per un intervallo contrassegnato da un colore giallo. Tipo:numero
Predefinito:nessuno
|
| yellowTo |
Il valore più alto per un intervallo contrassegnato da un colore giallo. Tipo:numero
Predefinito:nessuno
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna il grafico. Tipo di reso: nessuno
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
Nessun evento attivato.
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.