Javascript 如何在reactJS中使用此highchart映射

在过去的几天里，我一直在努力在我的react项目中使用这种highchart映射类型

谁能帮我一下吗？ 请检查我迄今为止取得的成就：

我正在使用那些highcharts npm软件包

“高图表”：“^7.1.2”， “海图反应官方”：“^2.2.2”

我尝试过很多事情，但最终还是走上了死胡同。。以下是我尝试过的最后一件事：

import React from "react";
import mapData from '../../api/mapData';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

require('highcharts/modules/map')(Highcharts);

class MyMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapValues: [],
      modalClassic: false,
    };
    this.mapData = new mapData();
    // preparing the config of map with empty data 
    this.options = {
      title: {
        text: 'Widget click by location',
          style: {
          color: '#fff'
        },
      },
      chart:{
        backgroundColor: 'transparent',
        type: 'map',
        map: null,
      },
      mapNavigation: {
        enabled: true,
          enableButtons: false
      },
      credits: {
        enabled: false
      },
      colorAxis: {
        dataClasses: [
          {
            from: 1,
            color: '#C40401',
            name: 'widget name one'
          }, {
            from: 2,
            color: '#0200D0',
            name: 'widget name two'
          }
        ]
      },
      tooltip: {
        pointFormatter: function() {
          return this.name;
        }
      },
      legend: {
        align: 'right',
          verticalAlign: 'top',
          x: -100,
          y: 70,
          floating: true,
          layout: 'vertical',
          valueDecimals: 0,
          backgroundColor: ( // theme
          Highcharts.defaultOptions &&
          Highcharts.defaultOptions.legend &&
          Highcharts.defaultOptions.legend.backgroundColor
        ) || 'rgba(255, 255, 255, 0.85)'
      },
      series: [{
        name: 'world map',
        dataLabels: {
          enabled: true,
          color: '#FFFFFF',
          format: '{point.postal-code}',
          style: {
            textTransform: 'uppercase'
          }
        },
        tooltip: {
          ySuffix: ' %'
        },
        cursor: 'pointer',
        joinBy: 'postal-code',
        data: [],
        point: {
          events: {
            click: function(r){
              console.log('click - to open popup as 2nd step');
              console.log(r);
            }
          }
        }
      }]
    };
  }

  /*
  * Before mounting the component,
  * update the highchart map options with the needed map data and series data
  * */
  componentWillMount = () => {
    this.mapData.getWorld().then((r)=>{
      this.setState({'mapData': r.data}, ()=>{

        this.options.series[0].data = []; //make sure data is empty before  fill
        this.options['chart']['map'] = this.state.mapData; // set the map data of the graph (using the world graph)

        // filling up some dummy data with values 1 and 2
        for(let i in this.state.mapData['features']){
          let mapInfo = this.state.mapData['features'][i];
            if (mapInfo['id']) {
              var postalCode = mapInfo['id'];
              var name = mapInfo['properties']['name'];
              var value = i%2 + 1;
              var type = (value === 1)? "widget name one" : "widget name two";
              var row = i;
              this.options.series[0].data.push({
                value: value,
                name: name,
                'postal-code': postalCode,
                row: row
              });
            }
          }
          // updating the map options
          this.setState({mapOptions: this.options});
      });
    });
  }

  render() {
    return (
      <div>
            {(this.state.mapData)?
              <HighchartsReact
                highcharts={Highcharts}
                constructorType={'mapChart'}
                options={(this.state.mapOptions)? this.state.mapOptions: this.options}
              />
              : ''}
      </div>
    );
  }
}

export default MyMap;

从“React”导入React；
从“../../api/mapData”导入mapData；
从“Highcharts”导入Highcharts；
从“highcharts react official”导入highcharts react；
要求（“海图/模块/地图”）（海图）；
类MyMap扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
映射值：[]，
现代经典：错，
};
this.mapData=新的mapData（）；
//使用空数据准备映射的配置
此选项={
标题：{
文本：“小部件按位置单击”，
风格：{
颜色：'#fff'
},
},
图表：{
背景色：“透明”，
键入：“映射”，
map:null，
},
地图导航：{
启用：对，
启用按钮：false
},
学分：{
已启用：false
},
颜色轴：{
数据类：[
{
发信人:1,，
颜色：'#C40401'，
名称：'widget name one'
}, {
发信人:2,，
颜色：“#0200D0”，
名称：“小部件名称二”
}
]
},
工具提示：{
pointFormatter:函数（）{
返回此.name；
}
},
图例：{
对齐：“右”，
垂直排列：“顶部”，
x:-100，
y:70，
浮动：是的，
布局：“垂直”，
数值小数：0，
背景颜色：（//主题
Highcharts.defaultOptions&&
Highcharts.defaultOptions.legend&&
Highcharts.defaultOptions.legend.backgroundColor
)| |‘rgba（255，255，255，0.85）’
},
系列：[{
名称：'世界地图'，
数据标签：{
启用：对，
颜色：“#FFFFFF”，
格式：“{point.postal code}”，
风格：{
textTransform:'大写'
}
},
工具提示：{
ySuffix:“'
},
光标：“指针”，
joinBy:'邮政编码'，
数据：[]，
要点：{
活动：{
点击：功能（r）{
log（'单击-打开弹出窗口作为第二步'）；
控制台日志（r）；
}
}
}
}]
};
}
/*
*在安装组件之前，
*使用所需的地图数据和系列数据更新highchart地图选项
* */
组件将装入=（）=>{
this.mapData.getWorld（）。然后（（r）=>{
this.setState（{'mapData'：r.data}，（）=>{
this.options.series[0]。数据=[]；//填充前确保数据为空
this.options['chart']['map']=this.state.mapData；//设置图的地图数据（使用世界图）
//用值1和2填充一些虚拟数据
for（让我在这个.state.mapData['features']中输入）{
让mapInfo=this.state.mapData['features'][i]；
如果（mapInfo['id']）{
var postalCode=mapInfo['id']；
var name=mapInfo['properties']['name']；
var值=i%2+1；
变量类型=（值===1）？“小部件名称一”：“小部件名称二”；
var行=i；
此.options.series[0].data.push({
价值：价值，
姓名:姓名,，
“邮政编码”：邮政编码，
行：行
});
}
}
//更新地图选项
this.setState（{mappoptions:this.options}）；
});
});
}
render（）{
返回(
{（this.state.mapData）？
: ''}
);
}
}
导出默认MyMap；

如果要使用美国地图，需要将url更改为：

“https://code.highcharts.com/mapdata/countries/us/us-all.geo.json“

以及从

US.MA

到

MA

的邮政编码：

this.mapData.getWorld().then(r => {
  ...
    for (let i in this.state.mapData["features"]) {
      ...
        var postalCode = mapInfo.properties["postal-code"];

        ...
    }
    ...
});

现场演示：

要使用单词映射，您还需要更改与邮政编码和

joinBy

属性相关的部分：

series: [{
    joinBy: ['iso-a2', 'code'],
    ...
}]

---

现场演示：

---

API参考：

您想将此地图类型与从google电子表格或本地加载的数据一起使用吗？你能为你的实现准备一个演示吗？您可以将此数据用作模板：@WojciechChmiel提前谢谢，请检查：注意，我现在想在本地使用该数据，而不是从谷歌电子数据表中使用该数据。这就是我为他们生成一些虚拟数据的原因

this.mapData.getWorld().then(r => {
    ...
    for (let i in this.state.mapData["features"]) {
      let mapInfo = this.state.mapData["features"][i];
      if (mapInfo["id"]) {
        var code = mapInfo["id"];

        ...
        this.options.series[0].data.push({
          "code": code,
          ...
        });
      }
    }
    ...
});