如何通过在手机中的高级图表中拖动来选择多个点?

时间:2016-11-03 08:51:45

标签: javascript android jquery angularjs highcharts

描述的细节

  • 我可以在图表中拖动高图,并选中标记的多点。
  • 它在PC浏览器中运行良好。
  • 访问手机中的图表时,只能点击图表(android)。

问题:

如何通过拖动图表在手机中成功选择多点?感谢。

angularJS中的代码,通过拖动选择点:

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)
});

和highcharts的选择事件的功能是:

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);
    }
}

使用此功能可以完成图表中拖动标记的选定多点。

0 个答案:

没有答案