Panoramica
Un grafico geografico è una mappa di un paese, un continente o un'area geografica con aree identificate in uno dei tre modi seguenti:
- La modalità region colora intere aree geografiche, ad esempio paesi, province o stati.
- La modalità Indicatori utilizza i cerchi per designare le aree geografiche che vengono scalate in base a un valore da te specificato.
- La modalità testo etichetta le aree geografiche con identificatori (ad es. "Russia" o "Asia").
Un grafico geografico viene visualizzato nel browser utilizzando SVG o VML. Tieni presente che il grafico geografico non è scorrevole o trascinabile ed è un disegno a linee anziché una mappa del rilievo. Se vuoi utilizzare uno di questi elementi, prendi in considerazione la visualizzazione mappa.
Grafici geografici della regione
Lo stile regions riempie intere regioni (in genere
paesi) con i colori corrispondenti ai valori che
assegni.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Grafici geografici degli indicatori
Lo stile markers esegue il rendering dei cerchi in posizioni specificate nel grafico geografico, con il colore e la dimensione specificati.
Prova a passare il mouse sopra gli indicatori disordinati intorno a Roma e si aprirà una lente d'ingrandimento per visualizzare gli indicatori in modo più dettagliato. La lente d'ingrandimento non è supportata in Internet Explorer 8 o versioni precedenti.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: Because markers require geocoding, you'll need a mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Visualizzatori di indicatori proporzionali
Di norma, i grafici geografici degli indicatori mostrano il valore più piccolo dell'indicatore come punto minimo. Se invece vuoi visualizzare valori di indicatori proporzionali (ad esempio, perché sono percentuali), utilizza l'opzione sizeAxis per impostare esplicitamente minValue e maxValue.
Ad esempio, ecco una mappa dell'Europa occidentale con popolazioni e aree per tre paesi: Francia, Germania e Polonia. Le popolazioni sono tutte numeri assoluti (ad es. 65 milioni per la Francia), ma le aree sono tutte percentuali nel complesso: l'indicatore francese è colorato di viola perché la sua popolazione è media, ma ha una dimensione pari a 50 (su 100 possibili) perché contiene il 50% dell'area combinata.
In questo codice utilizziamo sizeAxis per specificare le dimensioni dell'indicatore
nell'intervallo da 0 a 100. Inoltre utilizziamo un colorAxis con valori RGB per mostrare le popolazioni con una gamma di colori da arancione a blu, uno spettro che funziona bene per gli utenti con problemi di vista del colore. Infine, specifichiamo l'Europa occidentale con
un valore di 155 region, in base alla sezione "Gerarchia e codici dei contenuti"
più avanti nel presente documento.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: Because markers require geocoding, you'll need a mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population', 'Area Percentage'],
['France', 65700000, 50],
['Germany', 81890000, 27],
['Poland', 38540000, 23]
]);
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: '155', // Western Europe
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Grafici geografici del testo
Puoi sovrapporre etichette di testo a un grafico geografico con displayMode:
text.
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
<html>
<head>
<script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['geochart'],
// Note: Because this chart requires geocoding, you'll need a mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Colorire il grafico
Esistono diverse opzioni per personalizzare i colori dei grafici geografici:
colorAxis: lo spettro di colori da utilizzare per le regioni nella tabella dati.backgroundColor: il colore dello sfondo del grafico.datalessRegionColor: il colore da assegnare alle regioni a cui non sono associati dati.defaultColor: il colore da assegnare alle regioni nella tabella dati per la quale il valore ènullo non specificato.
L'opzione colorAxis è quella importante: specifica l'intervallo di colori per i valori dei dati. Nell'array colorAxis, il primo elemento è il colore assegnato al valore più piccolo nel set di dati, mentre l'ultimo è il colore assegnato al valore più grande nel set di dati. Se specifichi più di due colori, si verificherà l'interpolazione tra loro.
Nel grafico seguente utilizzeremo tutte e quattro le opzioni. colorAxis viene utilizzato per visualizzare l'Africa con i colori della bandiera panafricana, utilizzando le latitudini dei paesi: dal rosso a nord, fino al nero e a verde a sud. L'opzione backgroundColor viene utilizzata per colorare lo sfondo azzurro, datalessRegionColor per indicare i paesi non africani di colore rosa chiaro e defaultColor per il Madagascar.
var options = {
region: '002', // Africa
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: Because this chart requires geocoding, you'll need mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Latitude'],
['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
['Canary Islands', 28], ['Cape Verde', 15],
['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
['Comoros', -12], ['Cote d\'Ivoire', 6],
['Democratic Republic of the Congo', -3], ['Djibouti', 12],
['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
['São Tomé and Principe', 0], ['Senegal', 15],
['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
['Zimbabwe', -18]
]);
var options = {
region: '002', // Africa
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"></div>
</body>
</html>
Caricamento
Il nome del pacchetto google.charts.load è "geochart".
Tieni presente che non dovresti copiare il nostro mapsApiKey, altrimenti non funzionerà. Se il tuo grafico non richiede la geocodifica o utilizza codici non standard per identificare le posizioni, non hai bisogno di mapsApiKey. Per maggiori dettagli, consulta
Impostazioni di caricamento.
google.charts.load('current', {
'packages': ['geochart'],
// Note: if your chart requires geocoding or uses nonstandard codes, you'll
// need to get a mapsApiKey for your project. The one below won't work.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
Il nome della classe di visualizzazione del grafico geografico è google.visualization.GeoChart.
var visualization = new google.visualization.GeoChart(container);
Formato dei dati
Il formato della tabella dati varia a seconda della modalità di visualizzazione utilizzata:
regions, markers o text.
Formato modalità regioni
La località viene inserita in una colonna, più una colonna facoltativa come descritto di seguito:
-
Posizione geografica [Stringa, obbligatoria]: una regione da evidenziare.
Sono accettati tutti i formati indicati di seguito. Puoi utilizzare formati diversi in righe diverse:
- Il nome del paese come stringa (ad esempio, "Inghilterra") o come codice ISO-3166-1 alpha-2 in maiuscolo o equivalente in testo inglese (ad esempio, "GB" o "Regno Unito").
- Il nome del codice regione ISO-3166-2 in maiuscolo o il equivalente di testo in inglese (ad esempio, "US-NJ" o "New Jersey").
- Un prefisso metropolitano. Si tratta di codici metropolitane di tre cifre utilizzati per designare regioni diverse; sono supportati solo i codici statunitensi. Nota: non corrispondono ai prefissi telefonici.
- Qualsiasi valore supportato dalla proprietà
region.
-
Colore regione [numero, facoltativo]: una colonna numerica facoltativa utilizzata per assegnare un colore a questa regione, in base alla scala specificata nella proprietà
colorAxis.colors. Se questa colonna non è presente, tutte le regioni saranno dello stesso colore. Se la colonna è presente, i valori nulli non sono consentiti. I valori sono in scala rispetto ai valorisizeAxis.minValue/sizeAxis.maxValueo ai valori specificati nella proprietàcolorAxis.values, se fornito.
Formato della modalità indicatori
Il numero di colonne varia a seconda del formato dell'indicatore utilizzato e di altre colonne facoltative.
-
Posizione indicatore [Obbligatorio]
OPPURE
La prima colonna è un indirizzo di stringa specifico (ad esempio, "Via Verdi 1600").Le prime due colonne sono numeriche, dove la prima colonna è la latitudine e la seconda è la longitudine.
Nota: anche se consigliamo l'utilizzo dei codici ISO 3166 per la modalità "Regioni", la modalità "Indicatori" funziona meglio con i nomi più lunghi per le regioni (come Germania, Panama e così via). Questo perché, in modalità "indicatori", i grafici geografici utilizzano Google Maps per geocodificare le località (convertindo una posizione della stringa in latitudine e longitudine). Ciò potrebbe impedire la geocodifica di luoghi ambigui, come "DE" per Germania o Delaware o "PA" per Panama o Pennsylvania.
-
Colore indicatore [Numero, facoltativo] La colonna successiva è una colonna numerica facoltativa utilizzata per assegnare un colore a questo indicatore, in base alla scala specificata nella proprietà
colorAxis.colors. Se questa colonna non è presente, tutti gli indicatori saranno dello stesso colore. Se la colonna è presente, i valori nulli non sono consentiti. I valori vengono scalati l'uno rispetto all'altro o in modo assoluto ai valori specificati nella proprietàcolorAxis.values. - Dimensioni indicatore [Numero, facoltative] Una colonna numerica facoltativa utilizzata per assegnare le dimensioni dell'indicatore, rispetto alle altre dimensioni. Se questa colonna non è presente, verrà utilizzato il valore della colonna precedente (o le dimensioni predefinite, se non viene fornita anche nessuna colonna colore). Se la colonna è presente, i valori nulli non sono consentiti.
Formato modalità testo
L'etichetta viene inserita nella prima colonna, più una colonna facoltativa:
- Etichetta di testo [Stringa, Obbligatorio] Un indirizzo di stringa specifico (ad esempio "1600 Pennsylvania Ave").
- Dimensioni testo [numero, facoltativo] La seconda colonna è una colonna numerica facoltativa utilizzata per assegnare le dimensioni dell'etichetta. Se questa colonna non è presente, tutte le etichette avranno le stesse dimensioni.
Opzioni di configurazione
| Nome | |
|---|---|
| coloredisfondo |
Il colore dello sfondo dell'area principale del grafico. Può essere una semplice stringa relativa al colore HTML, ad esempio Tipo: stringa o oggetto
Predefinito: bianco
|
| sfondocolore.fill |
Il colore di riempimento del grafico, come stringa del colore HTML. Tipo: stringa
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
|
| coloreAsse |
Un oggetto che specifica una mappatura tra i valori delle colonne colori e i colori o una scala gradiente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tipo: oggetto
Predefinito: null
|
| coloreAxi.ValoreValore |
Se presente, specifica un valore minimo per i dati di colore del grafico. I valori dei dati di colore di questo valore e inferiori verranno visualizzati come primo colore nell'intervallo Tipo: numero
Predefinito: valore minimo della colonna colore nei dati del grafico
|
| coloreAxis.ValoreValore max |
Se presente, specifica un valore massimo per i dati relativi al colore del grafico. I valori dei dati di colore di questo valore e superiore verranno visualizzati come ultimo colore nell'intervallo Tipo: numero
Predefinito: valore massimo della colonna colore nei dati del grafico
|
| colorAxis.values |
Se presente, controlla in che modo i valori vengono associati ai colori. Ogni valore è associato al colore corrispondente nell'array Tipo: matrice di numeri
Predefinito: null
|
| coloreAxis.colors |
Colori da assegnare ai valori della visualizzazione. Un array di stringhe, dove ogni elemento è una stringa di colore HTML, ad esempio: Tipo: array di stringhe di colore
Predefinito: null
|
| dataAreaColore |
Colore da assegnare alle regioni senza dati associati. Tipo: stringa
Predefinito: "#F5F5F5"
|
| colorepredefinito |
Il colore da utilizzare quando per i punti dati in un grafico geografico quando la posizione (ad esempio, Tipo: stringa
Predefinito: "#267114"
|
| modalità di visualizzazione |
Che tipo di grafico geografico è. Il formato DataTable deve corrispondere al valore specificato. Sono supportati i seguenti valori:
Tipo: stringa
Predefinito: "auto"
|
| dominio |
Mostra il grafico geografico come se fosse stato pubblicato da questa regione. Ad esempio, se si imposta Tipo: stringa
Predefinito: null
|
| EnableRegionInteractivity |
Se true, abilita l'interattività della regione, compresa l'elaborazione dello stato attivo e della descrizione comando al passaggio del mouse, nonché la selezione e l'attivazione della regione per gli eventi Il valore predefinito è true in modalità regione e falso in modalità indicatore. Tipo: booleano
Predefinito: automatica
|
| 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
|
| versione geografico |
La versione dei dati del confine GeoChart. Sono disponibili le versioni Tipo: numero
Predefinito: 10
|
| height |
Altezza della visualizzazione, in pixel. L'altezza predefinita è 347 pixel, a meno che
l'opzione Tipo: numero
Predefinito: automatica
|
| ProporzioniMantieni |
Se true, il grafico geografico verrà tracciato con le dimensioni massime che possono rientrare nell'area del grafico alle proporzioni naturali. Se è specificata solo una delle opzioni
Se il valore è false, il grafico geografico verrà allungato fino alla dimensione esatta del grafico, come specificato dalle opzioni Tipo: booleano
Predefinito: true
|
| leggenda |
Un oggetto con membri per configurare vari aspetti della legenda o "nessuno", se non viene visualizzata alcuna legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {textStyle: {color: 'blue', fontSize: 16}}
Tipo: Oggetto/"nessuno"
Predefinito: null
|
| legend.numberFormato |
Una stringa di formato per le etichette numeriche. Questo è un sottoinsieme del
set di pattern ICU
.
Ad esempio, Tipo: stringa
Predefinito: automatica
|
| 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>}
|
| region |
L'area da visualizzare nel grafico geografico. Vengono visualizzate anche aree circostanti. Può essere uno dei seguenti:
Tipo: stringa
Predefinito: "world"
|
| lente d'ingrandimento |
Un oggetto con membri per configurare vari aspetti della lente d'ingrandimento. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {enable: true, zoomFactor: 7.5}
Tipo: oggetto
Predefinito:
{enable: true, zoomFactor: 5.0} |
| lensGlass.enable |
Se true, quando l'utente rimane sopra un indicatore disordinato, si aprirà una lente d'ingrandimento. Nota: questa funzionalità non è supportata nei browser che non supportano SVG, ad esempio Internet Explorer 8 o versioni precedenti. Tipo: booleano
Predefinito: true
|
| lente d'ingrandimento.fattore zoom |
Il fattore di zoom della lente d'ingrandimento. Può essere un numero superiore a 0. Tipo: numero
Predefinito: 5,0
|
| opacità |
L'opacità degli indicatori, dove 0,0 è completamente trasparente e 1,0 è completamente opaco. Tipo: numero, 0,0-1,0
Predefinito: 1,0
|
| versione codiceregione |
La versione dei dati di codecoder. Sono disponibili le versioni Tipo: numero
Predefinito:0
|
| risoluzione |
La risoluzione dei bordi del grafico geografico. Scegli uno dei seguenti valori:
Tipo: stringa
Predefinito: "paesi"
|
| dimensioniAsse |
Un oggetto con membri per configurare la modalità di associazione dei valori alle dimensioni della bolla. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {minValue: 0, maxSize: 20}
Tipo: oggetto
Predefinito: null
|
| dimensioniAxis.maxSize |
Raggio massimo della bolla più grande possibile, in pixel. Tipo: numero
Predefinito: 12
|
| sizeAxis.maxValue |
Il valore delle dimensioni (come indicato nei dati del grafico) da mappare a Tipo: numero
Predefinito: valore massimo della colonna delle dimensioni nei dati del grafico
|
| dimensioniAxis.minSize |
Raggio minimo della bolla più piccola possibile, in pixel. Tipo: numero
Predefinito: 3
|
| sizeAxis.minValue |
Il valore delle dimensioni (come indicato nei dati del grafico) da mappare a Tipo: numero
Predefinito: valore minimo della colonna delle dimensioni nei dati del grafico
|
| 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.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 della visualizzazione, espressa in pixel. La larghezza predefinita è 556 pixel, a meno che
l'opzione Tipo: numero
Predefinito: automatica
|
Gerarchia e codici del continente
È possibile visualizzare grafici geografici di continenti/subcontinenti impostando l'opzione region su uno dei seguenti codici di tre cifre. I codici e la gerarchia si basano, con alcune eccezioni, su quelli sviluppati e gestiti dalla United Nations Statistics Division.
| Continente | Subcontinente | Paesi |
|---|---|---|
002 - Africa |
015 - Nord Africa |
DZ, EG, EH, LY, MA, SD, SS, TN |
011 - Africa occidentale |
BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR,2,3} 2,33 | |
017 - Medio Oriente |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014 - Africa orientale |
BI, DJ, ER, ET, KE, KM, MG, MU, MW, 2, 2} | |
018 - Sudafrica |
BW, LS, NA, SZ, ZA | |
150 - Europa |
154 - Europa settentrionale |
|
155 - Europa occidentale |
AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL | |
151 - Europa orientale |
BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA | |
039 - Europa meridionale |
AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, }22}}22}}22} | |
019 - Americhe |
021 - America del Nord |
BM, CA, GL, PM, US |
029 - Caraibi |
||
013 - America Centrale |
BZ, CR, GT, HN, MX, NI, PA, SV | |
005 - Sud America |
AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, , | |
142 - Asia |
143 - Asia centrale |
TM, TJ, KG, KZ, UZ |
030 - Asia orientale |
CN, HK, JP, KP, KR, MN, MO, TW | |
034 - Asia meridionale |
AF, BD, BT, IN, IR, LK, MV, NP, PK | |
035 - Asia sudorientale |
BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, TP | |
145 - Asia occidentale |
AE, AM | |
009 - Oceania |
053 - Australia e Nuova Zelanda |
AU, NF, NZ |
054 - Melanesia |
FJ, NC, PG, SB, VU | |
057 - Micronesia |
FM, GU, KI, MH, MP, NR, PW | |
061 - Polinesia |
AS, CK, NU, PF, PN, TK, TO, TV, WF, WS |
Metodi
| Metodo | |
|---|---|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
draw(data, options) |
Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento Tipo di reso: nessuno
|
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 regioni a cui è assegnato un valore.
Per questo grafico è possibile selezionare una sola entità alla volta.
Tipo di reso: array di elementi di selezione
|
setSelection() |
Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente.
Le entità selezionabili sono regioni a cui è assegnato un valore.
Per questo grafico è possibile selezionare una sola entità alla volta.
Tipo di reso: nessuno
|
Eventi
| Nome | |
|---|---|
error |
Attivato quando si verifica un errore durante il tentativo di rendering del grafico. Proprietà: id, messaggio
|
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
|
regionClick |
Richiamato quando viene fatto clic su un'area geografica. Questo non verrà generato per il paese specifico assegnato nell'opzione "Regione" (se è elencato un paese specifico).
Proprietà: un oggetto con una singola proprietà,
region, ovvero una stringa in formato ISO-3166 che descrive la regione selezionata.
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero
Proprietà: nessuna
|
Norme sui dati
Le località sono geocodificate da Google Maps. I dati che non richiedono la geocodifica non vengono inviati a nessun server. Per ulteriori informazioni sulle norme relative ai dati, consulta i Termini di servizio di Google Maps.