加载后自动放大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/

对于如何做到这一点，我还有其他一些想法，但我认为我想要的是最好的方法.

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.

其他想法:

1) 只加载最近 7 天，放置一个假的重置缩放"按钮，然后加载整个数据系列

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

2) 查看目前处于 Beta 版的姊妹产品 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屋！