Highstock 导航器手柄选项不起作用答案

【问题标题】：Highstock navigator handles options do not workHighstock 导航器手柄选项不起作用
【发布时间】：2015-10-12 17:38:18
【问题描述】：

我需要一些关于 highstock 导航器中手柄的帮助。

我的设置选项在我的示例中不起作用： http://jsfiddle.net/q1xpn6hL/

请看第 5 到 9 行：

borderColor: '#666',
width: 10,
height: 35,
borderRadius: 2,
borderWidth: 0.5

非常感谢！

【问题讨论】：

标签： highstock navigator handles

【解决方案1】：

不支持这些选项。您必须扩展 Highcharts 才能启用它们。可以覆盖处理创建句柄的函数。

示例：http://jsfiddle.net/v4vhy01j/

(function (H) {
    H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
        var scroller = this,
            chart = scroller.chart,
            renderer = chart.renderer,
            elementsToDestroy = scroller.elementsToDestroy,
            handles = scroller.handles,
            handlesOptions = scroller.navigatorOptions.handles,
            borderWidth = H.pick(handlesOptions.borderWidth, 1),
            borderRadius = H.pick(handlesOptions.borderRadius, 0),
            width = H.pick(handlesOptions.width, 9),
            height = H.pick(handlesOptions.height, 16),
            attr = {
                fill: handlesOptions.backgroundColor,
                stroke: handlesOptions.borderColor,
               'stroke-width': borderWidth
            },
            tempElem;

        // create the elements
        if (!scroller.rendered) {
            // the group
            handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
                .css({
                cursor: 'ew-resize'
            })
                .attr({
                zIndex: 4 - index
            }) // zIndex = 3 for right handle, 4 for left
            .add();

            // the rectangle
            tempElem = renderer.rect(-5, 9 - height/2, width, height, borderRadius)
                .attr(attr)
                .add(handles[index]);
            elementsToDestroy.push(tempElem);

            // the rifles
            tempElem = renderer.path([
                'M', -1.5, 13 - height/2,
                'L', -1.5, 5 + height/2,
                'M',
            0.5, 13 - height/2,
                'L',
            0.5, 5 + height/2]).attr(attr)
                .add(handles[index]);
            elementsToDestroy.push(tempElem);
        }

        // Place it
        handles[index][chart.isResizing ? 'animate' : 'attr']({
            translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10),
            translateY: scroller.top + scroller.height / 2 - 8
        });
    });
}(Highcharts));

【讨论】：

【解决方案2】：

Highstock 导航器不支持所有这些选项。 the documentation 是这样说的：

句柄：对象

用于拖动缩放区域的手柄选项。可用选项为backgroundColor（默认为#ebe7e8）和borderColor（默认为#b2b1b6）。

【讨论】：