Javascript 将Highcharts地图与react组件集成

我正在尝试在react组件内部集成

下面是我的react组件代码

import * as Highcharts from 'highcharts/highmaps'
class RealTime extends Component {
  componentDidMount() {
      $.getJSON(     'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json',
        function(data) {
          $.each(data, function() {
            this.value = this.value < 1 ? 1 : this.value
          })
          Highcharts.mapChart('world_map', {
            chart: {
              map: 'custom/world'
            },
            title: {
              text: 'Fixed tooltip with HTML'
            },
            legend: {
              title: {
                text: 'Population density per km²',
                style: {
                  color:
                    (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
              }
            },
            mapNavigation: {
              enabled: true,
              buttonOptions: {
                verticalAlign: 'bottom'
              }
            }, 
            series: [
              {
                data: data,
                mapData: Highcharts.maps['custom/world'],
                joinBy: ['iso-a3', 'code3'],
                name: 'Population density',
                states: {
                  hover: {
                    color: '#a4edba'
                  }
                }
              }
            ]
          })
        }
      )
  }

  render() {
    return (
      <div>
        <div className="map_bg" id="world_map"/>
      </div>
    )
  }
}

import*作为“Highcharts/highmaps”中的Highcharts
类实时扩展组件{
componentDidMount（）{
$.getJSON（'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world population density.json'，
功能（数据）{
$.each（数据，函数（）{
this.value=this.value<1？1:this.value
})
Highcharts.mapChart（“世界地图”{
图表：{
地图：“自定义/世界”
},
标题：{
文本：“修复了带有HTML的工具提示”
},
图例：{
标题：{
文字：“每平方公里人口密度”，
风格：{
颜色：
（Highcharts.theme&&Highcharts.theme.textColor）| |“黑色”
}
}
},
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”
}
}, 
系列：[
{
数据：数据，
mapData:Highcharts.maps['custom/world']，
joinBy:['iso-a3'，'code3']，
名称：'人口密度'，
国家：{
悬停：{
颜色：“#a4edba”
}
}
}
]
})
}
)
}
render（）{
返回(
)
}
}

但是上面的代码既没有显示映射，也没有显示react组件中的任何错误。谁能帮帮我吗 我错过了什么

---

谢谢你

您需要添加并导入

word.js

脚本：

import Highcharts from "highcharts/highmaps";
import customWord from "./word.js";

现场演示：

---

另外，我可以建议您使用

highcharts-react-official

wrapper:

使用

$（document）.ready（（）=>{

inside

componentDidMount（）

没有意义，即

$.getJSON（…）

将永远不会被调用。我也尝试过。但不幸的是，你的评论毫无意义。例如，也许你应该查看现成的NPM模块……但我可以轻松地将其集成。那么highmaps有什么问题吗？太棒了！！！你怎么知道的？我到处搜索，但没有任何效果。

的作用是什么>customWord

hereHi@Profer，我很高兴能帮上忙。

customWord

是一个未使用的变量，你可以用其他方式导入脚本。天哪，你做得很棒。再次感谢你。有什么方法可以让我实现黑暗主题吗？是的，当然。你只需要设置主题选项：Hi@Sivaprakash D，使用

bubble系列类型，您需要导入并初始化
highcharts more
模块。实时示例：