如何设置在Highcharts/Highstock中的图表绘制中选择的默认范围

Question

如何在不使用以下情况下设置默认范围:

rangeSelector:{
  selected: 3
}

我想这样做的原因是我正在尝试开发自己的自定义范围选择器.我也可以问一下,为什么一旦我再次按下YTD,我就会得到一张破碎的图表.这是我的小提琴和我的示例代码的链接:

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        $('.zoom_controls a').click(function (e) {
            e.preventDefault();
            // OK, pretty ugly :)
            var call = 'zoom' + $(this).attr('data-range');
            // I have two globally accessible charts here:
            if ($(this).attr('data-chart') == 'line') {
                lineChart[call]();
            } else {
                candleChart[call]();
            }
            $(this).addClass('active');

        });
        var proto = Highcharts.Chart.prototype;
        proto.zoomToD = function (delta) {
            var chartMin = this.xAxis[1].min;
            var chartMax = this.xAxis[0].max;
            var min = chartMax - delta;

            if (chartMin < min) {
                // this.xAxis[0] is the view, this.xAxis[1] is the navigator
                this.xAxis[0].setExtremes(min, chartMax);
                this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
                return true;
            }

            this.xAxis[0].setExtremes(chartMin, chartMax);
            this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
            return false;
        };

        proto.zoom3m = function () {
            return this.zoomToD(2592000 * 3 * 1000);
        };
        proto.zoom6m = function () {
            return this.zoomToD(2592000 * 6 * 1000);
        };
        proto.zoom1y = function () {
            return this.zoomToD(2592000 * 12 * 1000);
        };
        proto.zoom2y = function () {
            return this.zoomToD(2592000 * 24 * 1000);
        };
        proto.zoom3y = function () {
            return this.zoomToD(2592000 * 36 * 1000);
        };
        proto.zoom5y = function () {
            return this.zoomToD(2592000 * 60 * 1000);
        };
        proto.zoom10y = function () {
            return this.zoomToD(2592000 * 120 * 1000);
        };
        proto.zoomYtd = function () {
            var chartMin = this.xAxis[1].min;
            var chartMax = this.xAxis[1].max;
            var min = chartMax - 2592000 * 12 * 1000;

            if (chartMin < min) {
                this.xAxis[0].setExtremes(min, chartMax);
                return true;
            }

            this.xAxis[0].setExtremes(chartMin, chartMax);
            return false;
        }

        /*And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.:*/
        lineChart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                type: 'area'


            },

            series: [{
                id: "data",
                name: 'HP',
                data: data,
                color: '#7BA6A5',
                tooltip: {
                    valueDecimals: 2
                }
            }],

            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    year: '%Y',
                    month: '%m',
                    week: '%b %e'
                },
                gridLineWidth: 1

            },

            yAxis: {
                opposite: false,
                minorTickInterval: 'auto'
            },
            rangeSelector: {
                enabled: false

            },
            scrollbar: {
                enabled: true
            },
            navigator: {
                enabled: true
            }
        });
        lineChart.scroller.xAxis.labelGroup.hide();
        lineChart.scroller.xAxis.gridGroup.hide();
        lineChart.scroller.series.hide();
        lineChart.scroller.scrollbar.hide();
        lineChart.scroller.scrollbarGroup.hide();
        lineChart.scroller.navigatorGroup.hide();
        lineChart.scroller.scrollbarTrack.hide();
        $.each(lineChart.scroller.elementsToDestroy, function (i, elem) {
            elem.hide();
        });
        lineChart.rangeSelector.zoomText.hide();
        /*$.each(lineChart.rangeSelector.buttons, function () {
            this.hide();
        });*/
        /*lineChart.rangeSelector.inputEnabled = false;*/

    });
});

任何帮助或指南将不胜感激.

Answer 1

只需使用:

xAxis: {
    min: timestampFrom,
    max: timestampTo
}

关于你的第二个问题,如果你正在进行多次更新,那么你应该禁用最后一个execpt的动画.请参阅固定演示:http://jsfiddle.net/Gpb56/3/

Answer 2

我通过设置一个初始解决了这个问题setExtremes function。请看看我更新的Fiddle