设置导航器最小缩放

Question

我正在尝试设置图表的最小缩放（最大范围）。基本上我正在尝试做与 minRange 属性相反的事情。我在这个问题上苦苦挣扎了一段时间。我有一个“solution”，但我不喜欢它，这个解决方案允许用户选择一个大于 "max range" 的范围，并立即更正它。

POSSIBLE SOLUTION

$(function() {

    var lastMin;
    var lastMax;
    var maxRange = 12 * 30 * 24 * 3600 * 1000; //12 month

    $('#container').highcharts('StockChart', {
        scrollbar: {
            liveRedraw: false
        },

        xAxis: {
            events: {
                afterSetExtremes: function(e) {
                    var max = this.max,
                        min = this.min;

                    if (lastMin && lastMax) {
                        if(max-min > maxRange) {
                            if (min < lastMin) {
                                min = max - maxRange;
                            } else {
                                max = min + maxRange;
                            }
                        }
                    }

                    var x = this;
                    setTimeout(function(){ 
                        x.setExtremes(min,max); //chart xAxis
                    }, 1);

                    lastMin = min;
                    lastMax = max;
                }
            }
        },
        rangeSelector: {
            selected: 1
        },
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
});

我想阻止用户选择大于允许的范围，换句话说，当导航器太大时阻止它

我也在关注这个 issue，我尝试了所有建议的解决方案，但我遇到了错误 ("Uncaught ReferenceError: Highcharts is not defined")

Answer 1

谢谢塞巴斯蒂安！

我设法找到了包装 "render" 函数的解决方案 (fiddle)。这样做我设法在导航栏上真正设置了一个 "min zoom"。

    $(function() {

    var lastX0;
    var lastX1;
    var maxRange = 100; //100 pixels

    (function (H) {       
        H.wrap(H.Scroller.prototype, 'render', function (proceed) {    
            console.log(arguments)
            if(arguments[4] - arguments[3] > maxRange + 2) {
                if (arguments[3] < lastX0) {
                    arguments[3] = lastX0;
                } else {
                    arguments[4] = lastX1;
                }
            }
            proceed.apply(this, [].slice.call(arguments, 1));

            lastX0 = arguments[3];
            lastX1 = arguments[4];
        });
    }(Highcharts));  

    $('#container').highcharts('StockChart', {
        scrollbar: {
            liveRedraw: true
        },
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });


    var highchart = $('#container').highcharts();
    var extremes = highchart.xAxis[0].getExtremes();
    var rangeTotal = extremes.max - extremes.min;

    var f = maxRange / $('#container').width();
    highchart.xAxis[0].setExtremes(extremes.max - (f * rangeTotal), extremes.max);
});

在示例代码中，我使用了固定数量的像素，但在我的实际应用程序中，我将其设为动态。我这样做是因为我无法在我正在使用的软件中使用数据分组属性，并且由于图表中条形图的最小尺寸为 1 像素（显然），高图隐藏了一些条形图（或点）。

我正在设置最小缩放比例，因此显示范围内的所有栏都可见，因为用户无法在 x 轴上显示更高的范围 "hidden" 栏 "problem"（是一个很棒的功能，但我无法使用它）不会发生

设置导航器最小缩放

Set navigator min zoom

highcharts

highstock