【发布时间】：2019-07-29 22:27:17
【问题描述】：
我正在使用 highmaps 世界地图，当我将鼠标悬停在一个国家/地区时，我希望工具提示列出来自该特定国家/地区的所有食物链。但是，我只能设法让工具提示列出第一个结果。每个国家/地区的结果数量各不相同。
例如，当鼠标悬停在美国时，我希望工具提示列出以下食物链：
1：{公司名称：“汉堡王”，hc-key：“我们”}
2：{公司名称：“麦当劳”，hc-key：“我们”}
3：{公司名称：“肯德基炸鸡”，hc-key：“我们”}
4: {companyName: “Quiznos”, hc-key: “us”}
5: {companyName: “Subway”, hc-key: “us”}
6: {companyName: “In and Out”, hc-key: “us”}
7: {companyName: “Taco Bell”, hc-key: “us”}
8: {companyName: “Popeyes”, hc-key: “us”}
9: {companyName: “Jack in the Box”, hc-key: “us”}
10: {companyName: “Italia Pizza”, hc-key: “it”}
10: {companyName: “Italia Pasta”, hc-key: “it”}
我当前的代码输出第一个结果，我只是不知道如何编辑工具提示格式化程序来解释其余结果。谢谢。
mapdata(Highcharts){
this.companyData
.getcompanyCountries(this.selectedIndustry)
.subscribe(
(data: any[]) => {
this.companies = data.map(function(el){
return {companyName: el.name, 'hc-key':el.country_code}
})
console.log(this.companies)
// Create the chart
Highcharts.mapChart('container-map', {
chart: {
map: worldMap,
},
title: {
text: ''
},
legend: {
enabled: false
},
mapNavigation: {
enabled: false,
buttonOptions: {
alignTo: 'spacingBox'
}
},
series: [{
color: '#ffff00',
nullborderColor: '#d3d3d3',
type: 'map',
name: 'Food Chains',
tooltip: {
pointFormat: '{point.name}:<br><b>{point.companyName}',
},
states: {
hover: {
color: '#ffff00'
}
},
dataLabels: {
enabled: false,
format: ''
},
nullColor: 'white',
allAreas: true,
joinBy: 'hc-key',
data: this.companies,
}]
})
}
)}
已编辑：
mapdata(Highcharts){
this.companyData
.getcompanyCountries(this.selectedIndustry)
.subscribe(
(data: any[]) => {
this.companies = data.map(function(code){
return {companyName: code.name, code: code.country_code}
})
console.log(this.companies)
// Create the chart
Highcharts.mapChart('container-map', {
chart: {
map: worldMap,
},
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
mapNavigation: {
enabled: false,
buttonOptions: {
alignTo: 'spacingBox'
}
},
plotOptions: {
map: {
allAreas: true,
joinBy: ['hc-key','code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function() {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['hc-key'];
}
}
},
tooltip: {
headerFormat: '',
pointFormatter: function() {
var string = '<b>' + this.name + ':<br>';
data.forEach(function(companyName) {
string += companyName.name + '<br>'
});
return string;
}
}
}
},
series: [{
color: '#ffff00',
nullborderColor: '#d3d3d3',
type: 'map',
name: 'Food Chains',
states: {
hover: {
color: '#ffff00'
}
},
dataLabels: {
enabled: false,
format: ''
},
nullColor: 'white',
data: this.companies,
}]
})
}
)}
【问题讨论】：
-
最简单的方法是重新设计数据模型，在将同一国家的所有公司名称传递给 Highcharts 之前将它们连接起来
-
除了前面的评论，一个好主意可能是使用 pointFormatter 代替 pointFormat，这将帮助您轻松循环您的 companyNames 数组。现场示例：jsfiddle.net/BlackLabel/gekrzdto
-
如果我的解决方案能够满足您的要求，我会将其作为最终答案发布。
-
非常感谢 Grzegorz，我关注了你的 jsfiddle 并能够列出所有的食物链，但是所有的食物链都悬停在每个匹配的国家（不仅仅是它们各自的国家）上。我可以做一些小的调整来解决这个问题吗？我在上面包含了我编辑的代码。再次感谢。
-
请找到我的更新示例：jsfiddle.net/BlackLabel/gekrzdto/1
标签： angular typescript highcharts tooltip