Cette page a été traduite par l'API Cloud Translation.

Visualisation: graphique géographique

Présentation
Graphiques géographiques régionaux
Graphiques géographiques de repères
Graphiques géographiques textuels
Colorier un graphique
Loading
Format des données
Options de configuration
Méthodes
Événements
Règles concernant les données

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.

Données et options

  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };

HTML complet

<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 est null 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.

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);
      };

Options

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

Page Web complète

<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 valeurs sizeAxis.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]
La première colonne est une adresse de chaîne spécifique (par exemple, "1600 Pennsylvania Ave").
OU
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 `'red'` ou `'#00cc00'`, ou d'un objet ayant les propriétés suivantes. 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 `colorAxis.colors`. 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 `colorAxis.colors`. 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 `colorAxis.colors`. Ces valeurs s'appliquent aux données de couleur des graphiques. La coloration est effectuée en fonction du dégradé des valeurs spécifiées ici. Ne pas spécifier de valeur pour cette option revient à spécifier [minValue, maxValue]. 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: `colorAxis: {colors:['red','#004411']}`. Vous devez disposer d'au moins deux valeurs. Le gradient inclura toutes vos valeurs, plus les valeurs intermédiaires calculées, la première couleur comme valeur la plus petite et la dernière couleur la plus élevée. 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. : `'US'`) est présente, mais sa valeur est `null` ou n'est pas spécifiée. Il est différent de `datalessRegionColor`, qui est la couleur utilisée lorsque des données sont manquantes. 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: 'auto' : choisissez l'option correspondant au format du tableau de données. "regions" : colore les régions du graphique. "markers" : placez des repères sur les régions. "text" : étiquetez les régions avec du texte issu du tableau de donné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 `domain` sur `'IN'`, le Cachemire est considéré comme appartenant à l'Inde plutôt que comme un territoire contesté. 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 `regionClick` et `select` lors d'un clic. 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 `10` et `11` sont disponibles. 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 `width` est spécifiée et que `keepAspectRatio` est défini sur "true", auquel cas la hauteur est calculée en conséquence. 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 `width` et `height` est spécifiée, l'autre sera calculée en fonction du format. Si la valeur est "false", le graphique géographique est étiré jusqu'à la taille exacte indiquée par les options `width` et `height`. 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, `{numberFormat:'.##'}` affichera les valeurs "10.66", "10.6" et "10.0" pour les valeurs 10.666, 10.6 et 10. 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 `color` peut être n'importe quelle chaîne de couleur HTML, par exemple : `'red'` ou `'#00cc00'`. Voir aussi `fontName` et `fontSize`. 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: "world" : graphique géographique du monde entier. Un continent ou un sous-continent, spécifié par son code à trois chiffres, par exemple "011" pour l'Afrique occidentale. Un pays, spécifié par son code ISO 3166-1 alpha-2, par exemple "AU" pour l'Australie. État des États-Unis, spécifié dans son code ISO 3166-2:US (par exemple, "US-AL" pour l'Alabama Notez que l'option `resolution` doit être définie sur "provinces" ou "metros". 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 `0` et `1` sont disponibles. Type:nombre Par défaut:0
resolution	Résolution des bordures du graphique. Choisissez l'une des valeurs suivantes : "countries" : disponible pour toutes les régions, sauf pour les États américains 'provinces' [provinces] : disponible uniquement pour les régions et les États américains. Incompatible avec tous les pays. Veuillez tester un pays pour voir si cette option est acceptée. "metros" : disponible uniquement pour les États et les régions des États-Unis. 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 `sizeAxis.maxSize`. Les valeurs plus élevées seront recadrées selon cette valeur. 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 `sizeAxis.minSize`. Les valeurs inférieures sont recadrées selon cette valeur. 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 `color` peut être n'importe quelle chaîne de couleur HTML, par exemple: `'red'` ou `'#00cc00'`. Voir aussi `fontName` et `fontSize`. 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: "focus" : l'info-bulle s'affiche lorsque l'utilisateur passe la souris sur l'élément. "none" : l'info-bulle ne s'affiche pas. "selection" : l'info-bulle s'affiche lorsque l'utilisateur sélectionne l'élément. 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 `height` est spécifiée et que `keepAspectRatio` est défini sur "true". Dans ce cas, la largeur est calculée en conséquence. 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 `ready`. `Extended description` 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é. `Extended description`. 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. `Extended description`. 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 `draw` et de les appeler uniquement après le déclenchement de l'événement. 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 `getSelection()`. 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.