Highmaps в Typescript: карты не имеют дипслэй

Question

Я пытаюсь использовать highmap пакета highcharts в машинописи, используя реагировать. Тем не менее, он не отображает карту вообще.

Смотрите демонстрацию здесь: https://codesandbox.io/s/o9nokjr6vz

Это связано с этой опцией:

Highcharts.mapChart("investment", {
  chart: {
    map: "countries/de/de-all"
  },

Чего мне не хватает?

Answer 1

Картографические данные для указанных вами стран / de / de-all не были загружены для вашей карты. Вам нужно скачать файл GeoJson для Германии здесь , загрузить файл json в свой проект и импортировать его следующим образом;

import * as mapdata from "./de-all.geo.json";

и установите данные карты следующим образом

Highcharts.mapChart("investment", {
      chart: {
        //map: "countries/de/de-all"
        map: mapdata
      },

См. Разветвленную демонстрацию здесь :

Конечно, это стало бы легче, если бы карты Highcharts были доступны через npm.