Google Geochart - те же страны, разные значения

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>