有没有办法让 Highstock Scrollbar 响应触控板？答案

【问题标题】：Is there a way to get Highstock Scrollbar to respond to trackpad?有没有办法让 Highstock Scrollbar 响应触控板？
【发布时间】：2018-12-19 22:00:28
【问题描述】：

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

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

【问题讨论】：

标签： javascript highcharts scrollbar xrange

【解决方案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/

【讨论】：

是的，我最终发现了 jsfiddle，它非常有帮助 - 我确实做了一些调整，以便我会强制它保持在轴范围内并更顺畅地滚动 - 我被语法抛出以及它与我们文件中当前的内容有何不同（我们使用 dart 并且只有少数文件运行纯 js）

【解决方案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;
            });
        }
    });
}());

【讨论】：