Visualizzazione: grafico a torta (immagine)

Importante. La sezione Grafici immagine di Google Chart Tools è stata ufficialmente ritirata il 20 aprile 2012. Continuerà a funzionare in base alle nostre norme relative al 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 Google Profiles.

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 in corso...

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 passato nel metodo draw() della visualizzazione.

Nome Tipo Predefinita Descrizione
backgroundColor stringa '#FFFFFF' (bianco) Il colore di sfondo del grafico nel formato colore API Chart.
color stringa Auto Specifica un colore di base da utilizzare per tutte le serie. Ogni serie avrà una gradazione del colore specificato. I colori vengono specificati nel formato dei colori dell'API Chart. Ignorato se viene specificato colors.
colori Array<stringa> Auto Utilizza questa opzione per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato dei colori dell'API Chart. Il colore i viene utilizzato per la colonna di dati i, passando all'inizio se ci sono più colonne di dati che colori. Se le variazioni di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color.
enableEvents boolean false Consente ai grafici di generare eventi attivati dall'utente, come clic o mouse sopra. Supportata solo per tipi di grafici specifici. Consulta la sezione Eventi riportata di seguito.
altezza numero Altezza container Altezza del grafico in pixel.
è in 3D boolean false Se impostato su true, consente di visualizzare un grafico tridimensionale.
etichette stringa "nessuno"

L'etichetta, se presente, da mostrare per ogni sezione. Scegli tra i seguenti valori:

  • "nessuno": nessuna etichetta.
  • "value" - Utilizza il valore della sezione come etichetta.
  • "name" - Utilizza il nome della sezione (il nome della colonna).
leggenda stringa "destra" La posizione della legenda sul grafico. Scegli uno dei seguenti valori: "top", "bottom", "left", "right", "none".
title stringa nessun titolo Testo da visualizzare sopra il grafico.
larghezza numero 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

Consulta le norme di logging dell'API Chart.