高级反应图

Question

我正在尝试使用HighMaps和react，通过不同的文档和示例来显示标题、图例和导航按钮(+和-)。

问题是，如果我从调用API (调用数组中的API>Data )中选择数据，而不是将链接粘贴到API的浏览器中并将结果保存在文件中，然后导入项目中的文件并将其用作变量，则问题是无法显示地图。

那么，是否有任何方法可以直接通过调用API来显示映射，而不是将其保存到文件中，然后将其导入项目中？

import * as React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

useEffect(() => {
    const apiCall = async () => {
        let result = null;
        await axios.get(`linkToTheAPI`)
            .then(response => {
                if (response.status === 200) {
                    result = response.data;
                }
            })
            .catch(error => {
                if (!error.response) {
                    alert("Unable to connect to web service");
                }
                else if (error.response.status === 401) {
                    alert("Unauthorized User");
                }
                else if (error.response.status === 500) {
                    alert("Internal Server Error");
                }
            });
        return result;
    }
    const apiCallandSetData = async () => {
        let res = await apiCall();
        if (res)
        {
            setDataFromApi(res);
            console.log(dataFromApi);
            setMapOptions({chart: {map: res}});   
        }
    }
    apiCallandSetData();
    //eslint-disable-next-line
},[])

let mapOptions = {
    chart: {
        backgroundColor: null,
        map: dataFromApi
    },

    title: {
        text: ''
    },

    credits: {
        enabled: false
    },

    legend: {
        enabled: false
    },

    xAxis: {
        minRange: 0.1
    },

    yAxis: {
        minRange: 0.1
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    series: [{
        animation: false,
        allowPointSelector: true,
        cursor: 'pointer',
        keys: ['code_hasc', 'value'],
        joinBy: 'code_hasc',
        name: '',
        states: {
            hover: {
                color: '#AFE8FF',
                borderColor: '#2A93FC'
            },
            select: {
                color: '#AFE8FF',
            }
        },
        dataLabels: {
            enabled: true,
        }, 
        tooltip: {
            enabled: false,
        }
    }]
}

dataFromApi是存储调用结果的变量。

如果我把file放在dataFromApi而不是dataFromApi上，一切都很好

Answer 1

根据评论-使用官方的高级图表反应包装和定义配置为一个国家解决了这个问题。

API：https://github.com/highcharts/highcharts-react