Highmaps IOS click events not firing

2019-08-17 23:36发布

I'm building an interactive map web-app using Highmaps and Highcharts. There's a work in progress version of it here: http://s3.eu-west-2.amazonaws.com/ds-active-travel/index.html

It works fine on Desktop browsers (IE, Firefox, Chrome, Safari) however the click events don't seem to be firing when I click the map on an IOS mobile device regardless of the browser (Safari, Firefox, Chrome).

Interestingly when I use the dropdowns to select a node, it works fine. I've tried replacing the anonymous functions embedded within the map to the dropdown functions but this doesn't see to work.

Does anyone have any ideas what's causing this?

Edit. Code for the map

function buildMap (container,mapData,mapApiData,mapColor,mapTitle) {

    var map = Highcharts.mapChart(container, {

        chart: {
            style : {
                fontFamily: 'Roboto, sans-serif',
            },
            pinchType: 'xy'
        },

        credits : {
            enabled: false
        },

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

        colorAxis: {
            tickPixelInterval: 100,
            // minColor: "#ffffff",
            maxColor: mapColor
        },

        title: {
            text: mapTitle,
            style: {
                fontSize: 16,
                weight: 'bold'
            }
        },

        tooltip : {
            enabled: true,
            headerFormat: '',
            backgroundColor: "rgba(0,0,0,0.6)",
            borderWidth: 0,
            borderRadius: 0,
            shadow: false,
            hideDelay: 1500,
            style : {
                color: 'white',
                fontSize: '16px',
                lineHeight: 20
            }
        },

        plotOptions: {
            series : {
                allowPointSelect: true
            }
        },

        series: [{
            data: mapApiData[0].record.data,
            mapData: mapData,
            joinBy: ['CODE',0],
            keys: ['CODE', 'value'],
            name: 'Random data',
            animation: true,
            events: {
                click: function (e) {
                    renderCharts.fromMap(e);    
                },
            },
            states: {
                select: {
                    color: '#00ff1a'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal}'
            },

            borderWidth: 0
        }]
    });

    return map;

}

0条回答
登录 后发表回答