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>