我在显示一个国家的价值观时遇到了一些问题。问题是，我想显示某个球队的足球运动员来自哪里。由于其中许多人具有相同的国籍，因此当将鼠标悬停在该国家/地区时，地理图表仅显示数组中的姓氏，但我希望它显示所有名称。 这是代码：
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 :
感谢帮助！
以下是构建自定义工具提示以显示每个国家/地区的所有名称的示例
the 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>