Dictionary 地图显示一次，但为»；重叠和#xAB；在Highmaps中快速使用空贴图

我有一个数据门户，用户可以通过图形或地图来可视化数据。奇怪的是，当我单击地图符号时，新页面正在加载地图而不是现在的图形，正确颜色的地图会在很短的时间内出现，但随后会被空地图覆盖或覆盖

这说明了问题所在。和

当我重新加载页面时，它有时会工作

以下是地图的代码：

        $(function () {         

            $.getJSON('map.csv', function (data)
            {
        
                // Initiate the chart
                $('#container').highcharts('Map', {
        
                    title: 
                    {
                        text: "Medium size cities (More than 300 000 people in 2014), % total", 
                        style: 
                        {
                            fontFamily: 'Arial',
                            fontSize: '20px',
                            /* fontWeight: 'bold', */
                            lineHeight: '22px',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    },
                    subtitle:
                    {
                        text: "2035", 
                        style: 
                        {
                            fontFamily: 'Arial',
                            fontSize: '14px',
                            /* fontWeight: 'bold', */
                            lineHeight: '22px',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    },
                    legend: 
                    {
                        title: 
                        {
                            text: "% of population",
                            style: 
                            {
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                            }
                        },
                        y: -20
                    },
                    mapNavigation: 
                    {
                        enabled: true,
                        buttonOptions: 
                        {
                            verticalAlign: 'middle'
                        }
                    },
                    tooltip: 
                    {
                        backgroundColor: 'none',
                        borderWidth: 0,
                        shadow: false,
                        useHTML: true,
                        padding: 0,
                        formatter: function () 
                        {
                            return '<b>' + this.point.name + '</b><br>' 
                             + this.point.value + '<br>' 
                             + this.series.name ;
                        }
                    },
                    credits: 
                    {
                        position:
                        {
                            align: 'left',
                            x: 10,
                            y: -5
                        },
                        style:
                        {
                            fontSize: '11px',
                            lineHeight: '12px'
                        },
                        mapText: '',
                        text: 'Source: World Urbanization Prospects; UN Environment Live',
                        href: 'http://esa.un.org/unpd/wup/'
                    },
                    colorAxis: 
                    {
                                                                                max: 100                        },
                    plotOptions: {
                        series: {
                            point: {
                                events: {
                                    click: function (e) {
                                        location.href = 'graphexe_gegslive.php?selectedID=ulv_8&selectedCountries%5B%5D=' + this.id + '&selectedLanguage=en&selectedDatasettype=&selectedYears=all&type=gegslive&selectedYear=2016&selectedModule=graph';
                                    }
                                }
                            }
                        }
                    },
                    series : [
                    {
                        data : data,
                        mapData: Highcharts.maps['custom/world'],
                        joinBy: ['iso-a2', 'iso2'],
                        name: "% of population",
                        states: 
                        {
                            hover: 
                            {
                                color: '#BADA55'
                            }
                        }
                    }]
                });
            });
        });         
    </script>       

$（函数（）{
$.getJSON（'map.csv'，函数（数据）
{
//启动图表
$（“#容器”）.highcharts（'Map'{
标题：
{
文字：“中等城市（2014年超过30万人），%总数”，
风格：
{
fontFamily：“Arial”，
fontSize:'20px'，
/*fontWeight:'粗体'*/
线宽：“22px”，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“黑色”
}
},
字幕：
{
文本：“2035”，
风格：
{
fontFamily：“Arial”，
fontSize:'14px'，
/*fontWeight:'粗体'*/
线宽：“22px”，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“黑色”
}
},
图例：
{
标题：
{
正文：“%的人口”，
风格：
{
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“黑色”
}
},
y:-20
},
地图导航：
{
启用：对，
按钮选项：
{
垂直排列：“中间”
}
},
工具提示：
{
背景颜色：“无”，
边框宽度：0，
影子：错，
是的，
填充：0，
格式化程序：函数（）
{
返回''+this.point.name+'
'
+this.point.value+'
'
+this.series.name；
}
},
信用：
{
职位：
{
对齐：“左”，
x:10，
y:-5
},
风格：
{
fontSize:'11px'，
线宽：“12px”
},
mapText:“”，
文本：'来源：世界城市化前景；联合国环境生活'，
href:'http://esa.un.org/unpd/wup/'
},
颜色轴：
{
最大值：100}，
打印选项：{
系列：{
要点：{
活动：{
点击：功能（e）{
location.href='graphexe_gegslive.php？selectedID=ulv_8&selectedCountries%5B%5D='+this.id+'&selectedLanguage=en&selectedDatasettype=&selectedYears=all&type=gegslive&selectedYear=2016&selectedModule=graph'；
}
}
}
}
},
系列：[
{
数据：数据，
mapData:Highcharts.maps['custom/world']，
joinBy:['iso-a2'，'iso2']，
姓名：“%的人口”，
国家：
{
悬停：
{
颜色：“#BADA55”
}
}
}]
});
});
});         

---

是什么导致了这个问题？谢谢您的提示。

您正在加载两次图表，这两次都是异步加载的

顺序不稳定，但有一次加载空数据（jQuery的

getJSON

将数据作为空数组），第二次加载的数据正确

---

你应该检查为什么有两个地方创建了图表，为什么一次数据是错误的。

Hi@luftikus143，你能在一些在线代码编辑器中重现这个问题吗？@ppotaczek:不，不幸的是，我在jsfiddle中没有成功创建相同的错误。你能分享你的图表配置选项吗？@ppotaczek:Done。见上文。谢谢请参阅@Kacper Madej的答案。他在你的网站上指出了主要问题。哇，非常感谢，非常抱歉。奇怪的是，我从没想过要朝这个方向检查！谢谢！！