Google Geochart - same countries, different values

问题:

I got some problems with displaying values for a country. The thing is, I want to display where football players of a certain team come from. Because many of them have same nationality, geochart displays only the last name in the array when hoovering over the country, but I want it to display all the names. This is the code:

var chart = function (item) {
  body = document.getElementById("regions_div");
  body.innerHTML = " ";
  var places = [];
  var names = [];
  for (var i = 0; i<item.length; i++) {
    person = item[i];
    country = person.nationality;
    name = person.name;
    places.push(country);
    names.push(name);
  };
  console.log(places);
  console.log(names);

  google.charts.load('upcoming', {'packages':['geochart']});
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = [];
    var header = ["Country", "Name"];
    data.push(header);
    for (var i = 0; i < places.length; i++) {
      var temp = [];
      temp.push(places[i]);
      temp.push(names[i]);
      console.log(temp);
      data.push(temp);
    }

    console.log(data);
    var chartdata = google.visualization.arrayToDataTable(data);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    chart.draw(chartdata, options);
  }
}

And the screenshot, for example this time has multiple players from England but only the last one in the array is displayed :

Thanks for help!

回答1:

following is an example of building a custom tooltip to show all names at each country

the group() method is used to group the names by country

then the tooltip is updated for each row in chartdata

for all the names found for each country

see following working snippet...

google.charts.load('current', {
  callback: drawRegionsMap,
  packages:['geochart']
});

function drawRegionsMap() {
  var container = document.getElementById('regions_div');
  container.innerHTML = '';
  var names = ["Sam Johnstone", "Chris Smalling", "Phil Jones", "Luke Shaw"];
  var places = ["United Kingdom", "United Kingdom", "United Kingdom", "United Kingdom"];

  var data = [];
  var header = ["Country", "Name"];
  data.push(header);
  for (var i = 0; i < places.length; i++) {
    var temp = [];
    temp.push(places[i]);
    temp.push(names[i]);
    data.push(temp);
  }

  var chartdata = google.visualization.arrayToDataTable(data);

  // group data by country, name
  var groupdata = google.visualization.data.group(
    chartdata,
    [0, 1],
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: "Name",
      type: "number"
    }]
  );

  // update tooltip for each chart data row
  for (var i = 0; i < chartdata.getNumberOfRows(); i++) {
    // find group rows for current country
    var locationRows = groupdata.getFilteredRows([{
      column: 0,
      value: chartdata.getValue(i, 0)
    }]);

    // build tooltip of all names for current country
    var nameTooltip = '';
    locationRows.forEach(function (index) {
      if (nameTooltip !== '') {
        nameTooltip += ', ';
      }
      nameTooltip += groupdata.getValue(index, 1);
    });

    // update tooltip
    chartdata.setValue(i, 1, nameTooltip);
  }

  var chart = new google.visualization.GeoChart(container);
  chart.draw(chartdata);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>