有没有办法让 Highstock 滚动条响应触控板？

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', 函数(继续) { 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;
            });
        }
    });
}());

有没有办法让 Highstock 滚动条响应触控板？

Is there a way to get Highstock Scrollbar to respond to trackpad?

javascript

scrollbar

xrange

highcharts