Google Geochart - 相同的国家，不同的价值 [英] Google Geochart - same countries, different values

问题描述

我在为一个国家显示值时遇到了一些问题。事情是，我想展示某个团队的足球队员来自哪里。由于他们中的很多人具有相同的国籍，因此在全国范围内越过时，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]; 
国家= person.nationality; 
 name = person.name; 
 places.push（国家）; 
 names.push（name）; 
}; 
 console.log（places）; 
 console.log（names）; 
 
 google.charts.load（'coming'，{'packages'：['geochart']}）; 
 google.charts.setOnLoadCallback（drawRegionsMap）; 
 
函数drawRegionsMap（）{
 
 var data = []; 
 var header = [Country，Name]; 
 data.push（header）; 
 for（var i = 0; i< places.length; i ++）{
 var temp = []; 
 temp.push（地点[i]）; 
 temp.push（名称[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）; 
} 
} 
  

截图，例如这次有多个玩家来自英格兰，但只显示阵列中的最后一个：

感谢您的帮助！

解决方案

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

group（）方法用于按国家分组名称

然后更新每行的工具提示在 chartdata

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

google.charts .load（'current'，{callback：drawRegionsMap，packages：['geochart']}）;函数drawRegionsMap（）{var container = document.getElementById（'regions_div'）; container.innerHTML =''; var names = [Sam Johnstone，Chris Smalling，Phil Jones，Luke Shaw]; var places = [英国，英国，英国，英国]; var data = []; var header = [Country，Name]; data.push（报头）; for（var i = 0; i< places.length; i ++）{var temp = []; temp.push（地方[I]）; temp.push（名称[I]）; data.push（温度）; } var chartdata = google.visualization.arrayToDataTable（data）; //按国家/地区分组数据，名称var groupdata = google.visualization.data.group（chartdata，[0，1]，[{aggregation：google.visualization.data.count，column：1，label：Name，type ：number}]）; //为每个图表数据行更新工具提示（var i = 0; i< chartdata.getNumberOfRows（）; i ++）{//查找当前国家/地区的组行var locationRows = groupdata.getFilteredRows（[{column：0，value ：chartdata.getValue（i，0）}]）; //为当前国家/地区建立所有名称的工具提示var nameTooltip =''; locationRows.forEach（function（index）{if（nameTooltip！==''）{nameTooltip + ='，';} nameTooltip + = groupdata.getValue（index，1）;}）; //更新工具提示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>

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!

解决方案

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>

这篇关于Google Geochart - 相同的国家，不同的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！