Highcharts пользовательских данных для карты в React TypeScript?

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?

I я посмотрел ответы типа здесь и здесь , но они не работают для меня.

Я работаю с кодом из этого примера здесь .

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, в котором вы можете найти кнопку c для нужных стран.

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