React TypeScript中用于地图的Highcharts自定义数据？

Question

如何将自定义data添加到地图series？

当前，自定义数据是类似数组的对象data: [string, number][]，其值看起来像：[["us",0],["uk",0],...]。

而且看起来数据是joinBy: ["hc-key", "hc-key"]，但我什至无法访问hc-key中的tooltip：

tooltip: {
        headerFormat: '',
        formatter: function () {
            const country = this.point;
            console.log(this);
    // cannot access this['hc-key'] or country['hc-key']
            const info = `The value for ${country.name} is ${country.value}`
            return info;
        }
    },
// I also filter country by value like this:
colorAxis: {
        dataClasses: [
            {
                from: 0,
                to: 0,
                color: "#9E9E9E",
                name: 'No Data'
            }, 

如何使series接受这样的数据结构而不是数组[[],[],...]：

[
  {country: 'us', name: 'USA', some_value: 0, some_other_values: [{...},{...},...],...},
...
]

所以我可以在工具提示中显示更多信息，但仍然可以通过some_value为每个国家/地区设置样式？

我看过here和here之类的答案，但它们对我不起作用。

我正在使用此示例here中的代码。

Answer 1

我准备了一个非常简单的演示示例，该示例演示了如何创建满足您要求的数据。

演示：https://jsfiddle.net/BlackLabel/yv5fp80o/

数据：

var data = [{
  'hc-key': 'in',
  value: 20,
  customValue: [10, 20]
}]

通过使用格式化程序功能，可以在工具提示中显示自定义值：https://api.highcharts.com/highcharts/tooltip.formatter

这是一种获取完整mapData数组的方法，您可以在其中找到所需国家/地区的hc键。

console.log(chart.series[0].mapData)