在载入后自动放大Highcharts [英] Automatically zooming in on highcharts after loading

问题描述

有人知道如何在完成载入后自动放大图表的一部分？我有很多时间序列数据，但最重要的信息是在右边。我仍然希望所有的数据可用，但只有最近7天的视图放大。

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.

这里是一个来自jsfiddle的具有正常缩放功能的示例图表： http://jsfiddle.net/Y5q8H/50/

Here is a sample chart from jsfiddle that has the normal zooming functionality: http://jsfiddle.net/Y5q8H/50/

其他想法：

1）只加载过去7天，放一个假的重置缩放按钮，然后加载整个数据系列

1) Only load the last 7 days, put a fake 'Reset Zoom' button that then loads the whole data series afterwards

2）立即查看该测试版的姐妹产品 StockCharts 。它似乎有一堆预设范围显示，这将是很酷也有。我不知道我现有的代码有多少，我不得不改变。

2) Look into that sister product StockCharts that'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.

推荐答案

可以使用setExtremes函数以更改缩放。 http://jsfiddle.net/quVda/382/

You can use the setExtremes function to change the zoom. http://jsfiddle.net/quVda/382/

对于具有逐日信息的时间序列图表，您需要使用日期的UTC表示形式：

For a timeseries chart with day-by-day information, you need to use the UTC representation of the date:

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()));

这篇关于在载入后自动放大Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！