Карта появляется один раз, но быстро "накладывается" на пустую карту в Highmaps

Question

У меня есть портал данных, на котором пользователь может визуализировать данные в виде графика или карты. Странно то, что когда я нажимаю на символ карты, и теперь новая страница загружается с картой, а не с графиком, правильно окрашенная карта появляется на очень короткое время, но затем заменяется или перекрывается пустой картой.

Вот короткое видео , демонстрирующее проблему. И вот сайт .

Когда перезагружаю страницу, иногда срабатывает

Вот код карты:

        $(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>       

Что вызывает эту проблему? Спасибо за любые подсказки.

Answer 1

Вы загружаете диаграмму дважды, и оба раза это выполняется асинхронно.

Порядок нестабилен, но один раз вы загружаете пустые данные (jQuery s getJSON имеет данные как пустые array), а вторая загрузка - с правильными данными.

Вы должны проверить, почему есть два места, где создается диаграмма, и почему один раз данные неверны.