javascript - Google Geochart - 相同的国家，不同的值(value)

Question

我在显示某个国家/地区的值时遇到了一些问题。问题是，我想显示某支球队的足球运动员来自哪里。因为他们中的许多人具有相同的国籍，所以 geochart 在全国范围内徘徊时仅显示数组中的姓氏，但我希望它显示所有姓名。 这是代码:

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

以及屏幕截图，例如这次有多个来自英格兰的玩家，但只显示数组中的最后一个:

感谢您的帮助!

Answer 1

以下是构建自定义工具提示以显示每个国家/地区的所有姓名的示例

group() 方法用于按国家/地区对名称进行分组

然后为 chartdata 中的每一行更新工具提示

为每个国家/地区找到的所有名称

请参阅以下工作片段...

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>