将Highcharts地图与反应组件集成 [英] Integrate Highcharts maps with react component

问题描述

我正在尝试整合 highcarts 反应组件内部。

I am trying to integrate highcarts inside the react component.

这是我的反应组件的代码

Here is my code for the react component

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>
    )
  }
}

但是上面的代码没有显示我的react组件中的map或任何错误。任何人都可以帮助我
我在这里缺少什么？

But the above code does not show either the map or any error in my react component . Can Anyone please help me What i am missing here?

谢谢!!!

推荐答案

您需要添加并导入 word.js 脚本：

You need to add and import the word.js script:

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

现场演示： https://codesandbox.io/s/v0x5zx6q05

此外，我建议您使用 highcharts-react-official 包装： https：// www。 npmjs.com/package/highcharts-react-official

Also, I can recommend you to use highcharts-react-official wrapper: https://www.npmjs.com/package/highcharts-react-official

这篇关于将Highcharts地图与反应组件集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！