Angular 如何在使用highcharts/highmaps悬停在工具提示上时显示同一属性的多个值

我使用的是highmaps世界地图，当我在某个国家停留时，我希望工具提示列出来自该特定国家的所有食物链。然而，我只是设法得到工具提示，列出了第一个结果。每个国家的结果数量各不相同

例如，我希望工具提示在悬停在美国时列出以下食物链：

1:{公司名称：“汉堡王”，hc键：“美国”}


2:{公司名称：“麦当劳”，hc键：“美国”}


3:{公司名称：“肯塔基炸鸡”，hc键：“美国”}


4:{公司名称：“Quiznos”，hc键：“us”}


5:{公司名称：“地铁”，hc键：“美国”}


6:{companyName:“In and Out”，hc键：“us”}


7:{公司名称：“塔可钟”，hc键：“美国”}


8:{公司名称：“大力水手”，hc键：“美国”}


9:{公司名称：“盒子里的杰克”，hc键：“我们”}

10:{公司名称：“意大利比萨饼”，hc键：“它”}

10:{公司名称：“意大利面食”，hc键：“它”}

我当前的代码输出第一个结果，我只是不知道如何编辑工具提示格式化程序来解释其余的结果。谢谢

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（高图）{
这是公司数据
.getcompanyCountries（此.selectedIndustry）
.订阅(
（数据：任意[]）=>{
this.companys=data.map（函数（el）{
返回{companyName:el.name，'hc key'：el.country\u code}
})
console.log（this.companys）
//创建图表
Highcharts.mapChart（'container-map'{
图表：{
地图：世界地图，
},
标题：{
文本：“”
},
图例：{
已启用：false
},
地图导航：{
启用：false，
按钮选项：{
对齐到：“spacingBox”
}
},
系列：[{
颜色：'#ffff00'，
nullborderColor:“#D3”，
键入：“映射”，
名称:"食物链",，
工具提示：{
pointFormat:“{point.name}:
{point.companyName}”，
},
国家：{
悬停：{
颜色：“#ffff00”
}
},
数据标签：{
启用：false，
格式：“”
},
nullColor:“白色”，
阿拉雷斯：是的，
joinBy:“hc键”，
数据：这是一家公司，
}]
})
}
)} 

编辑：

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,
                    }]


            })
            }

        )} 

mapdata（高图）{
这是公司数据
.getcompanyCountries（此.selectedIndustry）
.订阅(
（数据：任意[]）=>{
this.companys=data.map（函数（代码）{
返回{companyName:code.name，code:code.country\u code}
})
console.log（this.companys）
//创建图表
Highcharts.mapChart（'container-map'{
图表：{
地图：世界地图，
},
标题：{
文本：“”
},
图例：{
已启用：false
},
学分：{
已启用：false
},
地图导航：{
启用：false，
按钮选项：{
对齐到：“spacingBox”
}
},
打印选项：{
地图：{
阿拉雷斯：是的，
joinBy:['hc-key'，'code']，
数据标签：{
启用：对，
颜色：“#FFFFFF”，
风格：{
fontWeight:“粗体”
},
//仅显示标签等级高的区域的数据标签
格式：空，
格式化程序：函数（）{
if（this.point.properties&&this.point.properties.labelrank.toString（）<5）{
返回此.point.properties['hc-key']；
}
}
},
工具提示：{
总部：''，
pointFormatter:函数（）{
变量字符串=“”+this.name+”：
；
data.forEach（函数（companyName）{
字符串+=companyName.name+'
'
});
返回字符串；
}
}
}
},
系列：[{
颜色：'#ffff00'，
nullborderColor:“#D3”，
键入：“映射”，
名称:"食物链",，
国家：{
悬停：{
颜色：“#ffff00”
}
},
数据标签：{
启用：false，
格式：
tooltip: {
    pointFormatter: function() {
      var string = '<b>' + this.name + ':<br>';
      this.companyNames.forEach(function(name) {
        string += name + '<br>'
      });
      return string;
    }
  }