如何制作高图可以在图表中拖动来选择手机中的多点

时间:2016-11-03 07:14:03

标签: angularjs jquery-mobile web 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 个答案:

没有答案