How to make selecting multi points by drag in highcharts work in mobile phone?

问题

Details described

I make the highcharts can be dragged in the chart and make the selected multi points marked.
It work well in the PC browser.
It can only click in the chart when visit the chart in mobile phone(android).

Question:

How can I make it success in mobile phone that select multi points by dragging in the chart? Thanks.

Code in angularJS to select points by drag:

Highcharts.chart('container', {
    chart: {
        zoomType: 'x',
        events: {
            selection: function(event) {
                return selectPointsByDrag(event);
            },
            click: function(event) {
                return updateRelatedProjectsInfo([event.xAxis[0].value, event.xAxis[0].value], $scope.buildTimeInfo);
            }
        }
    },
    title: chartConfig.parameters.title,
    tooltip: chartConfig.parameters.tooltip,
    xAxis: chartConfig.parameters.xAxis,
    yAxis: chartConfig.parameters.yAxis,
    plotOptions: {
        area: {
            marker: chartConfig.parameters.areamarker,
            cursor: 'Pointer',
            events: {
                click: function(event) {
                    //buildtime = buildtime;
                    return updateRelatedProjectsInfo([event.point.x, event.point.x], $scope.buildTimeInfo);
                }
            },
            fillColor: {
                linearGradient: chartConfig.parameters.linearGradient,
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            marker: chartConfig.parameters.marker,
            lineWidth: chartConfig.parameters.lineWidth,
            states: chartConfig.parameters.states,
            threshold: null
        },
        line: {
            marker: {
                enabled: true
            },
            cursor: 'Pointer',
            events: {
                click: function(event) {
                    return updateRelatedProjectsInfo([event.point.x, event.point.x], $scope.buildTimeInfo);
                }
            },
            fillColor: {
                linearGradient: chartConfig.parameters.linearGradient,
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            marker: chartConfig.parameters.marker,
            lineWidth: chartConfig.parameters.lineWidth,
            states: chartConfig.parameters.states,
            threshold: null
        }
    },
    legend: chartConfig.parameters.legend,
    series: chartConfig.series(cpuUtilizations, availMemories)
});

and the function for selection event of highcharts is:

function selectPointsByDrag(event) {
    var highChart, k, l, len, len1, len2, m, point, ref, ref1, ref2, ref3, selectedPoints, selectedPointsEnd, selectedPointsStart, series, timeRange;

    if (!event.xAxis) {
        return;
    }

    highChart = event.target;
    ref = highChart.getSelectedPoints();

    for (k = 0, len = ref.length; k < len; k++) {
        point = ref[k];
        point.select(false);
    }

    ref1 = highChart.series;

    for (l = 0, len1 = ref1.length; l < len1; l++) {
        series = ref1[l];
        ref2 = series.points;

        for (m = 0, len2 = ref2.length; m < len2; m++) {
            point = ref2[m];

            if ((event.xAxis[0].min <= (ref3 = point.x) && ref3 <= event.xAxis[0].max)) {
                point.select(true, true);
            }
        }
    }

    selectedPoints = highChart.getSelectedPoints();

    if (!isEmpty.isEmp(selectedPoints)) {
        selectedPointsStart = selectedPoints[0];
        selectedPointsEnd = selectedPoints[selectedPoints.length - 1];
        timeRange = [selectedPointsStart.x, selectedPointsEnd.x];
        return updateRelatedProjectsInfo(timeRange, $scope.buildTimeInfo);
    }
}

Use this function to complish the selected multi points marked by drag in the chart.

来源：https://stackoverflow.com/questions/40397180/how-to-make-selecting-multi-points-by-drag-in-highcharts-work-in-mobile-phone

标签

javascript

android

jquery

angularjs

Highcharts