Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzazione: indicatore

Panoramica
Esempio
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati

Panoramica

Un indicatore con un quadrante, visualizzato all'interno del browser tramite SVG o VML.

Esempio

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);
      }

<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: 'linear' - Velocità costante. 'in' - Facilità in entrata - Inizia piano e accelera. 'out' - Facilità di uscita - Inizia velocemente e rallenta. 'inAndOut' - Facilità di entrata e uscita - Inizia piano, accelera e poi rallenta. 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.