Visualizzazione: grafico a torta

Panoramica

Un grafico a torta visualizzato nel browser tramite SVG o VML. Visualizza le descrizioni comando quando passi il mouse sopra le sezioni.

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':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Creare un grafico a torta 3D

Se imposti l'opzione is3D su true, il grafico a torta verrà disegnato come se avesse tre dimensioni:

is3D è false per impostazione predefinita, quindi qui lo impostiamo esplicitamente su true: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Creare un grafico ad anello

Un grafico a donut è un grafico a torta con un foro al centro. Puoi creare grafici ad anello con l'opzione pieHole:

L'opzione pieHole deve essere impostata su un numero compreso tra 0 e 1, corrispondente al rapporto dei raggi tra il foro e il grafico. I numeri compresi tra 0,4 e 0,6 saranno i migliori nella maggior parte dei grafici. I valori uguali o maggiori di 1 verranno ignorati e un valore pari a 0 chiuderà completamente il piehole.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Non puoi combinare le opzioni pieHole e is3D; in caso contrario, pieHole verrà ignorato.

Tieni presente che Google Grafici cerca di posizionare l'etichetta il più vicino possibile al centro della sezione. Se hai un grafico ad anello con una sola fetta, il centro della fetta potrebbe rientrare nel foro dell'anello. In questo caso, modifica il colore dell'etichetta:
Opzioni
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML completo
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Ruotare un grafico a torta

Per impostazione predefinita, i grafici a torta iniziano con il bordo sinistro della prima sezione che punta verso l'alto. Puoi modificare questa impostazione con l'opzione pieStartAngle:

Qui ruotiamo il grafico di 100 gradi in senso orario con l'opzione pieStartAngle: 100. È scelta perché quell'angolo fa sì che l'etichetta "Italiano" rientri nella fetta.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Esplodere una sezione

Puoi separare le sezioni del grafico a torta dal resto del grafico con la proprietà offset dell'opzione slices:

Per separare una sezione, crea un oggetto slices e assegna al numero di sezione appropriato un offset compreso tra 0 e 1. Di seguito, assegniamo offset progressivamente più grandi alle sezioni 4 (gujarati), 12 (marathi), 14 (Oriya) e 15 (Punjabi): 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Rimozione di sezioni

Per omettere una sezione, cambia il colore in 'transparent':

Abbiamo utilizzato anche pieStartAngle per ruotare il grafico di 135 gradi, pieSliceText per rimuovere il testo dalle sezioni e tooltip.trigger per disabilitare le descrizioni comando:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Soglia di visibilità della sezione

Puoi impostare un valore come soglia per il rendering individuale di una fetta del grafico a torta. Questo valore corrisponde a una frazione del grafico (con valore 1 per l'intero grafico). Per impostare questa soglia come percentuale del totale, dividi la percentuale desiderata per 100 (per una soglia del 20%, il valore sarebbe 0,2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Tutte le sezioni più piccole di questa soglia verranno combinate in una singola sezione "Altro" e avranno il valore combinato di tutte le sezioni sotto la soglia. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Caricamento in corso...

Il nome del pacchetto google.charts.load è "corechart".

  google.charts.load("current", {packages: ["corechart"]});

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

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

Formato dei dati

Righe:ogni riga della tabella rappresenta una sezione.

Colonne:

  Colonna 0 Colonna 1 ... Colonna N (facoltativa)
Scopo: Etichette sezioni Valori sezione ... Ruoli facoltativi
Tipo di dati: stringa numero ...
Ruolo: dominio dati ...
Ruoli colonna facoltativi: Assente Assente ...

Opzioni di configurazione

Nome
backgroundColor

Il colore di sfondo per l'area principale del grafico. Può essere una semplice stringa di colore HTML, ad esempio 'red' o '#00cc00', oppure un oggetto con le seguenti proprietà.

Tipo: stringa o oggetto
Predefinito: "bianco"
backgroundColor.stroke

Il colore del bordo del grafico, come stringa di colore HTML.

Tipo:stringa
Predefinito: "#666"
backgroundColor.strokeWidth

Lo spessore del bordo, in pixel.

Tipo:numero
Predefinito:0
backgroundColor.fill

Il colore di riempimento del grafico, come stringa di colore HTML.

Tipo:stringa
Predefinito: "bianco"
chartArea

Un oggetto con membri per configurare il posizionamento e le dimensioni dell'area del grafico (dove viene disegnato il grafico stesso, esclusi assi e legende). Sono supportati due formati: un numero o un numero seguito da %. Un numero semplice è un valore in pixel, mentre un numero seguito da % è una percentuale. Esempio: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tipo:oggetto
Predefinito:null
chartArea.backgroundColor
Colore di sfondo dell'area del grafico. Quando si utilizza una stringa, può essere una stringa esadecimale (ad es. '#fdc') o un nome di colore inglese. Quando si utilizza un oggetto, è possibile fornire le seguenti proprietà:
  • stroke: il colore, fornito come stringa esadecimale o nome colore inglese.
  • strokeWidth: se fornito, disegna un bordo intorno all'area del grafico della larghezza specificata (e con il colore stroke).
Tipo: stringa o oggetto
Predefinito: "bianco"
chartArea.left

Quanto è distante il grafico dal bordo sinistro.

Tipo:numero o stringa.
Predefinita: automatica
chartArea.top

Quanto è distante il grafico dal bordo superiore.

Tipo:numero o stringa.
Predefinita: automatica
chartArea.width

Larghezza dell'area del grafico.

Tipo:numero o stringa.
Predefinita: automatica
chartArea.height

Altezza dell'area del grafico.

Tipo:numero o stringa.
Predefinita: automatica
colori

I colori da utilizzare per gli elementi del grafico. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: colors:['red','#004411'].

Tipo: array di stringhe
Predefinito:colori predefiniti
enableInteractivity

Indica se il grafico genera eventi basati sugli utenti o reagisce all'interazione dell'utente. Se il valore è false, il grafico non genera eventi di tipo "select" o altri eventi basati sull'interazione (ma genera eventi pronti o di errore) e non mostra il testo del passaggio del mouse o altri eventi basati sull'input dell'utente.

Tipo: booleano
Predefinito:true
fontSize

La dimensione predefinita dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico.

Tipo:numero
Predefinito:automatico
fontName

Il tipo di carattere predefinito per tutto il testo del grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico.

Tipo:stringa
Predefinito: 'Arial'
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
altezza

Altezza del grafico, in pixel.

Tipo:numero
Predefinita: altezza dell'elemento contenitore
è in 3D

Se impostato su true, consente di visualizzare un grafico tridimensionale.

Tipo: booleano
Predefinito:false
leggenda

Un oggetto con membri per configurare vari aspetti della legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo:oggetto
Predefinito:null
legend.alignment

Allineamento della legenda. Può corrispondere a uno dei seguenti:

  • "start" - Allineato all'inizio dell'area assegnata alla legenda.
  • "center": centrato nell'area assegnata alla legenda.
  • "end" - Allineato alla fine dell'area assegnata alla legenda.

Inizio, centro e fine sono relativi allo stile (verticale o orizzontale) della legenda. Ad esempio, in una legenda "a destra", "start" ed "end" si trovano rispettivamente in alto e in basso; per una legenda "in alto", "start" ed "end" si trovano rispettivamente a sinistra e a destra dell'area.

Il valore predefinito dipende dalla posizione della legenda. Per le legende "bottom", il valore predefinito è "center", mentre per le altre legende è "start".

Tipo:stringa
Predefinito:automatico
legend.position

Posizione della legenda. Può corrispondere a uno dei seguenti:

  • "bottom" - Visualizza la legenda sotto il grafico.
  • "etichettato" - Disegna linee che collegano le sezioni ai relativi valori dei dati.
  • "left": visualizza la legenda a sinistra del grafico.
  • "nessuno": non mostra alcuna legenda.
  • "destra" - Visualizza la legenda a destra del grafico.
  • "top" - Visualizza la legenda sopra il grafico.
Tipo:stringa
Predefinito: "right"
legend.maxLines

Numero massimo di righe nella legenda. Imposta questo valore su un numero maggiore di uno per aggiungere righe alla legenda. Nota: la logica esatta utilizzata per determinare il numero effettivo di linee visualizzate è ancora in flusso.

Al momento questa opzione funziona solo quando legend.position è "top".

Tipo:numero
Predefinito:1
legend.textStyle

Un oggetto che specifica lo stile di testo della legenda. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

Se è compreso tra 0 e 1, visualizza un grafico ad anello. Il foro ha un raggio pari a number volte il raggio del grafico.

Tipo:numero
Predefinito:0
pieSliceBorderColor

Il colore dei bordi della sezione. Applicabile solo quando il grafico è bidimensionale.

Tipo:stringa
Predefinito: "bianco"
pieSliceText

Il contenuto del testo visualizzato nella sezione. Può corrispondere a uno dei seguenti:

  • "percentage" - La percentuale della dimensione della sezione rispetto al totale.
  • "value" - Il valore quantitativo della sezione.
  • "label" - Il nome della sezione.
  • "nessuno": non viene visualizzato alcun testo.
Tipo:stringa
Predefinito: "percentage"
pieSliceTextStyle

Un oggetto che specifica lo stile di testo della sezione. L'oggetto ha questo formato:

{color: <string>, fontName: <string>, fontSize: <number>}

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

L'angolo, in gradi, in base al quale ruotare il grafico. Il valore predefinito di 0 orienterà il bordo più a sinistra della prima sezione direttamente verso l'alto.

Tipo:numero
Predefinita: 0
reverseCategories

Se impostato su true, disegna le sezioni in senso antiorario. L'impostazione predefinita è disegnare in senso orario.

Tipo: booleano
Predefinito:false
pieResidueSliceColor

Colore per la sezione della combinazione che contiene tutte le sezioni al di sotto di sliceVisibilityThreshold.

Tipo:stringa
Predefinito: '#CCC'
pieResidueSliceLabel

Un'etichetta per la sezione della combinazione che contiene tutte le sezioni al di sotto di sliceVisibilityThreshold.

Tipo:stringa
Predefinito: "Altro"
sezioni

Un array di oggetti, ognuno dei quali descrive il formato della sezione corrispondente della torta. Per utilizzare i valori predefiniti per una sezione, specifica un oggetto vuoto (ad es. {}). Se non viene specificato un valore o una sezione, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:

  • color: il colore da utilizzare per questa sezione. Specifica una stringa di colore HTML valida.
  • offset: quanto dista la fetta dal resto della torta, da 0,0 (per niente) a 1,0 (raggio della torta).
  • textStyle: esegue l'override del valore pieSliceTextStyle globale per questa sezione.

Puoi specificare un array di oggetti, ognuno dei quali si applica alla sezione nell'ordine specificato oppure puoi specificare un oggetto in cui ogni elemento figlio ha una chiave numerica che indica a quale sezione si applica. Ad esempio, le seguenti due dichiarazioni sono identiche e dichiarano la prima sezione come nera e la quarta come rossa: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Tipo: array di oggetti oppure oggetto con oggetti nidificati
Predefinito: {}
sliceVisibilityThreshold

Il valore frazionario della torta, sotto il quale una fetta non verrà visualizzata individualmente. Tutte le sezioni che non hanno superato questa soglia verranno combinate in una singola sezione "Altro", la cui dimensione corrisponde alla somma di tutte le dimensioni. L'impostazione predefinita non è mostrare singolarmente nessuna sezione inferiore a mezzo grado. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Tipo:numero
Predefinito:mezzo grado (0,5/360, 1/720 o 0,0014)
title

Testo da visualizzare sopra il grafico.

Tipo:stringa
Predefinito:nessun titolo
titleTextStyle

Un oggetto che specifica lo stile di testo del titolo. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Descrizione comando

Un oggetto con membri per configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo:oggetto
Predefinito:null
tooltip.ignoreBounds

Se impostato su true, consente al disegno delle descrizioni comando di scorrere al di fuori dei limiti del grafico su tutti i lati.

Nota:questo vale solo per le descrizioni comando HTML. Se questa funzionalità è abilitata con le descrizioni comando SVG, qualsiasi overflow al di fuori dei limiti del grafico verrà ritagliato. Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando.

Tipo: booleano
Predefinito:false
tooltip.isHtml

Se il criterio viene impostato su true, utilizza le descrizioni comando per il rendering HTML (anziché SVG). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando.

Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalla visualizzazione Grafico a bolle.

Tipo: booleano
Predefinito:false
tooltip.showColorCode

Se il valore è vero, mostra i quadrati colorati accanto alle informazioni della sezione nella descrizione comando.

Tipo: booleano
Predefinito:false
tooltip.text

Le informazioni da visualizzare quando l'utente passa il mouse sopra una fetta di un grafico a torta. Sono supportati i seguenti valori:

  • "Entrambi" - [Predefinito] Visualizza sia il valore assoluto della sezione sia la percentuale dell'intero.
  • "value" - Visualizza solo il valore assoluto della sezione.
  • "percentage" - Visualizza solo la percentuale del tutto rappresentato dalla sezione.
Tipo:stringa
Predefinito: "entrambe"
tooltip.textStyle

Un oggetto che specifica lo stile di testo della descrizione comando. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

L'interazione dell'utente che determina la visualizzazione della descrizione comando:

  • "focus" - La descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
  • "nessuno" - La descrizione comando non verrà visualizzata.
  • "selection" - La descrizione comando verrà visualizzata quando l'utente selezionerà l'elemento.
Tipo:stringa
Predefinito: "focus"
larghezza

Larghezza del grafico, in pixel.

Tipo:numero
Predefinita: larghezza dell'elemento contenitore

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
getAction(actionID)

Restituisce l'oggetto azione descrizione comando con l'oggetto actionID richiesto.

Tipo restituito: oggetto
getBoundingBox(id)

Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico id. Il formato per id non è ancora documentato (sono i valori restituiti dei gestori di eventi), ma ecco alcuni esempi:

var cli = chart.getChartLayoutInterface();

Altezza dell'area del grafico
cli.getBoundingBox('chartarea').height
Larghezza della terza barra nella prima serie di un grafico a barre o a colonne
cli.getBoundingBox('bar#0#2').width
Riquadro di delimitazione del quinto segmento di un grafico a torta
cli.getBoundingBox('slice#4')
Riquadro di delimitazione dei dati di un grafico verticale (ad es. a colonne):
cli.getBoundingBox('vAxis#0#gridline')
Riquadro di delimitazione dei dati di un grafico orizzontale (ad es. a barre):
cli.getBoundingBox('hAxis#0#gridline')

I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getChartAreaBoundingBox()

Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dei contenuti del grafico (ovvero, escludendo etichette e legenda):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getChartLayoutInterface()

Restituisce un oggetto contenente informazioni sul posizionamento del grafico e dei suoi elementi sullo schermo.

I seguenti metodi possono essere chiamati sull'oggetto restituito:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getHAxisValue(xPosition, optional_axis_index)

Restituisce il valore orizzontale dei dati in xPosition, ovvero un offset di pixel dal bordo sinistro del contenitore del grafico. Può essere negativo.

Esempio: chart.getChartLayoutInterface().getHAxisValue(400).

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
getImageURI()

Restituisce il grafico serializzato come URI immagine.

Viene chiamato dopo che il grafico è stato disegnato.

Consulta la sezione Stampa di grafici PNG.

Tipo di ritorno:stringa
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono sezioni e voci di legenda. Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

Tipo restituito: array di elementi di selezione
getVAxisValue(yPosition, optional_axis_index)

Restituisce il valore dei dati verticali in yPosition, ovvero un offset di pixel verso il basso dal bordo superiore del contenitore del grafico. Può essere negativo.

Esempio: chart.getChartLayoutInterface().getVAxisValue(300).

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
getXLocation(dataValue, optional_axis_index)

Restituisce la coordinata x dei pixel di dataValue rispetto al bordo sinistro del contenitore del grafico.

Esempio: chart.getChartLayoutInterface().getXLocation(400).

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
getYLocation(dataValue, optional_axis_index)

Restituisce la coordinata y dei pixel di dataValue rispetto al bordo superiore del contenitore del grafico.

Esempio: chart.getChartLayoutInterface().getYLocation(300).

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
removeAction(actionID)

Rimuove l'azione della descrizione comando con l'oggetto actionID richiesto dal grafico.

Tipo di reso: none
setAction(action)

Imposta un'azione della descrizione comando da eseguire quando l'utente fa clic sul testo dell'azione.

Il metodo setAction prende un oggetto come parametro di azione. Questo oggetto deve specificare tre proprietà: id: l'ID dell'azione da impostare, text, il testo da visualizzare nella descrizione comando dell'azione, e action, la funzione da eseguire quando un utente fa clic sul testo dell'azione.

Qualsiasi azione della descrizione comando deve essere impostata prima di chiamare il metodo draw() del grafico. Descrizione estesa.

Tipo di reso: none
setSelection()

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono sezioni e voci di legenda. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno

Eventi

Per maggiori informazioni su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi e Attivazione degli eventi.

Nome
click

Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando viene fatto clic su titolo, elementi di dati, voci della legenda, assi, linee della griglia o etichette.

Proprietà:targetID
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
onmouseover

Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una voce di sezione o legenda è correlata a una riga nella tabella dati (l'indice di colonna è nullo).

Proprietà:riga, colonna
onmouseout

Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una voce di sezione o legenda è correlata a una riga nella tabella dati (l'indice di colonna è nullo).

Proprietà:riga, colonna
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.