Javascript 加载后自动放大highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7194249/
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
Automatically zooming in on highcharts after loading
提问by RoboKozo
Does anyone know how to automatically zoom into a portion of a chart after it finishes loading? I have a lot of timeseries data but the most important info is to the right. I'd still like all the data to be available but only the most recent 7 days in view zoomed in.
有谁知道如何在加载完成后自动放大图表的一部分？我有很多时间序列数据，但最重要的信息在右边。我仍然希望所有数据都可用，但只放大最近 7 天的视图。
What I would like to simulate is a user click-dragging for the 7 latest days on my chart. So if anyone knows how to manually trigger that event, it's probably what I'd like to do.
我想模拟的是用户在我的图表上点击并拖动最近 7 天。因此，如果有人知道如何手动触发该事件，这可能就是我想要做的。
Here is a sample chart from jsfiddle that has the normal zooming functionality: http://jsfiddle.net/Y5q8H/50/
这是来自 jsfiddle 的具有正常缩放功能的示例图表：http: //jsfiddle.net/Y5q8H/50/
I have a few other ideas of how this could be done, but I think what I want is the best way to go about it.
我对如何做到这一点还有其他一些想法，但我认为我想要的是最好的方法。
Other ideas:
其他想法：
1) Only load the last 7 days, put a fake 'Reset Zoom' button that then loads the whole data series afterwards
1) 只加载最后 7 天，放置一个假的“重置缩放”按钮，然后加载整个数据系列
2) Look into that sister product StockChartsthat's in Beta right now. It seems to have a bunch of preset range displays which would be cool to have too. I'm not sure how much of my existing code I'd have to change though.
2) 查看目前处于 Beta 版的姊妹产品StockCharts。它似乎有一堆预设范围显示，这也很酷。不过，我不确定我必须更改多少现有代码。
回答by Dennis
You can use the setExtremes function to change the zoom. http://jsfiddle.net/quVda/382/
您可以使用 setExtremes 函数来更改缩放比例。 http://jsfiddle.net/quVda/382/
For a timeseries chart with day-by-day information, you need to use the UTC representation of the date:
对于包含每日信息的时间序列图表，您需要使用日期的 UTC 表示：
var d = new Date();
chart.xAxis[0].setExtremes(
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7),
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
回答by Andy Webov
Updated official fiddle for solution, guys: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/
更新了解决方案的官方小提琴，伙计们：http: //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(
Date.UTC(2007, 0, 1),
Date.UTC(2007, 11, 31)
);
});
});
回答by zero8
There is another option if you try
如果您尝试，还有另一种选择
var max_in = 100; //the highest y value you have in your series data;
var min_in = 41 ;//the lowest y value you have in your series data;
yaxis=this.yAxis[0];
yaxis.options.max = max_in;
yaxis.options.min = min_in;
