Visualizzazione: grafico a torta (immagine)

Importante: la sezione relativa alle tabelle delle immagini di Google Chart Tools è stata ufficialmente ritirata a partire dal 20 aprile 2012. Continuerà a funzionare come previsto dalle nostre norme sul ritiro.

  1. Panoramica
  2. Esempio
  3. Caricamento in corso…
  4. Formato dei dati
  5. Opzioni di configurazione
  6. Metodi
  7. Eventi
  8. Norme sui dati

Panoramica

Un grafico a torta che viene visualizzato come immagine utilizzando l'API di Google grafici.

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:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

        var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Caricamento

Il nome del pacchetto google.charts.load è "imagepiechart":

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

Il nome della classe della visualizzazione è google.visualization.ImagePieChart

  var visualization = new google.visualization.ImagePieChart(container);

Formato dei dati

Due colonne. La prima colonna deve essere una stringa e contenere l'etichetta della sezione. La seconda colonna deve essere un numero e contenere il valore della sezione.

Opzioni di configurazione

Puoi specificare le seguenti opzioni come parte dell'oggetto options trasmesso nel metodo draw() della visualizzazione.

Nome Tipo Predefinito Descrizione
coloredisfondo string "#FFFFFF" (bianco) Il colore dello sfondo del grafico nel formato colore dell'API Chart.
colore string Automatica Specifica un colore di base da utilizzare per tutte le serie; ogni serie sarà una gradazione del colore specificato. I colori sono specificati nel formato colore dell'API Chart. Ignorato se colors è specificato.
colori Array<string> Automatica Utilizzalo per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato colore dell'API Chart. Il colore i viene utilizzato per la colonna dati i, che torna all'inizio se sono presenti più colonne dati di colori. Se le varianti di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color.
abilitareEventi boolean false Di conseguenza, i grafici generano eventi attivati dagli utenti, come clic o clic del mouse. Supportato solo per tipi di grafici specifici. Vedi Eventi di seguito.
height number Altezza del container Altezza del grafico in pixel.
Is3D boolean false Se impostato su true, mostra un grafico tridimensionale.
etichette string "nessuno"

L'eventuale etichetta da mostrare per ogni sezione. Scegli uno dei seguenti valori:

  • 'none': nessuna etichetta.
  • "value": utilizza il valore della sezione come etichetta.
  • "nome": utilizza il nome della sezione (il nome della colonna).
leggenda string "a destra" La posizione della legenda nel grafico. Scegli uno dei seguenti valori: "in alto", "in basso", "a sinistra", "a destra", "nessuno".
title string nessun titolo Testo da visualizzare sopra il grafico.
width number Larghezza del container Larghezza del grafico in pixel.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessuno Disegna il grafico.

Eventi

Puoi registrarti per ascoltare gli eventi descritti nella pagina Grafico immagine generico.

Norme sui dati

Fai riferimento alle norme di logging dell'API Chart.