Есть ли способ заставить Highstock Scrollbar отвечать на трекпад? - PullRequest
Новая
       50

Есть ли способ заставить Highstock Scrollbar отвечать на трекпад?

0 голосов
/ 20 декабря 2018

Панель прокрутки Highstock реагирует только тогда, когда вы физически щелкаете и перетаскиваете панель или используете клавиши со стрелками.Однако в идеале я мог бы использовать трекпад при наведении курсора на полосу прокрутки или сам график.Я искал Highstock / Highcharts API и не нашел ничего, что указывало бы на решение, поэтому я решил запросить улей в Интернете

Изучил события и атрибуты followTouch безрезультатно

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

ОТВЕТ НА САМОСТОЯТЕЛЬНОСТЬ: см. Дополнительную логику, чтобы добавить слушателя только в подмножество диаграмм, для которых мы специально хотим использовать поведение трекпадаКроме того, я добавил некоторую логику, чтобы заставить шаги быть целыми числами, а не входить в отрицательную или супер положительную территорию.Работает потрясающе!Highcharts.wrap (Highcharts.Chart.prototype, 'render', function (continue) {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;
            });
        }
    });
}());
0 голосов
/ 20 декабря 2018

Прокрутка колесиком мыши или трекпадом по умолчанию не реализована в 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/

...