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.
Panoramica
Il grafico immagine generica è un wrapper generico per tutti i grafici prodotti dall'API Google Chart. Leggi la documentazione dell'API Chart prima di provare a utilizzare questa visualizzazione. Tieni presente che con questa visualizzazione puoi inviare fino a 16.000 dati, a differenza del limite di 2.000 nelle chiamate dirette all'API Chart.
Tutti i dati vengono passati ai grafici utilizzando una tabella o un oggetto DataView. Inoltre, alcune etichette vengono passate come colonne nella tabella dati.
Tutti gli altri parametri URL dell'API Chart (tranne chd) vengono trasmessi come opzioni.
Di: Google
Esempi
Di seguito sono riportati alcuni esempi di vari tipi di grafici.
Grafico a linee
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Grafico a barre verticali
Tieni presente che nei grafici a barre con wrapping, non è necessario specificare chxt='x' come faresti se chiami personalmente il grafico; se non specifichi un asse, il grafico con immagini generiche tenta di configurare correttamente il grafico per impostazione predefinita.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Grafico a torta
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Grafico radar
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Grafico mappa
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Caricamento in corso...
Il nome del pacchetto google.charts.load è "imagechart"
google.charts.load('current', {'packages': ['imagechart']});
Il nome della classe della visualizzazione è google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Formato dei dati
Esistono due formati di dati generalizzati: uno per i grafici a mappa e uno per tutti gli altri. Tieni presente che l'unico formato numerico supportato per i dati è il tipo di numero JavaScript.
Nota: non eseguire la codifica URL per i valori delle stringhe trasmessi come dati o opzioni.
Grafici della mappa
Un grafico mappa accetta una tabella di dati con due colonne obbligatorie:
- Prima colonna: [stringa] Codice paese o stato/provincia.
- Seconda colonna: [numero], il valore relativo al paese o allo stato in questione.
Per ulteriori informazioni, consulta la documentazione relativa ai grafici a mappa.
Grafici non mappa
I grafici non a mappa utilizzano una tabella di dati con due colonne facoltative (una all'inizio e una alla fine) e una o più colonne intermedie:
- Prima colonna: [facoltativa, stringa] Ogni voce rappresenta un'etichetta
utilizzata sull'asse X (equivalente al parametro
chlochxl) per i grafici che la supportano. - Colonne successive: qualsiasi numero di colonne numeriche, ciascuna delle quali rappresenta una serie di dati.
- Ultime colonne - [facoltativo, stringa] Un numero qualsiasi di colonne stringa dopo le colonne di dati, dove ogni voce rappresenta un'etichetta del punto dati per i grafici che la supportano. Se vuoi utilizzare questa colonna,
devi specificare l'opzione
annotationColumns.
I dati verranno visualizzati in modi diversi a seconda del tipo di grafico. Consulta la documentazione del grafico.
Una nota sugli indici di colonna: la visualizzazione Grafico immagine generico rimuove colonne stringa dalla tabella di dati prima di inviarla al servizio API Chart. Di conseguenza, gli indici di colonna nelle opzioni, nei metodi e negli eventi definiti in questa pagina includono le colonne di stringhe nel conteggio degli indici. Tuttavia, gli indici di colonna in qualsiasi opzione gestita dal servizio API Chart (ad esempio, l'opzione chm) ignorano le colonne stringa nel conteggio degli indici.
Opzioni di configurazione
Per questa visualizzazione sono definite le seguenti opzioni. Definiscile nell'oggetto
opzioni passato nel metodo draw() della visualizzazione.
Non tutte le opzioni seguenti sono supportate per tutti i tipi di grafici; consulta la documentazione per il tuo tipo di grafico con immagini statiche. Puoi passare qualsiasi parametro URL dell'API Chart come opzione. Ad esempio, il
parametro URL chg=50,50 di una visualizzazione grafico verrebbe specificato
in questo modo: options['chg'] = '50,50'.
Una nota sui colori: le opzioni di colore
come colors, color e backgroundColor
sono specificate nel formato colore API Chart.
Questo formato è simile al formato #RRGGBB, tranne per il fatto che include un quarto numero esadecimale facoltativo per indicare la trasparenza. Non sono supportati colori leggibili da persone, come "rosso", "verde", "blu" e così via. Il formato colore dell'API Chart non include il simbolo # iniziale, ma le opzioni di visualizzazione generiche dei grafici di immagini accetteranno codici colore con o senza il simbolo #.
| Nome | Tipo | Predefinita | Descrizione |
|---|---|---|---|
| annotationColumns | Array<object> | Nessuno | Etichette dei punti dati per vari tipi di grafici. È un array di oggetti, ognuno dei quali assegna un'etichetta formattata a un punto dati sul grafico. Questa opzione è disponibile solo per i grafici che supportano punti dati (consulta l'argomento collegato per scoprire quali) e la tabella di dati deve avere almeno una delle colonne delle etichette di stringa. Ogni oggetto nell'array ha le seguenti proprietà:
Esempio : questo snippet definisce un'etichetta di testo nera di 12 pixel, con testo proveniente dalla colonna 0 e assegnata al punto dati nella colonna 2 della stessa riga: |
| 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. |
| fill | boolean | false | Se true, compila l'area sotto ogni riga. Disponibile solo per i grafici a linee. |
| firstHiddenColumn | numero | Nessuno | Un indice di colonna di dati. La colonna elencata, così come tutte le colonne seguenti, non verranno utilizzate per disegnare gli elementi principali delle serie di grafici (ad esempio linee in un grafico a linee o barre in un grafico a barre), ma come dati per indicatori e altre annotazioni. Tieni presente che le colonne di tipo stringa sono incluse nel conteggio degli indici. |
| altezza | numero | 200 | Altezza del grafico, in pixel. Se mancante o non rientra in un intervallo accettabile, viene utilizzata l'altezza dell'elemento contenitore. Se anche questo è al di fuori dell'intervallo accettabile, verrà utilizzata l'altezza predefinita. |
| etichette | stringa | "nessuno" | [Solo grafico a torta] L'etichetta, se presente, da mostrare per ogni sezione. Scegli tra i seguenti valori:
|
| leggenda | stringa | "destra" | Dove visualizzare una legenda del grafico in relazione al grafico. Specifica una delle seguenti opzioni: "top", "bottom", "left", "right", "none". Ignorato nei grafici che non includono legende (come i grafici delle mappe). |
| max | numero | Valore massimo dei dati | Il valore massimo mostrato sulla bilancia. Ignorato per i grafici a torta. Il valore predefinito è il valore massimo dei dati, ad eccezione dei grafici a barre, in cui il valore predefinito è il valore massimo dei dati. Questo valore viene ignorato per i grafici a barre quando la tabella ha più di una colonna di dati. |
| min | numero | Valore dei dati minimo | Il valore minimo mostrato sulla bilancia. Ignorato per i grafici a torta. Il valore predefinito è il valore minimo dei dati, tranne che per i grafici a barre, dove il valore predefinito è zero. Questo valore viene ignorato per i grafici a barre quando la tabella ha più di una colonna di dati. |
| showCategoryLabels | boolean | true | Indica se le etichette devono essere visualizzate sull'asse delle categorie (ovvero, riga). Disponibile solo per i grafici a linee e a barre. |
| showValueLabels | boolean | true | True visualizza un'etichetta sull'asse dei valori. Disponibile solo per i grafici a linee e a barre. |
| singleColumnDisplay | numero | Nessuno | Visualizza solo la colonna di dati specificata. Questo numero è un indice in base zero nella tabella, dove zero è la prima colonna di dati. Il colore assegnato alla singola colonna è lo stesso di quando viene eseguito il rendering di tutte le colonne. Non può essere utilizzato con grafici a torta o a mappa. |
| title | stringa | Stringa vuota | Il titolo del grafico. Se non specificato, non verrà visualizzato alcun titolo. Il parametro
del grafico equivalente è chtt. |
| valueLabelsInterval | numero | Auto | L'intervallo in cui visualizzare le etichette dell'asse dei valori. Ad esempio, se min è 0, max è 100 e valueLabelsInterval è 20, il grafico mostrerà le etichette degli assi su (0, 20, 40, 60, 80 100). |
| larghezza | numero | 400 | Larghezza del grafico, in pixel. Se mancante o non rientra in un intervallo accettabile, viene utilizzata la larghezza dell'elemento contenitore. Se anche questo è al di fuori dell'intervallo accettabile, verrà utilizzata la larghezza predefinita. |
Metodi
| Metodo | Tipo restituito | Descrizione |
|---|---|---|
draw(data, options) |
Nessun valore | Disegna la mappa. |
getImageUrl() |
String | Restituisce l'URL dell'API Google Chart utilizzato per richiedere il grafico. Tieni presente che questo campo può contenere più di 2000 caratteri. Per ulteriori informazioni, consulta l'API Google Chart. |
Eventi
Se imposti la proprietà enableEvents su true, i grafici di supporto genereranno eventi per gli eventi utente elencati nella tabella seguente. Tutti questi eventi restituiscono un oggetto event con le seguenti proprietà:
type: una stringa che rappresenta il tipo di evento.region: un ID della regione interessata. Aggiungi il parametrochof=jsonal tipo di grafico non elaborato per visualizzare un elenco dei nomi disponibili. Consultachof=jsonper ulteriori dettagli.
| Nome | Descrizione | type Valore |
|---|---|---|
error |
Attivato quando si verifica un errore durante il tentativo di rendering del grafico. | id, messaggio |
onmouseover |
Attivato quando l'utente passa il mouse sopra un elemento del grafico. | "mouseover" |
onmouseout |
Attivato quando l'utente allontana il mouse dall'elemento del grafico. | "mouseout" |
onclick |
Attivato quando un utente fa clic su un elemento del grafico. | "fai clic" |
Quali grafici supportano gli eventi?
Tutti i grafici che supportano il parametro chof=json supportano la generazione di eventi, ovvero tutti i grafici tranne i grafici speciali, ad esempio i codici QR.
Esempio di gestione degli eventi
Ecco un esempio che mostra una barra che registra i clic del mouse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Norme sui dati
I dati vengono inviati al servizio API Google Chart.
Localizzazione
Questa visualizzazione supporta qualsiasi localizzazione supportata dal servizio Google Chart.