Panoramica
Un grafico a torta che viene visualizzato nel browser utilizzando 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, pertanto lo abbiamo impostato 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 ciambella è 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 tra raggi tra il foro e il grafico. I numeri compresi tra 0,4 e 0,6 avranno un aspetto migliore sulla maggior parte dei grafici.
Valori uguali o superiori a 1 verranno ignorati e un valore pari a 0
comporterà la chiusura completa della pagina.
<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 questo caso, pieHole verrà ignorato.
Tieni presente che Google Tables tenta 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 ricadere nel foro della ciambella. In questo caso, modifica il colore dell'etichetta:
var options = {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
<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>
Rotazione di un grafico a torta
Per impostazione predefinita, i grafici a torta iniziano con il bordo sinistro della prima fetta che punta verso l'alto. Puoi modificare questa impostazione con l'opzione pieStartAngle:
In questa rotazione il grafico viene ruotato di 100 gradi in senso orario con l'opzione pieStartAngle: 100. (scegliendo questo obiettivo perché
questa particolare angolazione fa in modo che l'etichetta "Italiana" rientri nella porzione).
<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>
Esplosione di una fetta
Puoi separare le sezioni del grafico dal resto del grafico con la proprietà offset dell'opzione slices:
Per separare una sezione, crea un oggetto slices e assegna il numero di porzione appropriato a offset tra 0 e 1. Di seguito, assegniamo compensazioni progressivamente maggiori 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 delle sezioni
Per omettere una sezione, modifica il colore in 'transparent':
Abbiamo anche usato pieStartAngle per ruotare il grafico di 135 gradi, pieSliceText per rimuovere il testo dalle sezioni e tooltip.trigger per disattivare 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 visualizzare singolarmente una porzione della torta. Questo valore corrisponde a una frazione del grafico (con l'intero grafico del valore 1). Per impostare questa soglia come percentuale del totale, dividi la percentuale desiderata per 100 (per una soglia del 20%, il valore sarà 0,2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Tutte le sezioni di dimensioni inferiori a questa soglia verranno combinate in una singola sezione "Altro" e avranno il valore combinato di tutte le sezioni al di sotto della 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
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) | |
|---|---|---|---|---|
| Finalità: | Etichette per sezione | Valori sezioni | … | Ruoli facoltativi |
| Tipo di dati: | string | number | … | |
| Ruolo: | dominio | dati | … | |
| Ruoli di colonna facoltativi: | Assente | Assente | … |
Opzioni di configurazione
| Nome | |
|---|---|
| coloredisfondo |
Il colore dello sfondo dell'area principale del grafico. Può essere una semplice stringa di colore HTML, ad esempio Tipo: stringa o oggetto
Predefinito: "bianco"
|
| coloreColore sfondo |
Il colore del bordo del grafico, come stringa di colore HTML. Tipo: stringa
Predefinito: "#666"
|
| sfondoColore.LarghezzaLarghezza |
La larghezza del bordo, in pixel. Tipo: numero
Predefinito: 0
|
| sfondocolore.fill |
Il colore di riempimento del grafico, come stringa del colore HTML. Tipo: stringa
Predefinito: "bianco"
|
| area grafico |
Un oggetto con membri per configurare il posizionamento e le dimensioni dell'area del grafico (dove viene tracciato il grafico stesso, escludendo l'asse e le legende). Sono supportati due formati: un numero o un
seguito da %. Un numero semplice è un valore in pixel; un numero seguito da % è una
percentuale. Esempio: Tipo: oggetto
Predefinito: null
|
| graficoArea.Sfondo Colore |
Colore sfondo area grafico. Una stringa utilizzata può essere una stringa esadecimale (ad es. "#fdc") o un nome di colore inglese. Quando si utilizza un oggetto, è possibile fornire le seguenti proprietà:
Tipo: stringa o oggetto
Predefinito: "bianco"
|
| chartArea.left |
La distanza desiderata dal bordo sinistro. Tipo: numero o stringa
Predefinito: automatica
|
| chartArea.top |
La distanza da cui tracciare il grafico dal bordo superiore. Tipo: numero o stringa
Predefinito: automatica
|
| graficoarea.larghezza |
Larghezza area grafico. Tipo: numero o stringa
Predefinito: automatica
|
| graficoArea.altezza |
Altezza area grafico. Tipo: numero o stringa
Predefinito: automatica
|
| colori |
I colori da utilizzare per gli elementi del grafico. Un array di stringhe, dove ogni elemento è una stringa di colore HTML, ad esempio Tipo: matrice di stringhe
Predefinito: colori predefiniti
|
| EnableInteractivity |
Indica se il grafico genera eventi basati sugli utenti o reagisce alle interazioni degli utenti. Se il valore è false, il grafico non mostrerà "seleziona" o altri eventi basati sulle interazioni (ma verrà generato eventi di errore o pronti) e non mostrerà il testo al passaggio del mouse o non cambierà in base all'input dell'utente. Tipo: booleano
Predefinito: true
|
| Dimensione carattere |
Le dimensioni predefinite dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico. Tipo: numero
Predefinito: automatica
|
| Nome carattere |
Il tipo di carattere predefinito per tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico. Tipo: stringa
Predefinito: "iframe"
|
| forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame. Tipo: booleano
Predefinito: falso
|
| height |
Altezza del grafico in pixel. Tipo: numero
Predefinito: altezza dell'elemento contenitore
|
| Is3D |
Se true, mostra un grafico tridimensionale. Tipo: booleano
Predefinito: falso
|
| leggenda |
Un oggetto con membri per configurare i vari aspetti della legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: oggetto
Predefinito: null
|
| legenda.allineamento |
Allineamento della legenda. Può corrispondere a uno dei seguenti:
L'inizio, la parte centrale e la fine sono relative allo stile (verticale o orizzontale) della legenda. Ad esempio, nella legenda "destra", "inizio" e "fine" si trovano rispettivamente all'inizio e alla fine; per una legenda "in alto", "inizio" e "fine" si trovano rispettivamente a sinistra e a destra dell'area. Il valore predefinito dipende dalla posizione della legenda. Per le legende "in basso", il valore predefinito è "center"; le altre legende sono "start". Tipo: stringa
Predefinito: automatica
|
| posizione.legenda |
Posizione della legenda. Può corrispondere a uno dei seguenti:
Tipo: stringa
Predefinito: "destra"
|
| legenda.maxRighe |
Numero massimo di righe nella legenda. Impostalo su un numero maggiore di uno per aggiungere righe alla legenda. Nota: la logica esatta utilizzata per determinare il numero effettivo di righe visualizzate è ancora in evoluzione. Al momento questa opzione funziona solo quando legend.position è "top". Tipo: numero
Predefinito: 1
|
| legend.textStyle |
Un oggetto che specifica lo stile del testo della legenda. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| buca |
Se compreso tra 0 e 1, viene visualizzato un grafico ad anello. Il foro con un raggio uguale a
Tipo: numero
Predefinito: 0
|
| ColorSliceConfine |
Il colore dei bordi della sezione. Applicabile solo quando il grafico è bidimensionale. Tipo: stringa
Predefinito: "bianco"
|
| testo a torta |
Il contenuto del testo visualizzato sulla sezione. Può corrispondere a uno dei seguenti:
Tipo: stringa
Predefinito: "percentage"
|
| Torta di testo |
Un oggetto che specifica lo stile del testo della sezione. L'oggetto ha questo formato: {color: <string>, fontName: <string>, fontSize: <number>}
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Angolo avvio torta |
L'angolo, in gradi, di cui ruotare il grafico. Il valore predefinito di Tipo: numero
Predefinito:
0 |
| categorieinverse |
Se true, traccia le sezioni in senso antiorario. L'impostazione predefinita è il disegno in senso orario. Tipo: booleano
Predefinito: falso
|
| ColoreResidueSlice |
Colore della porzione di combinazione che contiene tutte le sezioni al di sotto di sliceVisibilitàThreshold. Tipo: stringa
Predefinito: "#cse"
|
| Etichetta Slice |
Etichetta per la combinazione che contiene tutte le sezioni al di sotto di sliceVisibilitàThreshold. Tipo: stringa
Predefinito: "Altro"
|
| sezioni |
Un array di oggetti, ognuno che descrive il formato della porzione corrispondente nella torta. Per
utilizzare i valori predefiniti per una sezione, specifica un oggetto vuoto (ad es.
Puoi specificare un array di oggetti, ognuno dei quali si applica alla porzione nell'ordine specificato oppure un oggetto in cui ogni elemento secondario ha una chiave numerica che indica a quale porzione si applica. Ad esempio, le due dichiarazioni che seguono sono identiche e dichiarano la prima sezione in nero e la quarta in rosso:
slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Tipo: array di oggetti o oggetti con oggetti nidificati
Predefinito: {}
|
| sezioneVisibilità visibilità |
Il valore frazionario della torta, al di sotto del quale una sezione non verrà visualizzata singolarmente. Tutte le sezioni che non hanno superato questa soglia verranno combinate in un'unica sezione "Altro", la cui dimensione è la somma di tutte le dimensioni. L'impostazione predefinita non mostra individualmente alcuna fetta più piccola di mezzo grado.
// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Tipo: numero
Predefinita: mezzo grado (0,5/360 o 1/720 o 0,0014)
|
| title |
Testo da visualizzare sopra il grafico. Tipo: stringa
Predefinito: nessun titolo
|
| titoloTestoStile |
Un oggetto che specifica lo stile del testo del titolo. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| descrizione comando |
Un oggetto con membri che possono configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: oggetto
Predefinito: null
|
| tooltip.ignoreBounds |
Se impostato su Nota: questo vale solo per le descrizioni comando HTML. Se questa funzionalità è abilitata con le descrizioni comando SVG, l'eventuale overflow oltre i limiti del grafico verrà ritagliato. Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando. Tipo: booleano
Predefinito: falso
|
| descrizione comando.isHTML |
Se è impostato su true, utilizza le descrizioni comando visualizzate in HTML (anziché il rendering SVG). Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando. Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dati della colonna Descrizione comando non è supportata dalla visualizzazione Grafico a bolle. Tipo: booleano
Predefinito: falso
|
| descrizione comando.showColorCode |
Se true, mostra i riquadri colorati accanto alle informazioni della sezione nella descrizione comando. Tipo: booleano
Predefinito: falso
|
| descrizione comando. |
Quali informazioni mostrare quando l'utente passa il mouse sopra una porzione di torta. Sono supportati i seguenti valori:
Tipo: stringa
Predefinito: "entrambi"
|
| 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> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| descrizione comando.trigger |
L'interazione dell'utente che determina la visualizzazione della descrizione comando:
Tipo: stringa
Predefinito: "concentrazione"
|
| width |
La larghezza del grafico in pixel. Tipo: numero
Predefinito: larghezza dell'elemento che la contiene
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento Tipo di reso: nessuno
|
getAction(actionID) |
Restituisce l'oggetto azione della descrizione comando con il Tipo di reso: oggetto
|
getBoundingBox(id) |
Restituisce un oggetto contenente i valori sinistro, superiore, larghezza e altezza dell'elemento del grafico
I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico. Tipo di reso: oggetto
|
getChartAreaBoundingBox() |
Restituisce un oggetto contenente il lato sinistro, superiore, la larghezza e l'altezza dei contenuti del grafico (escluse le etichette e la legenda):
I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico. Tipo di reso: oggetto
|
getChartLayoutInterface() |
Restituisce un oggetto contenente informazioni sul posizionamento sullo schermo del grafico e sui suoi elementi. Nell'oggetto restituito possono essere richiamati i metodi seguenti:
Chiamalo dopo il disegno del grafico. Tipo di reso: oggetto
|
getHAxisValue(xPosition, optional_axis_index) |
Restituisce il valore dei dati orizzontali a Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
getImageURI() |
Restituisce il grafico serializzato come URI immagine. Chiamalo dopo il disegno del grafico. Consulta la sezione Stampa di grafici PNG. Tipo di reso: stringa
|
getSelection() |
Restituisce una matrice delle entità del grafico selezionate.
Le entità selezionabili sono sezioni e voci di legenda.
Per questo grafico è possibile selezionare una sola entità alla volta.
Tipo di reso: array di elementi di selezione
|
getVAxisValue(yPosition, optional_axis_index) |
Restituisce il valore dei dati verticali in Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
getXLocation(dataValue, optional_axis_index) |
Restituisce la coordinata x di pixel di Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
getYLocation(dataValue, optional_axis_index) |
Restituisce la coordinata y di pixel Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
removeAction(actionID) |
Rimuove dal grafico l'azione della descrizione comando con il 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
Tutte le azioni relative alla descrizione comando devono essere impostate prima di chiamare il metodo Tipo di reso:
none |
setSelection() |
Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente.
Le entità selezionabili sono sezioni e voci di legenda.
Per questo grafico è possibile selezionare una sola entità alla volta.
Tipo di reso: nessuno
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
Per saperne di più su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi ed Eventi di attivazione.
| Nome | |
|---|---|
click |
Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando gli utenti fanno clic su titolo, elementi dati, voci di legenda, assi, linee di 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. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. Una voce di sezione o di legenda è correlata a una riga nella tabella dati (l'indice della colonna è nullo). Proprietà: riga, colonna
|
onmouseout |
Attivato quando l'utente allontana il puntatore del mouse da un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. Una voce di sezione o di legenda è correlata a una riga nella tabella dati (l'indice della colonna è nullo). Proprietà: riga, colonna
|
ready |
Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo Proprietà: nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero
Proprietà: nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.