jquery - Highstock - 最小缩放

Question

如何在 Highstock 中为 Navigator 设置最小缩放（36 个月）？我试过这个，但它不起作用你有什么想法吗？

http://jsfiddle.net/B7vCR/6/

$(function() {

    var chart;
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container'
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },
            xAxis: {
                minRange:6 * 30 * 24 * 3600 * 1000,
                events: {
                    afterSetExtremes: function(e) {
                        var maxDistance = 10 * 30 * 24 * 3600 * 1000; //8 months time
                        var xaxis = this;
                        if ((e.max - e.min) < maxDistance) {
                            var min = e.max - maxDistance;
                            var max = e.max;
                            window.setTimeout(function() {
                                xaxis.setExtremes(min, max);
                            }, 1);
                        }
                    }
                }
            },
            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }}]
        });
    });

});

Answer 1

如果需要范围选择器，则需要配置按钮

xAxis: {
    events: {
        afterSetExtremes: function(e) {
            var minDistance = 36 * 30 * 24 * 3600 * 1000; //36 months time
            var xaxis = this;
            if ((e.max - e.min) < minDistance) {
                var min = e.max - minDistance;
                var max = e.max;
                window.setTimeout(function() {
                    xaxis.setExtremes(min, max);
                }, 1);
            }
        }
    }
}
rangeSelector: {
    selected : 1,
    buttons: [{
        type: 'month',
        count: 36,
        text: '36m'
    }, {
        type: 'month',
        count: 42,
        text: '42m'
    }, {
        type: 'month',
        count: 48,
        text: '48m'
    }, {
        type: 'month',
        count: 54,
        text: '54m'
    }, {
        type: 'all',
        text: 'All'
    }]
}

工作jsFiddle：http: //jsfiddle.net/Zd5Cn/

Answer 2

从 1.3.6 开始，minRange 属性不再适用于导航器。（在 1.3.5 中有效）。我建议您禁用实时重绘以避免导航器的“跳跃”。

    scrollbar: {
        enabled: true,
        liveRedraw: false
    },

如果您不想禁用它，则必须调用 xAxis.setExtremes 两次（将其添加到 window.setTimeout 之前的行）

        xAxis: {
            type: 'datetime',
            minRange: 36 * 30 * 24 * 3600 * 1000,
            events: {
                afterSetExtremes: function (e) {
                    var extremes, xAxis;

                    if (e.trigger === 'navigator') {
                        extremes = getDateExtremes(e.min, e.max, e.dataMax);
                        xAxis = this;
                        window.setTimeout(function () {
                            xAxis.setExtremes(extremes.min, extrems.max);                               
                        }, 1);
                    }
                }
            },

这是我们使用的辅助方法。

function padNumber(n) {
    return n <= 9 ? '0' + n : n;
}


function getDateExtremes(begin, end, max) {
    var minDistance = 36 * 30 * 24 * 3600 * 1000,
        curMin, curMax, curMinDate, curMaxDate;

    if ((end - begin) < minDistance) {
        if ((begin + minDistance) <= max) {
            curMin = begin;
            curMax = begin + minDistance;
        } else {
            curMin = end - minDistance;
            curMax = end;
        }
    } else {
        curMin = begin;
        curMax = end;
    }

    curMinDate = new Date(curMin);
    curMaxDate = new Date(curMax);

    return {
        min: curMin,
        max: curMax,
        minDateId: curMinDate.getFullYear() + '-' + padNumber(curMinDate.getMonth() + 1) + '-' + padNumber(curMinDate.getDate()),
        maxDateId: curMaxDate.getFullYear() + '-' + padNumber(curMaxDate.getMonth() + 1) + '-' + padNumber(curMaxDate.getDate())
    };
}

希望它可以帮助你。