Highcharts滑动平滑移动功能

Question

我使用highcharts绘制了图表。我在x轴上有12个代码。但默认（onload）我只使用highcharts选项 min，max 显示前6个。我有下一个按钮，使用 setExtremes（6,11）显示图表的重置。我工作得很好。但是现在我在触摸滑动（移动和网络）上寻找相同的功能。我在插件上找不到任何附加事件来做那些事情。有没有人尝试过相同的！有人可以告诉一些可能的方法来做到这一点。这是jsfiddle来玩！

$(function () {

    var xCategories = ["06:30AM", "08:30AM", "10:30AM", "12:30PM", "02:30PM", "04:30PM", "06:30PM", "08:30PM", "10:30PM", "12:30AM", "02:30AM", "04:30AM"];
    var alerts_temp_graph = $('#alerts_temp_graph').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            //zoomType: 'x',
            backgroundColor: 'transparent',
            type: 'spline',
        },
        title: {
            text: '',
            x: 0 //center
        },
        xAxis: [{
            gridLineWidth: 0.5,
            startOnTick: false,
            endOnTick: false,
            minPadding: 0,
            maxPadding: 0,
            tickInterval: 1,
            labels: {
                //rotation:-90,
                formatter: function () {
                    return xCategories[this.value];
                }
            },
            min: 0,
            max: 6,
            plotBands: [{
                "color": "",
                    "to": 0,
                    "from": 0.5
            }, {
                "color": "#fcf8e8",
                    "to": 0.5,
                    "from": 1
            }, {
                "color": "#fcf8e8",
                    "to": 1,
                    "from": 1.5
            }, {
                "color": "#fcf8e8",
                    "to": 1.5,
                    "from": 2
            }, {
                "color": "",
                    "to": 2,
                    "from": 2.5
            }, {
                "color": "",
                    "to": 2.5,
                    "from": 3
            }, {
                "color": "",
                    "to": 3,
                    "from": 3.5
            }, {
                "color": "",
                    "to": 3.5,
                    "from": 4
            }, {
                "color": "",
                    "to": 4,
                    "from": 4.5
            }, {
                "color": "",
                    "to": 4.5,
                    "from": 5
            }, {
                "color": "",
                    "to": 5,
                    "from": 5.5
            }],
        }],
        yAxis: [{
            title: {
                text: ''
            },
            gridLineWidth: 0,
            labels: {
                enabled: false
            }

        }],

        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                }

            }
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: false,

        series: [{
            lineWidth: 8,
            color: '#24d3c4',
            data: [60.93, 57.75, 56.58, 55.62, 54.79, 53.83, 60.93, 57.75, 56.58, 55.62, 54.79, 53.83],


        }]
    });



    $(document).on('click', '#next', function () {

        var alerts_temp_graph = $('#alerts_temp_graph').highcharts();
        alerts_temp_graph.xAxis[0].setExtremes(6, 11);


    });

});

Answer 1

不确定，但您可能需要touchmove事件：

$(document).on('touchmove', function () {
    var alerts_temp_graph = $('#alerts_temp_graph').highcharts();
    alerts_temp_graph.xAxis[0].setExtremes(6, 11);
});

Fiddle

使用切换设备模式[1] 在chrome ^{版本：39.0.2171.95（官方版本）m} 上进行测试。
_{[1] - chrome检查器工具栏中的小型移动图标。}