GeoCharts : comment afficher les noms de pays au lieu des codes

Question

J'aimerais faire une visualisation avec le GeoChart de google. J'ai mis des codes pays. J'aimerais afficher les noms complets des pays, mais seul le code du pays apparaît.

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

Answer 1

En utilisant la notation des objets,
vous pouvez fournir la valeur ( v: ) et la valeur formatée ( f: )

{v: 'IT', f: 'Italy'}

l'infobulle affichera la valeur formatée par défaut

mettre à jour les données en utilisant la notation d'objet et fournir le nom comme valeur formatée

voir l'extrait de travail suivant,
survolez l'Italie pour voir le résultat...

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    [{v: 'IT', f: 'Italy'}, 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

Answer 2

Sur la base de la réponse du WhiteHat, j'ai ajouté du code pour automatiser l'introduction des valeurs formatées.

// iso to name conversion
// https://gist.github.com/maephisto/9228207
var isoCountries = {
  'IT': 'Italy',
  'JO': 'Jordan',
  'LB': 'Lebanon',
};

function getCountryName(countryCode) {
  if (isoCountries.hasOwnProperty(countryCode)) {
    return isoCountries[countryCode];
  } else {
    return countryCode;
  }
};

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['geochart'],

  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawRegionsMap);

// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawRegionsMap() {
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');
  data.addColumn('number', 'Members');
  data.addRows([
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
  ]);

  // Set chart options
  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none',
    backgroundColor: '#efefef'
  };

  // Create new data table for iso and full country name
  var dataMod = new google.visualization.DataTable();
  dataMod.addColumn('string', 'Country');
  dataMod.addColumn('number', 'Members');

  // Adding rows with iso and full country name
  var numRows = data.getNumberOfRows();

  for (var i = 0; i < numRows; i++) {
    dataMod.addRows([
      [{
        v: String(data.getValue(i, 0)),
        f: String(getCountryName(data.getValue(i, 0)))
      }, data.getValue(i, 1)],
    ]);
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(dataMod, options);

}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>