javascript 如何设置在 Highcharts/Highstock 中绘制图表时选择的默认范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24138167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set default range selected on chart draw in Highcharts/Highstock
提问by a_miguel6687
How can I set default range selected without using the:
如何在不使用以下内容的情况下设置选择的默认范围：
rangeSelector:{
selected: 3
}
The reason why I want to do that is that I am trying to develop a custom range selector of my own. Also can I also ask why I'm getting a broken chart once I press the YTD again. Here is a link to my Fiddleand my sample code:
我想要这样做的原因是我正在尝试开发我自己的自定义范围选择器。我也可以问一下，为什么我再次按下 YTD 时会得到一张损坏的图表。这是我的Fiddle和示例代码的链接：
$(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;*/
});
});
Any help or guide would be appreciated.
任何帮助或指导将不胜感激。
采纳答案by a_miguel6687
回答by Pawe? Fus
Simply use:
只需使用：
xAxis: {
min: timestampFrom,
max: timestampTo
}
About your second issue, if you are doing multiple updates, then you should be disabling animations for all execpt last one. See fixed demo: http://jsfiddle.net/Gpb56/3/
关于您的第二个问题，如果您正在进行多次更新，那么您应该禁用所有 execpt 最后一个的动画。见固定演示：http: //jsfiddle.net/Gpb56/3/
