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

Question

我正在使用 highmaps 世界地图，当我将鼠标悬停在一个国家/地区时，我希望工具提示列出来自该特定国家/地区的所有食物链。但是，我只是设法让工具提示列出第一个结果。每个国家/地区的结果数量各不相同。

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

1：{公司名称：“汉堡王”，hc-key："us"}

2：{公司名称：“麦当劳”，hc-key："us"}

3：{公司名称：“肯德基”，hc-key："us"}

4：{公司名称：“Quiznos”，hc-key："us"}

5: {companyName: “地铁”, hc-key: "us"}

6: {companyName: “In and Out”, hc-key: "us"}

7：{公司名称：“Taco Bell”，hc-key："us"}

8: {companyName: “Popeyes”, hc-key: "us"}

9: {companyName: “Jack in the Box”, hc-key: "us"}

10：{公司名称：“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,
                    }]


            })
            }

        )} 

Answer 1

可以使用工具提示 pointFormatter 或 pointFormat 选项在 Highcharts 工具提示中添加自定义信息。您可以在 Highcharts API 中找到有关这两个参数的更多信息： https://api.highcharts.com/highcharts/tooltip.pointFormat https://api.highcharts.com/highcharts/tooltip.pointFormatter

tooltip: {
    pointFormatter: function() {
      var string = '<b>' + this.name + ':<br>';
      this.companyNames.forEach(function(name) {
        string += name + '<br>'
      });
      return string;
    }
  }

实例： https://jsfiddle.net/BlackLabel/gekrzdto/1/