Visualisation: graphique géographique

  1. Overview
  2. Graphiques géographiques par région
  3. Graphiques géographiques des repères
  4. Graphiques géographiques textuels
  5. Appliquer des couleurs à votre graphique
  6. Loading
  7. Format des données
  8. Options de configuration
  9. Méthodes
  10. Événements
  11. Règles concernant les données

Présentation

Un graphique géographique est la carte d'un pays, d'un continent ou d'une région, avec des zones identifiées selon l'une des trois méthodes suivantes:

  • Le mode région colore des régions entières, comme des pays, des provinces ou des États.
  • Le mode Repères utilise des cercles pour désigner des régions qui sont mises à l'échelle en fonction d'une valeur que vous spécifiez.
  • Le mode text étiquette les régions avec des identifiants (par exemple, "Russie" ou "Asie").

Un graphique géographique est affiché dans le navigateur à l'aide du format SVG ou VML. Notez qu'il n'est pas possible de faire défiler le graphique géographique, ni de le faire glisser. Il s'agit d'un dessin au trait plutôt que d'une carte en relief. Envisagez plutôt de visualiser une carte si vous le souhaitez.

Graphiques géographiques par région

Le style regions remplit des 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 des repères

Le style markers affiche des cercles aux emplacements spécifiés sur le graphique géographique, avec la couleur et la taille que vous spécifiez.
Essayez de pointer sur les repères surchargés autour de Rome. Une loupe s'ouvre pour les afficher 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 des repères proportionnels

Normalement, les graphiques géographiques des repères affichent la plus petite valeur de repère sous la forme d'un point minimal. Si vous souhaitez afficher des valeurs de repère proportionnelles (par exemple, parce qu'il s'agit de pourcentages), utilisez l'option sizeAxis pour définir minValue et maxValue explicitement.

Par exemple, voici une carte de l'Europe occidentale avec des populations et des zones 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 les zones représentent toutes des pourcentages de l'ensemble: le repère "France" est de couleur violette, car sa population est moyenne, mais sa taille est de 50 (sur 100 possibles), car il représente 50% de la surface totale combinée.

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 gamme de couleurs allant de l'orange au bleu, un spectre qui convient aux utilisateurs souffrant de déficiences visuelles. 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 à un graphique géographique avec 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' };
Full HTML
<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>

Appliquer des couleurs à votre graphique

Il existe plusieurs options pour personnaliser les couleurs des graphiques géographiques:

  • 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 du tableau de données pour lesquelles la valeur est null ou non spécifiée.

L'option colorAxis est la plus importante: elle spécifie la plage de couleurs pour les valeurs de vos 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 élément à la couleur attribuée à la plus grande valeur de l'ensemble de données. Si vous spécifiez plus de deux couleurs, une interpolation se produit entre elles.

Dans le graphique suivant, nous utiliserons les quatre options. colorAxis permet d'afficher l'Afrique avec les couleurs du drapeau panafricain, en utilisant les latitudes des pays : du rouge au nord au noir et du vert au sud. L'option backgroundColor permet de colorer l'arrière-plan en bleu clair, datalessRegionColor pour colorer les pays non africains en rose clair et defaultColor pour Madagascar.
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 "mapsApiKey", car cela ne fonctionnera pas. Tant que votre graphique ne nécessite pas de géocodage ou n'utilise pas de codes non standards pour identifier les lieux, vous n'avez pas besoin d'une carte 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 de la table de données varie en fonction du mode d'affichage que vous utilisez : regions, markers ou text.

Format du mode Régions

La zone géographique est indiquée dans une colonne, plus une colonne facultative comme décrit ci-dessous:

  1. Zone géographique [chaîne, obligatoire] : région à mettre en surbrillance. Tous les formats suivants sont acceptés. Vous pouvez utiliser différents formats dans différentes lignes :
    • Nom d'un pays sous forme de chaîne (par exemple, "Angleterre"), code ISO-3166-1 alpha-2 en majuscules ou son équivalent en texte en anglais (par exemple, "GB" ou "Royaume-Uni").
    • Nom de code régional ISO-3166-2 en majuscules ou son équivalent en texte anglais (par exemple, "US-NJ" ou "New Jersey").
    • Indicatif de zone métropolitaine. Il s'agit de codes d'agglomération à trois chiffres servant à désigner différentes régions. Les codes américains ne sont acceptés que. Notez qu'ils sont différents des indicatifs téléphoniques.
    • Toute valeur acceptée par la propriété region.
  2. 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, le cas échéant.

Format du mode Repères

Le nombre de colonnes varie en fonction du format de repère utilisé et d'autres colonnes facultatives.

  • Emplacement du repère [obligatoire]
    La première colonne correspond à une chaîne d'adresse spécifique (par exemple, "1600 avenue des Champs-Élysées").

    OU

    Les deux premières colonnes sont numériques, la première colonne à la latitude et la deuxième à la longitude.

    Remarque:Bien que nous vous recommandions d'utiliser des codes ISO 3166 pour le mode "Régions", le mode "Repères" fonctionne mieux avec les noms plus longs des régions (comme l'Allemagne, le Panama, etc.). En effet, lorsqu'ils sont en mode "repères", les graphiques géographiques utilisent Google Maps pour géocoder les établissements (en convertissant un emplacement de chaîne en latitude et en longitude). Par conséquent, les zones géographiques ambiguës peuvent ne pas être géocodées comme vous le souhaiteriez. Par exemple, "DE" correspond à l'Allemagne ou au Delaware, ou "PA" au Panama ou à la Pennsylvanie.

  • Couleur du repère [Nombre, facultatif] La colonne suivante est une colonne numérique facultative utilisée pour 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 totalement par rapport 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 par rapport aux autres tailles de repère. Si cette colonne n'est pas présente, la valeur de la colonne précédente est 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 [chaîne, obligatoire] : chaîne d'adresse spécifique (par exemple, "1600 Pennsylvania Ave").
  • Taille du texte [Nombre, facultatif] La deuxième colonne est une colonne numérique facultative utilisée pour attribuer la taille du libellé. Si cette colonne n'est pas présente, tous les libellés 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 simple chaîne de couleur HTML, par exemple 'red' ou '#00cc00', ou d'un objet présentant les propriétés suivantes.

Type:chaîne ou objet
Par défaut:blanc
backgroundColor.fill

Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML.

Type:chaîne
Par défaut:blanc
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 qui spécifie une correspondance entre les valeurs des colonnes de couleur et les couleurs, ou une échelle de dégradé. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type:objet
Par défaut:null
colorAxis.minValue

Si ce champ est présent, il indique une valeur minimale pour les données de couleur du graphique. Les valeurs de données de couleur de cette valeur et des valeurs inférieures seront affichées en tant que première couleur dans la plage colorAxis.colors.

Type:nombre
Par défaut:valeur minimale de la colonne de couleur dans les données du graphique
colorAxis.maxValue

S'il est présent, spécifie une valeur maximale pour les données de couleur du graphique. Les valeurs de données de couleur supérieures ou égales à cette valeur seront affichées en tant que dernière couleur de la plage colorAxis.colors.

Type:nombre
Par défaut:valeur maximale de la colonne de couleur dans les données du graphique
colorAxis.values

Le cas échéant, 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 du graphique. La coloration est effectuée selon un dégradé des valeurs spécifiées ici. Si vous ne spécifiez pas de valeur pour cette option, cela équivaut à spécifier [minValue, maxValue].

Type:tableau de nombres
Par défaut:null
colorAxis.colors

Couleurs à attribuer aux valeurs de la visualisation. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: colorAxis: {colors:['red','#004411']}. Vous devez définir au moins deux valeurs. Le dégradé inclura toutes vos valeurs, ainsi que les valeurs intermédiaires calculées, la première couleur étant la plus petite valeur et la dernière couleur la plus élevée.

Type:tableau de chaînes de couleurs
Par défaut:null
datalessRegionColor

Couleur à attribuer aux régions sans données associées.

Type:chaîne
Par défaut : "#F5F5F5"
defaultColor

Couleur à utiliser pour les points de données d'un graphique géographique lorsque le lieu (par exemple, 'US') est présent, mais la valeur est null ou n'est pas spécifiée. Elle est différente de datalessRegionColor, qui est la couleur utilisée lorsque des données sont manquantes.

Type:chaîne
Par défaut : "#267114"
displayMode

Type de graphique géographique dont il s'agit. Le format du tableau de données doit correspondre à la valeur spécifiée. Les valeurs suivantes sont acceptées:

  • "auto" : sélectionnez cette option en fonction du format du tableau de données.
  • 'regions' : colore les régions sur le graphique géographique.
  • "Repères" : placez des repères sur les régions.
  • "text" : étiquetez les régions avec le texte de la table 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 apparaît comme appartenant à l'Inde plutôt qu'en tant que territoire contesté.

Type:chaîne
Par défaut:null
enableRegionInteractivity

Si la valeur est définie sur "true", activez l'interactivité de la région, y compris le focus et l'élaboration de l'info-bulle au passage 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 de souris.

La valeur par défaut est "true" en mode région et "false" en mode repère.

Type:booléen
Par défaut:automatique
forceIFrame

Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames.

Type:booléen
Par défaut : "false"
geochartVersion

Version des données de bordure GeoChart. Les versions 10 et 11 sont disponibles.

Type:nombre
Par défaut:10
taille

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". Dans ce cas, la hauteur est calculée en conséquence.

Type:nombre
Par défaut:auto
keepAspectRatio

Si la valeur est "true", le graphique géographique est dessiné à la taille la plus grande pouvant tenir dans la zone de graphique avec ses proportions naturelles. 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é à la taille exacte du graphique, comme spécifié par les options width et height.

Type:booléen
Valeur par défaut : "true"
légende

Objet avec des membres pour configurer les différents aspects de la légende, ou "aucune" si aucune légende ne doit apparaître. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

 {textStyle: {color: 'blue', fontSize: 16}}
Type:objet / 'aucun'
Par défaut:null
legend.numberFormat

Chaîne de format pour les étiquettes numériques. Il s'agit d'un sous-ensemble de l' ensemble de modèles ICU . Par exemple, {numberFormat:'.##'} affiche 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
legend.textStyle

Objet qui spécifie le style du texte de la légende. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
region

Zone à afficher dans le graphique géographique. (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.
  • Continent ou sous-continent, spécifié par son code à trois chiffres, par exemple '011' pour l'Afrique de l'Ouest.
  • Un pays, spécifié par son code ISO 3166-1 alpha-2, par exemple, "AU" pour l'Australie.
  • État des États-Unis, spécifié par 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"
magnifyingGlass

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 littérale d'objet, comme indiqué ci-dessous: 

{enable: true, zoomFactor: 7.5}
Type:Object
Par défaut:{enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

Si la valeur est "true", lorsque l'utilisateur s'attarde sur un repère surchargé, une loupe s'ouvre.

Remarque: Cette fonctionnalité n'est pas compatible avec les navigateurs qui ne sont pas compatibles avec le SVG, c'est-à-dire Internet Explorer version 8 ou antérieure.

Type:booléen
Valeur par défaut : "true"
magnifyingGlass.zoomFactor

Facteur de zoom de la loupe. Peut être tout nombre supérieur à 0.

Type:nombre
Par défaut:5.0
markerOpacity

Opacité des marqueurs : 0.0 correspond à une transparence totale et 1.0 à totalement opaque.

Type:nombre, 0,0–1,0
Par défaut:1.0
regioncoderVersion

Version des données du regioncoder. Les versions 0 et 1 sont disponibles.

Type:nombre
Par défaut:0
resolution

Résolution des bordures du graphique géographique. Choisissez l'une des valeurs suivantes :

  • "countries" : disponible pour toutes les régions, à l'exception des régions des États américains.
  • "provinces" : uniquement disponible pour les pays et les régions des États américains. Non disponible dans certains pays. Veuillez tester un pays pour vérifier si cette option est disponible.
  • 'metros' [metros] : uniquement pris en charge pour les États et régions des États-Unis.
Type:chaîne
Par défaut : "countries" (pays).
sizeAxis

Objet avec des membres permettant de configurer la manière dont les valeurs sont associées à la taille des bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale 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 taille (telle qu'affichée dans les données du graphique) à mapper avec sizeAxis.maxSize. Les valeurs supérieures seront recadrées pour atteindre cette valeur.

Type:nombre
Par défaut:valeur maximale de la colonne de taille dans les données du graphique
sizeAxis.minSize

Rayon minimal de la bulle la plus petite possible (en pixels).

Type:nombre
Par défaut:3
sizeAxis.minValue

Valeur de taille (telle qu'affichée dans les données du graphique) à mapper avec sizeAxis.minSize. Les valeurs inférieures seront recadrées à 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-bulle. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale 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> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également 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:

  • "sélectionner" : l'info-bulle s'affiche lorsque l'utilisateur pointe 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 des graphiques géographiques des continents et 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 gérés par la Division de statistique 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 BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR, {2G {2G{/2 {3,21} {2G{/2 {3,2}SHSLSN
017 - Afrique centrale AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Afrique de l'Est BI4, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, RE2}, RE2, {2{2 {3SC{12RWSCSOTZUG
018 - Afrique australe BW, LS, NA, SZ, ZA
150 – Europe 154 – Europe du Nord GG, JE, AX, DK, EE, FI, FO, Go, IE, IM, IS, {2,2{/2 {2LV
155 – Europe de l'Ouest 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 AD2, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, {22, {22, {22 SMPT
019 – Amériques 021 – Amérique du Nord BM, CA, GL, PM, États-Unis
029 – Caraïbes AGBBCUDMGDGPLCMS
013 – Amérique centrale BZ, CR, GT, HN, MX, NI, PA, SV
005 – Amérique du Sud AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY,{32 {4SRU2}SRVE
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 AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - Asie du Sud-Est BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, VN
145 - Asie de l'Ouest AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB
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 les ressources allouées.

Return Type (Type renvoyé) : aucun
draw(data, options)

Permet de dessiner 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 renvoyé) : aucun
getImageURI()

Renvoie le graphique sérialisé en tant qu'URI d'image.

Appelez-le après que le graphique est dessiné.

Consultez la page Imprimer des graphiques PNG.

Type renvoyé:chaîne
getSelection()

Renvoie un tableau des entités de graphique sélectionnées. Les entités sélectionnables sont des régions auxquelles une valeur est attribuée. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Type renvoyé:tableau d'é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 est attribuée. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Return Type (Type renvoyé) : aucun

Événements

Nom
error

Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique.

Propriétés:id, message
ready

Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw, puis ne les appeler qu'après le déclenchement de l'événement.

Propriétés:aucune
regionClick

Appelé lorsqu'un utilisateur clique sur une région. Cette erreur ne sera pas générée pour le pays spécifique indiqué dans l'option "région" (si un pays spécifique était répertorié).

Properties (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().

Propriétés:aucune

Règles concernant les données

Les lieux sont géocodés 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 les règles relatives aux données, veuillez consulter les Conditions d'utilisation de Google Maps.