如何限制 highstock.js 中导航器的大小？

Question

I have an application with long time series and I want to limit the maximum size of the navigator. I found the afterSetExtremes event in the documentation, which I thought I could capture and then limit the size of the navigator from there. But it doesn't really work as expected. I seem to be able to limit the x size of the plotted data. But the navigator doesn't follow the size of the plotted data at all. Am i missing something here? How can I get it to work properly? Ideally the navigator would just remain fixed in size over a specific size. Is that possible to achieve?

Here the jsfiddle:

http://jsfiddle.net/jn3cww8n/2/

$(function () {
$('#container').highcharts('StockChart', {
    xAxis: {
        events: {
            afterSetExtremes: function(e) {

                var dmin = Math.abs(e.min - this.oldMin),
                    dmax = Math.abs(e.max - this.oldMax),
                    range = e.max - e.min,
                    new_min = e.min,
                    new_max = e.max,
                    yr_range = range / 1000 / 60 / 60 / 24;
                if (0.0 === dmin && 0.0 < dmax) {
                    $('#report').html('Max changed ' + yr_range);

                    if (31536000000.0 < range) {
                        $('#report').html('setting new max');
                        new_max = new_min + 31536000000.0;
                    }

                } else if (0.0 < dmin && 0.0 === dmax) {
                    $('#report').html('Min changed ' + yr_range);

                    if (31536000000.0 < range) {
                        $('#report').html('setting new min');
                        new_min = new_max - 31536000000.0;
                    }

                } else {
                    $('#report').html('Nothing changed');
                }

                this.setExtremes(new_min, new_max);

            }
        }
    },
    rangeSelector: {
        selected: 1
    },
    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});
});

Answer 1

I changed tack on this one. Instead of having a max size of the navigator, I restricted users from changing its size altogether.

I got the idea from this post.

Just two changes required:

1. Blank the drawHandle function Highcharts.Scroller.prototype.drawHandle = function () {};

2. Commment out a few lines:

    22472,22476c22472,22476 < //if (isOnNavigator && math.abs(chartX - zoomedMin - navigatorLeft) < handleSensitivity) { < //scroller.grabbedLeft = true; < //scroller.otherHandlePos = zoomedMax; < //scroller.fixedExtreme = baseXAxis.max; < //chart.fixedRange = null; --- > if (isOnNavigator && math.abs(chartX - zoomedMin - navigatorLeft) < handleSensitivity) { > scroller.grabbedLeft = true; > scroller.otherHandlePos = zoomedMax; > scroller.fixedExtreme = baseXAxis.max; > chart.fixedRange = null; 22479,22483c22479,22483 < //} else if (isOnNavigator && math.abs(chartX - zoomedMax - navigatorLeft) < handleSensitivity) { < //scroller.grabbedRight = true; < //scroller.otherHandlePos = zoomedMin; < //scroller.fixedExtreme = baseXAxis.min; < //chart.fixedRange = null; --- > } else if (isOnNavigator && math.abs(chartX - zoomedMax - navigatorLeft) < handleSensitivity) { > scroller.grabbedRight = true; > scroller.otherHandlePos = zoomedMin; > scroller.fixedExtreme = baseXAxis.min; > chart.fixedRange = null; 22486,22487c22486 < //} else if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) { < if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) { --- > } else if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {

Pretty clean all in all.