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 c'è modo di specificare il titolo di un grafico a contatore come faresti con altri grafici di Google. Nell'esempio precedente, per visualizzare il titolo viene utilizzato il codice HTML.
Inoltre, l'opzione animation.startup disponibile per molti altri grafici di Google non è disponibile per il grafico a contatore. Se vuoi utilizzare un'animazione di avvio, disegna il grafico inizialmente con i valori impostati su zero, quindi disegna di nuovo con il valore a cui vuoi animarlo.
Caricamento
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 è quella della colonna.
Opzioni di configurazione
| Nome | |
|---|---|
| animazione.durata |
La durata dell'animazione espressa in millisecondi. Per maggiori dettagli, consulta la documentazione relativa all'animazione. Tipo: numero
Predefinito: 400
|
| animazione.Misure |
La funzione di adattamento 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 su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame. Tipo: booleano
Predefinito: falso
|
| coloreVerde |
Il colore da utilizzare per la sezione verde, in notazione HTML a colori. Tipo: stringa
Predefinito: "#109618"
|
| verdeDa |
Il valore più basso per un intervallo contrassegnato da un colore verde. Tipo: numero
Predefinito: nessuno
|
| GreenTo |
Il valore più alto per un intervallo contrassegnato da un colore verde. Tipo: numero
Predefinito: nessuno
|
| height |
Altezza del grafico in pixel. Tipo: numero
Predefinito: larghezza del container
|
| majorTick |
Etichette per i segni di graduazione principali. Il numero di etichette definisce il numero di segni di graduazione principali in tutti i parametri. L'impostazione predefinita è cinque segni di graduazione principali, con le etichette del valore dell'indicatore minimo e massimo. Tipo: matrice di stringhe
Predefinito: nessuno
|
| max |
Il valore massimo di un indicatore. Tipo: numero
Predefinito: 100
|
| min |
Il valore minimo di un indicatore. Tipo: numero
Predefinito: 0
|
| minorenniSpunta |
Il numero di sezioni di spunta minori in ogni sezione di segno di spunta principale. Tipo:numero
Predefinito: 2
|
| Colore rosso |
Il colore da utilizzare per la sezione rossa, in notazione HTML a colori. Tipo: stringa
Predefinito: "#DC3912"
|
| rossoDa |
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
|
| width |
Larghezza del grafico in pixel. Tipo: numero
Predefinito: larghezza del container
|
| coloreGiallo |
Il colore da utilizzare per la sezione gialla, in notazione HTML. Tipo: stringa
Predefinito: "#FF9900"
|
| gialloDa |
Il valore più basso per un intervallo contrassegnato da un colore giallo. Tipo: numero
Predefinito: nessuno
|
| gialloA |
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 ad alcun server.