Question

我需要帮助处理highstock导航器中的手柄。

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

请看第5至9行：

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

非常感谢！

Answer 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));

Answer 2

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

handle：Object

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

Highstock导航器处理选项不起作用

2 个答案: