无法为 HighCharts Maps javascript 传递数据

Question

我是reactJS 的新手。我正在使用HighCharts Maps Api 加载地图图表

这是我编写的示例代码，

import React from 'react';
import { withRouter } from 'react-router-dom'
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';
import mapDataIndia from '@highcharts/map-collection/countries/in/in-all.geo.json';
import mapDataAustralia from '@highcharts/map-collection/countries/au/au-all.geo.json';
import mapDataUSA from '@highcharts/map-collection/countries/us/us-all.geo.json';
import { Button } from 'antd';
require('highcharts/modules/map')(Highcharts);
class MapChartWidget extends React.Component {
    state={
        backWorldButtonDisable:true,
        options : {
            title: {
                text: ''
            },
            colorAxis: {
                min: 0,
                stops: [[0.4, '#ffff00'], [0.65, '#bfff00'], [1, '  #40ff00']]
            },
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: (e)=>{this.mapDataChange(e)}
                        }
                    }
                },
                mapline: {
                    showInLegend: false,
                    enableMouseTracking: false
                }
            },
            series: [
                {
                  mapData:mapDataWorld,
                  data: [['in',5],['au',10],['us',97]],
                  states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                  }
                }
            ],

        },
    }
    mapDataChange(value){
        if(value.point.name === "India"){
            this.setState({
                backWorldButtonDisable:false,
                options : {
                    title: {
                        text: ''
                    },
                    colorAxis: {
                        min: 0,
                        stops: [[0.4, '#ffff00'], [0.65, '#bfff00'], [1, '  #40ff00']]
                    },
                    series: [
                        {
                          mapData:mapDataIndia,
                          data: [['in',5],['au',10],['us',97]],
                          states: {
                            hover: {
                                color: '#BADA55'
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                          }
                        }
                    ],

                },
            })
        }

    }


    render() {   
        return (
            <React.Fragment>
            <Button onClick={this.onBacktoMapClick.bind(this)}  size="small">Back to World Map</Button>
            <HighchartsReact  callback={this.props.chartRefCallback} containerProps={{ style: { width: '100%', height: 'calc(100% - 50px)' } }} options={this.state.options} constructorType={'mapChart'} highcharts={Highcharts} />
            </React.Fragment>
        );
    }
}
export default withRouter(MapChartWidget);

输出图像： 世界地图被加载。

双击印度时，会加载印度地图。 （我不知道为什么它无法在单击中加载）

在India 地图上，我将像data: [ ['in-py', 3],['in-ld', 2]] 这样传递数据的值。但是当我在代码中传递这些值时，印度地图没有加载。

我得到的错误： 单击印度后，它会加载没有数据的世界地图 但是，当我在mapDataChange 函数的数据参数中传递这些值data: [['in',5],['au',10],['us',97]] 时，印度地图被加载为第一组输出图像。由于该值是针对国家地图的，因此无法在印度地图中显示。

在上面的代码中，Options 有 Map Chart 的参数。在 Initial 中，我使用数据加载世界地图。稍后当用户点击印度时，mapDataChange 将被调用，在此函数中，我正在为印度地图重置 reactJS 状态中的选项，其中包含要加载的值。在这个函数中，如果我像这样data: [ ['in-py', 3],['in-ld', 2]] 传递数据的值，刷新我的页面后，点击世界地图中的印度，印度地图没有加载，世界地图仍然存在。如果我通过这些值data: [['in',5],['au',10],['us',97]]，刷新我的页面后，点击世界地图中的印度，印度地图被加载。由于该值适用于国家地图，因此无法在印度地图中显示。我不知道如何解决这个问题。 请帮我解决这个问题。我希望这些值 data: [ ['in-py', 3],['in-ld', 2]] 显示在印度地图上

Answer 1

地图应该在图表配置中定义，而不是在系列对象中。否则，图表更新会受到干扰。

chart: {
   map: mapDataWorld
}

请查看演示：https://stackblitz.com/edit/drilldown-enepas?file=index.js