Importante: la sezione relativa alle tabelle delle immagini di Google Chart Tools è stata ufficialmente ritirata a partire dal 20 aprile 2012. Continuerà a funzionare come previsto dalle nostre norme sul ritiro.
Panoramica
Il grafico di immagini generiche è 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 2000 chiamate dirette all'API Chart.
Tutti i dati vengono trasmessi ai grafici utilizzando una tabella dati o una visualizzazione dati. Inoltre, alcune etichette vengono trasmesse come colonne nella tabella dati.
Tutti gli altri parametri URL dell'API Chart (tranne chd) vengono passati come opzioni.
Di: Google
Esempi
Di seguito sono riportati alcuni esempi di diversi 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 chiamassi il grafico; se non specifichi un asse, il grafico di immagini generiche cerca di impostare 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
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 generali: uno per i grafici di 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 è necessario codificare tramite URL i valori della stringa trasmessi come opzioni o dati.
Grafici a mappa
Un grafico mappa utilizza una tabella di dati con due colonne obbligatorie:
- Prima colonna: [stringa] Codice paese/stato/provincia.
- Seconda colonna: [numero] il valore per il paese o lo stato in questione.
Consulta la documentazione del grafico di mappa per ulteriori informazioni.
Grafici non di mappa
I grafici non mappati utilizzano una tabella di dati con due colonne facoltative (una all'inizio, una alla fine) e una o più colonne di dati tra le due seguenti:
- 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] Qualsiasi numero di colonne di stringa dopo le colonne di dati, dove ogni voce rappresenta un'etichetta dei punti dati per i grafici che la supportano. Se vuoi utilizzare questa colonna,
devi specificare l'opzione
annotationColumns.
I dati vengono visualizzati in modi diversi, a seconda del tipo di grafico. Consulta la documentazione del grafico.
Nota sugli indici di colonna: la visualizzazione generica del grafico immagine rimuove le colonne di stringhe dalla tabella di dati prima di inviarla al servizio API Chart. Pertanto, gli indici delle colonne nelle opzioni, nei metodi
e negli eventi definiti in questa pagina includono le colonne stringa nel conteggio dell'indice,
ma gli indici colonna in qualsiasi opzione gestita dal servizio API Chart (ad esempio,
l'opzione chm) ignorano le colonne stringa nel conteggio dell'indice.
Opzioni di configurazione
Le seguenti opzioni sono definite per questa visualizzazione. Definiscile nell'oggetto opzioni trasmesso nel metodo draw() della visualizzazione.
Non tutte le seguenti opzioni sono supportate per tutti i tipi di grafici; consulta la documentazione per il tipo di grafico di 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'.
Nota sui colori: le opzioni del colore, ad esempio colors, color e backgroundColor, sono specificate nel formato colore dell'API Chart.
Questo formato è simile al formato #RRGGBB, ad eccezione del fatto che include un quarto numero esadecimale facoltativo per indicare la trasparenza. I colori facilmente leggibili dall'utente, ad esempio "rosso", "verde", "blu" e così via, non sono supportati. Il formato di colore dell'API Chart non include il simbolo # principale, ma le opzioni di visualizzazione generica del grafico dell'immagine accetteranno codici colore con o senza #.
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
| annotazioniColonne | Oggetto<Array> | Nessuno | Etichette dei punti dati per vari tipi di grafici. Si tratta di 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 i punti dati (consulta l'argomento collegato per sapere quali sono) e la tabella dati deve avere almeno una delle colonne di etichette delle stringhe. Ogni oggetto nell'array ha le seguenti proprietà:
Esempio: questo snippet definisce un'etichetta di testo nera di 12 pixel, con il testo preso dalla colonna 0 e assegnato al punto dati nella colonna 2 della stessa riga: |
| coloredisfondo | string | "#FFFFFF" (bianco) | Il colore dello sfondo del grafico nel formato colore dell'API Chart. |
| colore | string | Automatica | Specifica un colore di base da utilizzare per tutte le serie; ogni serie sarà una gradazione del colore specificato. I colori sono specificati nel formato colore dell'API Chart.
Ignorato se colors è specificato. |
| colori | Array<string> | Automatica | Utilizzalo per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato colore dell'API Chart.
Il colore i viene utilizzato per la colonna dati i, che torna all'inizio se sono presenti più colonne dati di colori. Se le varianti di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color. |
| abilitareEventi | boolean | false | Di conseguenza, i grafici generano eventi attivati dagli utenti, come clic o clic del mouse. Supportato solo per tipi di grafici specifici. Vedi Eventi di seguito. |
| fill | boolean | false | Se true, inserisce l'area sotto ogni riga. Disponibile solo per i grafici a linee. |
| firstHiddenColumn | number | Nessuno | Un indice di colonna di dati. La colonna elencata, così come tutte le colonne seguenti, non verrà utilizzata per tracciare gli elementi della serie principale del grafico, come le linee su un grafico a linee o le barre su un grafico a barre, ma verrà utilizzata come dati per indicatori e altre annotazioni. Tieni presente che le colonne della stringa sono incluse in questo numero di indice. |
| height | number | 200 | Altezza del grafico in pixel. Se il valore è mancante o non compreso in un intervallo accettabile, viene utilizzata l'altezza dell'elemento che lo contiene. Se questo valore non rientra nell'intervallo accettabile, verrà utilizzata l'altezza predefinita. |
| etichette | string | "nessuno" | [Pie chart only] Indica l'etichetta, se disponibile, da mostrare per ciascuna sezione. Scegli uno dei seguenti valori:
|
| leggenda | string | "a destra" | Dove visualizzare la legenda del grafico rispetto al grafico. Specifica una delle seguenti opzioni: 'top', 'bottom', 'left', 'right', 'none'. Ignorato nei grafici che non includono legende (come i grafici della mappa). |
| max | number | Valore dati massimo | Il valore massimo visualizzato sulla bilancia. Ignorato per i grafici a torta. Il valore predefinito è il valore massimo dei dati, tranne per i grafici a barre, dove il valore predefinito è il valore massimo per i dati. Questo viene ignorato per i grafici a barre quando la tabella ha più di una colonna di dati. |
| min | number | Valore dati minimo | Il valore minimo mostrato sulla scala. Ignorato per i grafici a torta. Il valore predefinito è il valore minimo per i dati, ad eccezione dei grafici a barre, dove il valore predefinito è zero. Questo viene ignorato per i grafici a barre quando la tabella ha più di una colonna di dati. |
| showCategoryLabel | boolean | true | Indica se le etichette devono essere visualizzate sull'asse della categoria (ad es. a riga). Disponibile solo per i grafici a linee e a barre. |
| showValueLabel | boolean | true | True mostra un'etichetta sull'asse del valore. Disponibile solo per i grafici a linee e a barre. |
| Visualizzazione singola colonna | number | Nessuno | Visualizza solo la colonna di dati specificata. Questo numero è un indice basato su zero nella tabella, dove zero è la prima colonna di dati. Il colore assegnato alla singola colonna è lo stesso di tutte le colonne visualizzate. Non può essere utilizzata con i grafici a torta o le mappe. |
| title | string | Stringa vuota | Il titolo del grafico. Se non specificato, non verrà visualizzato alcun titolo. Il parametro equivalente del grafico è chtt. |
| valueLabelInterval | number | Automatica | L'intervallo con cui mostrare le etichette dell'asse del valore. Ad esempio, se min è 0, max è 100 e valueLabelsInterval è 20, il grafico mostrerà le etichette dell'asse a (0, 20, 40, 60, 80 100). |
| width | number | 400 | La larghezza del grafico in pixel. Se il valore è mancante o non compreso in un intervallo accettabile, viene utilizzata la larghezza dell'elemento che lo contiene. Se questo valore non rientra nell'intervallo accettabile, verrà utilizzata la larghezza predefinita. |
Metodi
| Metodo | Tipo restituito | Descrizione |
|---|---|---|
draw(data, options) |
Nessuno | Disegna la mappa. |
getImageUrl() |
Stringa | Restituisce l'URL dell'API Google Chart utilizzato per richiedere il grafico. Tieni presente che può contenere più di 2000 caratteri. Per ulteriori dettagli, consulta la API di Google Chart. |
Eventi
Se imposti la proprietà enableEvents su true, i grafici di supporto verranno visualizzati per gli 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 per l'area geografica interessata. Aggiungi il parametrochof=jsonal tipo di grafico non elaborato per vedere un elenco di nomi disponibili. Per ulteriori dettagli, visita la paginachof=json.
| Nome | Descrizione | digita 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 puntatore del mouse da un elemento del grafico. | "mouseout" |
onclick |
Attivato quando un utente fa clic su un elemento del grafico. | "clic" |
Quali grafici supportano gli eventi?
Tutti i grafici che supportano il parametro chof=json supportano gli eventi di lancio (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 Google Chart API.
Localizzazione
Questa visualizzazione supporta qualsiasi localizzazione supportata dal servizio Google Chart.