Deprecato
Questa visualizzazione è stata sostituita con una nuova versione. Utilizzala. Per una migrazione semplice, fai riferimento alla pagina delle note di rilascio.
Panoramica
Un grafico a torta visualizzato nel browser utilizzando SVG o VML. Visualizza suggerimenti quando fai clic sulle sezioni. Le sezioni vengono animate quando fai clic sulle voci della legenda.
Di: Google
Esempio
Codificalo autonomamente nel Visualization Playground
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.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.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Caricamento in corso...
Il nome del pacchetto google.load è "piechart"
google.load("visualization", "1", {packages: ["piechart"]});
Il nome della classe della visualizzazione è google.visualization.PieChart
var visualization = new google.visualization.PieChart(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
| Nome | Tipo | Predefinita | Descrizione |
|---|---|---|---|
| backgroundColor | stringa o oggetto | colore predefinito | Il colore di sfondo per l'area principale del grafico.
Una delle seguenti opzioni:
|
| borderColor | stringa o oggetto | colore predefinito | Il bordo attorno agli elementi del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor. |
| colori | Array di stringhe o oggetti | Colori predefiniti | Un array di colori, in cui ogni elemento specifica il colore di una serie. Devi specificare un elemento array per ogni serie.
|
| enableTooltip | boolean | true | Se il valore è impostato su true, le descrizioni comando vengono mostrate quando l'utente fa clic su una sezione. |
| focusBorderColor | stringa o oggetto | colore predefinito | Il bordo attorno agli elementi del grafico a fuoco (indicati dal mouse). I valori possibili sono quelli dell'opzione di configurazione backgroundColor. |
| altezza | numero | Altezza container | Altezza del grafico in pixel. |
| è in 3D | boolean | false | Se impostato su true, consente di visualizzare un grafico tridimensionale. |
| leggenda | stringa | "destra" | Posizione e tipo di legenda. Può corrispondere a uno dei seguenti:
|
| legendBackgroundColor | stringa o oggetto | colore predefinito | Il colore di sfondo per l'area di legenda del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor. |
| legendFontSize | numero | automatico | Le dimensioni del carattere della legenda, in pixel. |
| legendTextColor | stringa o oggetto | colore predefinito | Il colore del testo della legenda. I valori possibili sono quelli dell'opzione di configurazione backgroundColor. |
| pieJoinAngle | numero | 0 | Qualsiasi sezione al di sotto di questo angolo verrà combinata in una sezione generica con l'etichetta "Altro". |
| pieMinimalAngle | numero | 0 | Qualsiasi sezione più piccola di questo angolo non verrà disegnata nel grafico a torta, anche se riceverà comunque una voce legenda. Le altre sezioni si espanderanno per riempire la torta in proporzioni fisse. Nota: questo può distorcere i valori apparenti, soprattutto quando questo numero è elevato, perché una quantità viene rimossa dalla torta. Per calcolare le dimensioni delle sezioni, vengono uniti prima gli angoli minori di pieJoinAngle alla sezione "Altro", quindi tutte le sezioni più grandi di pieMinimalAngle vengono disegnate |
| title | stringa | nessun titolo | Testo da visualizzare sopra il grafico. |
| titleColor | stringa o oggetto | colore predefinito | Il colore del titolo del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor. |
| titleFontSize | numero | automatico | La dimensione del carattere per il titolo del grafico, in pixel. |
tooltipFontSize |
numero | 11 | La dimensione del carattere del testo della descrizione comando. Questo potrebbe essere ridotto se la descrizione comando è troppo piccola per contenere il testo nel carattere specificato. |
| tooltipHeight |
numero | 60 | L'altezza della descrizione comando in pixel. L'altezza della descrizione comando è fissa; non verrà mai aumentata o ridotta per adattarsi alla lunghezza o alle dimensioni del carattere del testo. Tuttavia, i valori superiori a 1/3 dell'altezza del grafico verranno ritagliati. |
| tooltipWidth | numero | 120 | La larghezza della descrizione comando, in pixel. La larghezza della descrizione comando è fissa; non verrà mai aumentata o ridotta per adattarsi alla lunghezza o alle dimensioni del carattere del testo. Tuttavia, tutti gli elementi superiori alla larghezza del grafico verranno ritagliati. |
| larghezza | numero | Larghezza del container | Larghezza del grafico in pixel. |
Metodi
| Metodo | Tipo restituito | Descrizione |
|---|---|---|
draw(data, options) |
Nessuno | Disegna il grafico. |
getSelection() |
Array di elementi di selezione | Implementazione standard di getSelection(). Gli elementi selezionati sono righe e celle. Più righe e/o una singola cella possono essere selezionate dall'utente. |
setSelection() |
Nessuno | Implementazione standard di setSelection(), ma supporta la selezione
di più righe e/o una cella. Tratta ogni voce di selezione come una selezione di riga o cella. |
Eventi
| Nome | Descrizione | Proprietà |
|---|---|---|
onmouseover |
Attivato quando l'utente passa il mouse su una sezione e passa negli indici di riga e colonna della cella corrispondente. | riga, colonna |
onmouseout |
Attivato quando l'utente allontana il mouse da una sezione e passa negli indici di riga e colonna della cella corrispondente. | 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. |
Nessun valore |
select |
Attivato quando l'utente fa clic su una sezione o una legenda. Quando è selezionata una sezione, viene selezionata la cella corrispondente nella tabella di dati; quando è selezionata una legenda, viene selezionata la colonna corrispondente nella tabella di dati. Per sapere quali elementi sono stati selezionati, chiama Nota: quando fai clic su una sezione non puoi passare dalla selezione alla selezione di una cella e viceversa; quando fai clic su una sezione, questa viene sempre selezionata. Facendo clic su una legenda, invece, puoi selezionare o deselezionare la riga. |
Nessun valore |
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.