reactjs - Typescript 中的 Highmaps：未显示地图

Question

我正在尝试使用 react 在 typescript 中使用 highcharts 包的 highmap。但是，它根本不显示地图。

在此处查看现场演示：https ://codesandbox.io/s/o9nokjr6vz

它与此选项有关：

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

我错过了什么？

标签： reactjstypescripthighcharts

Answer 1

未为您的地图加载您引用的 'countries/de/de-all' 的地图数据。您必须在此处下载德国的 GeoJson 文件并将 json 文件上传到您的项目并像这样导入；

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

并将地图数据设置如下

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

在此处查看分叉演示：

当然，当通过 npm 提供 Highcharts 地图时，这会变得更容易。