Question

有没有办法增加highstock导航器组件中手柄的高度？现在，唯一可用的选项是更改颜色和边框颜色。手柄的高度和宽度怎么样？

http://api.highcharts.com/highstock#navigator.handles

谢谢，

维卡斯。

Answer 1

您可以包装drawHandles功能并修改它以增加高度。

var height = 20; 

(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,
            attr = {
                fill: handlesOptions.backgroundColor,
                stroke: handlesOptions.borderColor,
                    'stroke-width': 1
            },
            tempElem;

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

            // the rectangle
            tempElem = renderer.rect(-4.5, 0, 9, height, 0, 1)
                .attr(attr)
                .add(handles[index]);
            elementsToDestroy.push(tempElem);

            // the rifles
            tempElem = renderer.path([
                'M', -1.5, 4,
                'L', -1.5, 12,
                'M',
            0.5, 4,
                'L',
            0.5, 12]).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));

http://jsfiddle.net/za68w54r/

Answer 2

还可以选择增加导航器的高度..

检查这个小提琴：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/navigator/height/

代码：

    navigator: {
        height: 100
    },

Highcharts导航器手柄高度

2 个答案: