Highcharts滚动条上箭头会在点击时引发错误

时间:2019-03-14 18:24:27

标签: svg highcharts scrollbar

当在带有yAxis滚动条的highcharts xrange图上单击向上箭头时(xAxis上也有一个滚动条,但是当我使用箭头按钮时它不会引发错误) 返回的错误是

Uncaught TypeError: Cannot read property 'call' of undefined
at SVGGElement.<anonymous> (highcharts.src.js:5182)

到目前为止,我尚未在互联网上找到有关此错误的任何具体信息,但是如果我这样做,我将更新此票证

这可能与具有X和Y滚动条有关吗? 我根本不打算使用按钮,因为我们已经为触控板/滚轮实现了侦听器-有没有一种方法可以完全删除箭头按钮(而不是使其透明化,而我目前已经实现了该按钮,其中包括难看的鼠标悬停无法摆脱)

如果您可以帮助我A)完全删除/隐藏按钮B)听一下单击并扔掉事件以避免此错误,或者C)修复此错误的根本原因是……我非常希望感激

{
    'chart': {
      'renderTo': graphId,
      'type': 'xrange',
      'zoomType': 'xy',
      'panning': true,
      'panKey': 'shift',
      'marginRight': 40,
      'marginLeft': 150,
      'resetZoomButton': {
        'position': {
          'x': -150,
          'y': -10
        }
      }
    },
    'exporting': {
      'enabled': true,
      'buttons': {
        'enabled': true,
        'contextButton': {
          'enabled': false
        },
        'resetScopeButton': {
          'y': -10,
          'x': -25,
          'symbolX': 20,
          'symbolY': 20,
          'enabled': true,
          'onclick': context['LiAnalytics']['resetScopeButton'],
          'symbol': 'url(../images/refresh.png)'
        },
        'hourButton': {
          'enabled': true,
          'text': 'H',
          'y': -10,
          'x': -50,
          'onclick': context['LiAnalytics']['hourButton']
        },
        'dayButton': {
          'text': 'D',
          'y': -10,
          'x': -75,
          'enabled': endTS - startTS > 86400000,
          'onclick': context['LiAnalytics']['dayButton']
        },
        'weekButton': {
          'text': 'W',
          'y': -10,
          'x': -100,
          'enabled': endTS - startTS >= 604800000,
          'onclick': context['LiAnalytics']['weekButton']
        },
        'monthButton': {
          'text': 'M',
          'y': -10,
          'x': -125,
          'enabled': endTS - startTS >= 2419000000,
          'onclick': context['LiAnalytics']['monthButton']
        }
      }
    },
    'legend': {
      'enabled': false
    },
    'xAxis': {
      'type': 'datetime',
      'dateTimeLabelFormats': {
        ...
      },
      'events': {
        'setExtremes': new js.JsFunction.withThis(_handleRedraw)
      },
      'min': (endTS - startTS) > initialZoom ? endTS - initialZoom : startTS,
      'max': endTS,
      'scrollbar': {
        'enabled': true,
        'showFull': false,
        'barBackgroundColor': '#ccc',
        'barBorderRadius': 7,
        'barBorderWidth': 0,
        'buttonBorderWidth': 0,
        'buttonArrowColor': 'transparent',
        'buttonBackgroundColor': 'transparent',
        'rifleColor': 'transparent',
        'trackBackgroundColor': '#F3F3F3',
        'trackBorderColor': 'transparent',
        'height': 10,
        'minWidth': 25
      }
    },
    'yAxis': {
      'categories': agents,
      'min': 0,
      'max': agents.length < maxY ? agents.length - 1 : maxY,
      'scrollbar': { /* Why you throw err on click ? */
        'enabled': true,
        'showFull': false,
        'barBackgroundColor': '#ccc',
        'barBorderRadius': 7,
        'barBorderWidth': 0,
        'buttonBorderWidth': 0,
        'buttonArrowColor': 'transparent', /* Remove entirely ? */
        'buttonBackgroundColor': 'transparent',
        'rifleColor': 'transparent',
        'trackBackgroundColor': '#F3F3F3',
        'trackBorderColor': 'transparent',
        'height': 10,
        'minWidth': 25
      },
      'reversed': true,
      'tickmarkPlacement': 'on',
      'gridLineColor': 'transparent'
    },
    'plotOptions': {
      'series': {
        'animation': {
          'duration': 2000
        },
        'point': {
          'events': { /* can i do something similar for scrollbar? */
            'mouseOver': new js.JsFunction.withThis(_mouseOver),
            'mouseOut': new js.JsFunction.withThis(_mouseOut)
          }
        },
        'pointWidth': 20,
        'pointPlacement': 0,
        'minPointLength': 10,
        'borderRadius': 0
      }
    },
    'series': series,
    'tooltip': {
      ...
    }
  }

(C)当前代码块

(function() {
    //internal functions
    function stopEvent(e) {
        if (e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            e.cancelBubble = true;
        }
    }
    /* Wrap allows us to override the behavior of render while not interrupting the normal rendering procedure */
    Highcharts.wrap(Highcharts.Chart.prototype, 'render', function(proceed) {
        var chart = this;

        proceed.call(chart);
        /* When a chart has a scrollbar and is xrange our PM/UX has requested the touchpad be abled to control the scrollbar */
        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();
                    if (extr.dataMax !== extr.dataMin) {
                        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 */
                        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);
                return false;
            });
        }
    });

    Highcharts.Scrollbar.prototype.addEvents = function() {
        var chart = this;

        var buttonsOrder = chart.options.inverted ? [1, 0] : [0, 1],
            buttons = chart.scrollbarButtons,
            bar = chart.scrollbarGroup.element,
            track = chart.track.element,
            mouseDownHandler = chart.mouseDownHandler,
            mouseMoveHandler = chart.mouseMoveHandler,
            mouseUpHandler = chart.mouseUpHandler,
            _events;

        // Mouse events
        _events = [
            /*    [buttons[buttonsOrder[0]].element, 'click', this.buttonToMinClick],
                  [buttons[buttonsOrder[1]].element, 'click', this.buttonToMaxClick], */
            [track, 'click', this.trackClick],
            [bar, 'mousedown', mouseDownHandler],
            [bar.ownerDocument, 'mousemove', mouseMoveHandler],
            [bar.ownerDocument, 'mouseup', mouseUpHandler]
        ];

        // Touch events
        if (Highcharts.hasTouch) {
            _events.push(
                [bar, 'touchstart', mouseDownHandler], [bar.ownerDocument, 'touchmove', mouseMoveHandler], [bar.ownerDocument, 'touchend', mouseUpHandler]
            );
        }

        // Add them all
        _events.forEach(function(args) {
            Highcharts.addEvent.apply(null, args);
        });
        chart._events = _events;
    };
}());

编辑:删除了旧的详细信息

1 个答案:

答案 0 :(得分:0)

这是由于尝试在包含其他自定义按钮时单独禁用上下文按钮而引起的。上下文按钮作为一个幻像按钮而徘徊,该幻像按钮被覆盖在滚动条的向上箭头上方,从而导致调试期间的错误诊断。

我最终想到的解决方案是通过重写symbol / symbolX symoblY(将符号居中在按钮区域中)/ onclick行为来重新使用上下文按钮

将onclick路由到我正在尝试的resetScope行为 用UX保存/确定的png覆盖汉堡符号