如何在reactJS中使用此高清图

Question

For the past couple days, I was struggling to use this highchart map type in my react project https://jsfiddle.net/26tbkjov//

Can some one please help me out? Please check what I achieved until now: https://codesandbox.io/s/highcharts-react-demo-0m5ux

I am using those highcharts npm packages

"highcharts": "^7.1.2", "highcharts-react-official": "^2.2.2",

I have tried many things and ended up in a dead path.. the following is the last thing i have tried:

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;

Answer 1

If you want to use the USA map, you need to change the url to: "https://code.highcharts.com/mapdata/countries/us/us-all.geo.json" and the postal-code from US.MA to MA :

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

        ...
    }
    ...
});

Live demo: https://codesandbox.io/s/highcharts-react-demo-jmu5h

To use the word map, you need to also change the part related with the postal-code and joinBy property:

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

---

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,
          ...
        });
      }
    }
    ...
});

Live demo: https://codesandbox.io/s/highcharts-react-demo-sxfr2

API Reference: https://api.highcharts.com/highmaps/series.map.joinBy