javascript - 有没有办法让 Highstock Scrollbar 响应触控板？

Question

Highstock 滚动条仅在您实际单击并拖动滚动条或使用箭头键时才会响应。但是理想情况下，我可以在将鼠标悬停在滚动条或图形本身上时使用触控板。我搜索了 Highstock/Highcharts API 并没有找到任何指向解决方案的东西，所以我想我会查询互联网蜂巢思维

调查事件和followTouch属性无济于事

Answer 1

在 Highcharts 中默认没有实现鼠标滚轮或触控板滚动，但是你可以添加它：

(function(H) {

    //internal functions
    function stopEvent(e) {
        if (e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            e.cancelBubble = true;
        }
    }

    //the wrap
    H.wrap(H.Chart.prototype, 'render', function(proceed) {
        var chart = this,
            mapNavigation = chart.options.mapNavigation;

        proceed.call(chart);

        // Add the mousewheel event
        H.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function(event) {

            var delta, extr, step, newMin, newMax, axis = chart.xAxis[0];

            e = chart.pointer.normalize(event);
            // Firefox uses e.detail, WebKit and IE uses wheelDelta
            delta = e.detail || (e.wheelDelta / 120);
            delta = delta < 0 ? 1 : -1;

            if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
                extr = axis.getExtremes();
                step = (extr.max - extr.min) / 5 * delta;
                axis.setExtremes(extr.min + step, extr.max + step, true, false);
            }

            stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
            return false;
        });
    });
}(Highcharts));

Highcharts.chart('container', ...);

现场演示：http: //jsfiddle.net/BlackLabel/wjovscb9/

Answer 2

自我回答：请参阅附加逻辑以仅将侦听器添加到我们特别希望触控板行为的图表子集。此外，我添加了一些逻辑来强制步骤为整数，而不是进入负数或超正数领域。工作真棒！Highcharts.wrap(Highcharts.Chart.prototype, 'render', function(proceed) { var chart = this;

        proceed.call(chart);

        if (chart.options['chart']['type'] === "xrange" && chart.options['yAxis'][0]['scrollbar']['enabled']) {
            // Add the mousewheel event
            Highcharts.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function (event) {

                var delta, diff, extr, newMax, newMin, step, axis = chart.yAxis[0];

                e = chart.pointer.normalize(event);
                // Firefox uses e.detail, WebKit and IE uses wheelDelta
                delta = e.detail || -(e.wheelDelta / 120);
                delta = delta < 0 ? 1 : -1;
                /* Up or Down */

                if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
                    extr = axis.getExtremes();
                    diff = extr.max - extr.min;
                    step = diff / 5; /* move by fifths */
                    step = step > 1 ? Math.ceil(step) : 1; /* Min step is 1, Move by whole numbers */
                    step = step * delta; /* Up/Down */
                    // todo some logic for refuse to move ?
                    if (step > 0) {
                        /* UP */
                        if (extr.max + step > extr.dataMax) {
                            newMax = extr.dataMax;
                            newMin = extr.dataMax - diff; /* Enforce window not getting too small */
                        } else {
                            newMin = extr.min + step;
                            newMax = extr.max + step;
                        }
                    } else {
                        /* DOWN */
                        if (extr.min + step < 0) {
                            newMin = 0;
                            newMax = diff;
                        } else {
                            newMin = extr.min + step;
                            newMax = extr.max + step;
                        }
                    }
                    axis.setExtremes(newMin, newMax, true, false);
                }

                stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
                return false;
            });
        }
    });
}());