Présentation
Un géographique est une carte d'un pays, d'un continent ou d'une région où les zones sont identifiées de l'une des trois manières suivantes:
- Le mode région colore des régions entières, telles que des pays, des provinces ou des États.
- Le mode Repères utilise des cercles pour désigner les régions mises à l'échelle en fonction d'une valeur que vous spécifiez.
- Le mode text permet d'attribuer un identifiant aux régions (par exemple, ("Russie" ou "Asie").
Un graphique géographique s'affiche dans le navigateur à l'aide de SVG ou de VML. Notez que le graphique géographique n'est pas défilant ni déplaçable et qu'il s'agit d'un dessin au trait plutôt que d'une carte de relief. Si vous le souhaitez, utilisez plutôt une visualisation de la carte.
Graphiques géographiques régionaux
Le style regions
remplit les régions entières (généralement des pays) avec des couleurs correspondant aux valeurs que vous attribuez.
<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>
Graphiques géographiques de repères
Le style markers
affiche les cercles aux emplacements spécifiés sur le graphique, avec la couleur et la taille que vous spécifiez.
Essayez de passer la souris sur les repères encombrés entourant Rome. Une loupe s'ouvre alors pour afficher les repères plus en détail. (La loupe n'est pas compatible avec Internet Explorer version 8 ou antérieure.)
<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>
Afficher les repères proportionnels
Normalement, les graphiques géographiques des repères affichent la plus petite valeur de repère sous forme de point minimal. Si vous souhaitez afficher des valeurs de repères proportionnelles (par exemple, en tant que pourcentages), utilisez l'option sizeAxis
pour définir explicitement minValue
et maxValue
.
Par exemple, voici une carte de l'Europe de l'Ouest avec des zones et des populations pour trois pays: l'Allemagne, la France et la Pologne. Les populations sont toutes des nombres absolus (par exemple, 65 millions pour la France), mais ces zones sont des pourcentages de l'ensemble: le repère français est violet, car la population du milieu du village est de 50, mais sa taille est de 50 (sur 100), car il représente 50% de la surface totale.
Dans ce code, nous utilisons sizeAxis
pour spécifier des tailles de repère comprises entre 0 et 100. Nous utilisons également un colorAxis
avec des valeurs RVB pour afficher les populations sous la forme d'une plage de couleurs allant de l'orange au bleu, un spectre qui fonctionnera bien pour les utilisateurs malvoyants. Enfin, nous spécifions l'Europe de l'Ouest avec un region
de 155, conformément à la section "Hiérarchie de contenu et codes" plus loin dans ce document.
<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>
Graphiques géographiques textuels
Vous pouvez superposer des libellés textuels sur un graphique à l'aide de 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>
Colorer un graphique
Vous pouvez personnaliser les couleurs des graphiques géographiques de différentes manières:
colorAxis
: spectre de couleurs à utiliser pour les régions du tableau de données.backgroundColor
: couleur d'arrière-plan du graphique.datalessRegionColor
: couleur à attribuer aux régions sans données associées.defaultColor
: couleur à attribuer aux régions de la table de données pour lesquelles la valeur estnull
ou non spécifiée.
L'option colorAxis
est importante: elle spécifie la plage de couleurs de vos valeurs de données. Dans le tableau colorAxis
, le premier élément correspond à la couleur attribuée à la plus petite valeur de l'ensemble de données, et le dernier à la couleur la plus élevée de l'ensemble de données. Si vous spécifiez plus de deux couleurs, une interpolation sera effectuée entre elles.
Dans le graphique suivant, nous allons utiliser les quatre options. colorAxis
permet d'afficher l'Afrique avec les couleurs du drapeau panafricain : L'option backgroundColor
permet de colorer l'arrière-plan en bleu clair, datalessRegionColor
pour les pays non africains en rose clair et defaultColor
pour 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>
Chargement...
Le nom du package google.charts.load
est "geochart"
.
Notez que vous ne devez pas copier notre clé API, car cela ne fonctionnera pas. Tant que votre graphique ne nécessite pas de géocodage ou qu'il utilise des codes non standards pour identifier des lieux, vous n'avez pas besoin de la clé mapsApiKey. Pour en savoir plus, consultez Charger les paramètres.
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' });
Le nom de la classe de visualisation du graphique géographique est google.visualization.GeoChart
.
var visualization = new google.visualization.GeoChart(container);
Format des données
Le format du tableau de données varie en fonction du mode d'affichage que vous utilisez : regions
, markers
ou text
.
Format des régions
L'établissement est indiqué dans une colonne, plus une colonne facultative comme décrit ci-dessous:
-
Emplacement de la région [Chaîne, Obligatoire] : région à mettre en évidence.
Tous les formats suivants sont acceptés : Vous pouvez utiliser différents formats dans différentes lignes :
- Nom de pays sous forme de chaîne (par exemple, "Angleterre"), ou code ISO-3166-1 alpha-2 en majuscules ou son équivalent en anglais (par exemple, "GB" ou "Royaume-Uni").
- Nom de code de région ISO-3166-2 en majuscules ou son équivalent en anglais (par exemple, "US-NJ" ou "New Jersey").
- Indicatif métropolitain. Il s'agit de codes d'agglomérations à trois chiffres utilisés pour désigner différentes régions. Les codes aux États-Unis ne sont acceptés que. Sachez qu'ils ne sont pas identiques aux indicatifs téléphoniques.
- Toute valeur acceptée par la propriété
region
.
-
Couleur de la région [Nombre, facultatif] : colonne numérique facultative permettant d'attribuer une couleur à cette région, en fonction de l'échelle spécifiée dans la propriété
colorAxis.colors
. Si cette colonne n'est pas présente, toutes les régions seront de la même couleur. Si la colonne est présente, les valeurs nulles ne sont pas autorisées. Les valeurs sont mises à l'échelle par rapport aux valeurssizeAxis.minValue
/sizeAxis.maxValue
ou aux valeurs spécifiées dans la propriétécolorAxis.values
, si elles sont fournies.
Format des repères
Le nombre de colonnes varie en fonction du format de repère utilisé, ainsi que d'autres colonnes facultatives.
-
Emplacement du repère [obligatoire]
OU
La première colonne est une adresse de chaîne spécifique (par exemple, "1600 Pennsylvania Ave").Les deux premières colonnes sont numériques, la première colonne étant la latitude et la deuxième la longitude.
Remarque:Bien que nous recommandions d'utiliser les codes ISO 3166 pour le mode "régions", le mode "repères" fonctionne mieux avec des noms de régions plus longs (comme Allemagne, Panama, etc.). En effet, les graphiques géographiques, lorsqu'ils sont en mode "repères", utilisent Google Maps pour géocoder les établissements (en convertissant un emplacement de chaîne en latitude et en longitude). Par conséquent, il est possible que les zones géographiques ambiguës ne soient pas géocodées comme prévu, comme "DE" pour l'Allemagne ou le Delaware, ou "PA" pour le Panama ou la Pennsylvanie.
-
Couleur du repère [Nombre, facultatif] : la colonne suivante est une colonne numérique facultative permettant d'attribuer une couleur à ce repère, en fonction de l'échelle spécifiée dans la propriété
colorAxis.colors
. Si cette colonne n'est pas présente, tous les repères seront de la même couleur. Si la colonne est présente, les valeurs nulles ne sont pas autorisées. Les valeurs sont mises à l'échelle les unes par rapport aux autres, ou absolument aux valeurs spécifiées dans la propriétécolorAxis.values
. - Taille du repère [Nombre, facultatif] : colonne numérique facultative permettant d'attribuer la taille du repère aux autres tailles de repère. Si cette colonne n'est pas présente, la valeur de la colonne précédente sera utilisée (ou la taille par défaut si aucune colonne de couleur n'est également fournie). Si la colonne est présente, les valeurs nulles ne sont pas autorisées.
Format du mode Texte
Le libellé est saisi dans la première colonne, plus une colonne facultative:
- Libellé de texte [String, Required] Adresse de chaîne spécifique (par exemple, "1600 Pennsylvania Ave").
- Taille du texte [Nombre, facultatif] : la deuxième colonne numérique est une colonne numérique facultative permettant d'attribuer la taille du libellé. Si cette colonne n'est pas présente, toutes les étiquettes auront la même taille.
Options de configuration
Nom | |
---|---|
backgroundColor |
Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une chaîne de couleur HTML simple, par exemple Type : chaîne ou objet
Par défaut:white
|
backgroundColor.fill |
Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML. Type : chaîne
Par défaut:white
|
backgroundColor.stroke |
Couleur de la bordure du graphique, sous forme de chaîne de couleur HTML. Type : chaîne
Par défaut : "#666"
|
backgroundColor.strokeWidth |
Largeur de la bordure, en pixels. Type : nombre
Par défaut : 0
|
colorAxis |
Objet spécifiant un mappage entre les valeurs d'une colonne de couleurs et les couleurs, ou une échelle de dégradés. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme illustré ci-dessous: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type : objet
Par défaut:null
|
colorAxis.minValue |
Indique une valeur minimale pour les données de couleur du graphique, le cas échéant. Les valeurs de données de couleur de cette valeur ou d'une valeur inférieure seront affichées en tant que première couleur de la plage Type:nombre
Par défaut : valeur minimale de la colonne "Couleur" dans les données du graphique
|
colorAxis.maxValue |
Si ce champ est présent, spécifie une valeur maximale pour les données de couleur du graphique. Les valeurs de données de couleur de cette valeur ou d'une valeur supérieure seront affichées en tant que dernière couleur de la plage Type : nombre
Par défaut:valeur maximale de la colonne "Couleur" dans les données du graphique
|
colorAxis.values |
S'il est présent, contrôle la manière dont les valeurs sont associées aux couleurs. Chaque valeur est associée à la couleur correspondante dans le tableau Type : tableau de nombres
Par défaut:null
|
colorAxis.colors |
Couleurs à attribuer aux valeurs de la visualisation. Un tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: Type : tableau de chaînes de couleurs
Par défaut : null
|
DataRegionRegionColor |
Couleur à attribuer aux régions sans données associées. Type : chaîne
Par défaut : "#F5F5F5"
|
Couleur par défaut |
Couleur à utiliser pour les points de données d'un graphique géographique lorsque le lieu (ex. : Type : chaîne
Par défaut : "#267114"
|
Mode d'affichage |
Type de graphique géographique dont il s'agit. Le format DataTable doit correspondre à la valeur spécifiée. Les valeurs suivantes sont acceptées:
Type : chaîne
Par défaut : "auto"
|
domaine |
Affichez le graphique géographique comme s'il était diffusé depuis cette région. Par exemple, si vous définissez Type:chaîne
Par défaut : null
|
enableRegionInteractivity |
Si la valeur est "true", activez l'interactivité de la région, y compris l'élaboration de focus et d'info-bulles lors du survol de la souris, ainsi que la sélection et le déclenchement de la région des événements La valeur par défaut est "true" en mode région et "false" en mode repère. Type:booléen
Par défaut : automatique
|
Forcer le cadre iFrame |
Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.) Type : booléen
Par défaut:false
|
version du graphique géographique |
Version des données de bordure GeoChart. Les versions Type:nombre
Par défaut : 10
|
hauteur |
Hauteur de la visualisation, en pixels. La hauteur par défaut est de 347 pixels, sauf si l'option Type : nombre
Par défaut:auto
|
conserverProportions |
Si la valeur est "true", le graphique est dessiné à la plus grande taille pouvant tenir dans la zone, à son format naturel. Si une seule des options
Si la valeur est "false", le graphique géographique est étiré jusqu'à la taille exacte indiquée par les options Type:booléen
Par défaut : true
|
légende |
Objet avec des membres permettant de configurer divers aspects de la légende, ou "none" si aucune légende ne doit apparaître. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {textStyle: {color: 'blue', fontSize: 16}} Type:Object / 'none' (Objet/Aucun)
Par défaut : null
|
légende.nombreFormat |
Chaîne de format pour les libellés numériques. Il s'agit d'un sous-ensemble de l'ensemble de modèles d'ICU.
Par exemple, Type : chaîne
Par défaut : auto
|
légende.texteStyle |
Objet spécifiant le style de légende. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type:objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
region |
Zone à afficher sur le graphique. Les zones environnantes sont également affichées. Il peut s'agir de l'un des éléments suivants:
Type : chaîne
Par défaut : "world"
|
loupe |
Objet avec des membres permettant de configurer divers aspects de la loupe. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {enable: true, zoomFactor: 7.5} Type:Objet
Par défaut :
{enable: true, zoomFactor: 5.0} |
loupe.enable.Glass.enable |
Si la valeur est "true", lorsque l'utilisateur s'attelle au-dessus d'un repère surchargé, une icône en forme de loupe s'ouvre. Remarque: Cette fonctionnalité n'est pas disponible dans les navigateurs qui ne sont pas compatibles avec SVG, à savoir Internet Explorer version 8 ou antérieure. Type:booléen
Par défaut : true
|
LoupeGlass.zoomFactor |
Facteur de zoom de la loupe. Il peut s'agir de n'importe quel nombre supérieur à 0. Type:nombre
Par défaut : 5.0
|
Opacité du repère |
Opacité des repères, où 0,0 est totalement transparent et 1,0 complètement opaque. Type : nombre, 0.0–1.0
Par défaut:1.0
|
versioncoderrégion |
Version des données du codeur régional Les versions Type:nombre
Par défaut:0
|
resolution |
Résolution des bordures du graphique. Choisissez l'une des valeurs suivantes :
Type:chaîne
Par défaut : 'countries'
|
sizeAxis |
Objet avec des membres permettant de configurer l'association des valeurs à la taille des bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {minValue: 0, maxSize: 20} Type : objet
Par défaut : null
|
sizeAxis.maxSize |
Rayon maximal de la bulle la plus grande possible, en pixels. Type : nombre
Par défaut:12
|
sizeAxis.maxValue |
Valeur de la taille (telle qu'elle apparaît dans les données du graphique) à mapper sur Type:nombre
Valeur par défaut : valeur maximale de la colonne de taille dans les données du graphique
|
sizeAxis.minSize |
Rayon minimal de la plus petite bulle possible, en pixels. Type : nombre
Par défaut:3
|
sizeAxis.minValue |
Valeur de la taille (telle qu'elle apparaît dans les données du graphique) à mapper sur Type : nombre
Par défaut : valeur minimale de la colonne de taille dans les données du graphique
|
info-bulle |
Objet avec des membres permettant de configurer divers éléments d'info-bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true} Type : objet
Par défaut : null
|
tooltip.textStyle |
Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:
Type:chaîne
Par défaut : "focus"
|
largeur |
Largeur de la visualisation, en pixels. La largeur par défaut est de 556 pixels, sauf si l'option Type:nombre
Par défaut:auto
|
Hiérarchie et codes des continents
Vous pouvez afficher les graphiques géographiques des continents/sous-continents en définissant l'option region
sur l'un des codes à trois chiffres suivants. Les codes et la hiérarchie sont basés, à quelques exceptions près, sur ceux développés et maintenus par la
Division des statistiques des Nations Unies
.
Continent | Sous-continent | Pays |
---|---|---|
002 - Afrique |
015 - Afrique du Nord |
DZ, EG, EH, LY, MA, SD, SS, TN |
011 - Afrique de l'Ouest |
{\cf16} | |
017 - Afrique centrale |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014 - Afrique de l'Est |
{\cf16} | |
018 - Afrique australe |
BW, LS, NA, SZ, ZA | |
150 – Europe |
154 - Europe du Nord |
1 ! |
155 - Europe occidentale |
AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL | |
151 - Europe de l'Est |
BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA | |
039 - Europe du Sud |
AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, , 22 | |
019 – Amérique |
021 – Amérique du Nord |
BM, CA, GL, PM, US |
029 – Caraïbes |
: | |
013 – Amérique centrale |
BZ, CR, GT, HN, MX, NI, PA, SV | |
005 - Amérique du Sud |
RA, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, ,, | |
142 - Asie |
143 – Asie centrale |
TM, TJ, KG, KZ, UZ |
030 - Asie de l'Est |
CN, HK, JP, KP, KR, MN, MO, TW | |
034 - Asie du Sud |
<br class="ph-0-0">AF<br class="ph-1-1">,{101} <br class="ph-0-2">BD<br class="ph-1 -3">,{101} <br class="ph-0-4">BT<br class="ph-1-5">,{101} <br class="ph-0-6">IN <br class="ph-1-7">,{101} <br class="ph-0-8">RI<br class="ph-1-9">,{101} <br class=" ph-0-10">LK<br class="ph-1-11">,{101} <br class="ph-0-12">MV<br class="ph-1-13">, {101} <br class="ph-0-14">NP<br class="ph-1-15">,{101} <br class="ph-0-16">PK<br class=" ph-1-17"> | |
035 - Asie du Sud-Est |
BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, V2} | |
145 - Asie occidentale |
||
009 - Océanie |
053 – Australie et Nouvelle-Zélande |
AU, NF, NZ |
054 - Mélanésie |
FJ, NC, PG, SB, VU | |
057 - Micronésie |
FM, GU, KI, MH, MP, NR, PW | |
061 - Polynésie |
AS, CK, NU, PF, PN, TK, TO, TV, WF, WS |
Méthodes
Méthode | |
---|---|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
draw(data, options) |
Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type de retour) : aucun
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après le graphique. Consultez Imprimer des graphiques PNG. Type de retour:chaîne
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Les entités sélectionnables sont des régions auxquelles une valeur a été attribuée.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi:tableau des éléments de sélection
|
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Les entités sélectionnables sont des régions auxquelles une valeur a été attribuée.
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
Événements
Nom | |
---|---|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
regionClick |
Appelée lorsqu'un internaute clique sur une région Elle ne sera pas générée pour le pays spécifique spécifié dans l'option "région" (si un pays spécifique était listé).
Propriétés : objet avec une seule propriété,
region , qui est une chaîne au format ISO-3166 décrivant la région sur laquelle l'utilisateur a cliqué.
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles concernant les données
Les adresses sont géocodées par Google Maps. Les données qui ne nécessitent pas de géocodage ne sont envoyées à aucun serveur. Pour en savoir plus sur ses règles relatives aux données, veuillez consulter les Conditions d'utilisation de Google Maps.