Highstock：如何结合延迟加载和动态数据？ [英] Highstock: How to combine lazy loading AND dynamic data?

问题描述

我正在尝试将延迟加载与 Highstock中动态更新的数据。这个想法是有一个大型的历史最新图表（有数百万个数据点），同时实时更新（如果用户滚动到右边缘）。

为了避免在加载数据时出现循环加载，我需要设置：

  navigator：{ 
 adaptToUpdatedData：false 
} 
  

但是，使用此设置，指向图表的数据不会再更新导航器，这使我无法看到这些新的数据点（因为我无法滚动过去的最右边的条目）。我已经尝试将这些新数据点添加到导航器系列中，但导航器仍然不会更新。我也尝试以编程方式更改导航器系列的xAxis中的最大值，但无济于事。

我该如何完成这项工作？

解决方案

我花了几个星期解决了这个问题，而且很棘手。延迟加载是非常简单的事情（请参阅 http：/ /www.highcharts.com/stock/demo/lazy-loading ）或者添加新的数据点，但都需要一些破解。

首先，我将详细介绍我最终的解决方案。不要将adaptToUpdatedData设置为false，只需将其忽略即可。您所做的所有工作都需要对生成数据的后端代码进行更改。实质上，返回到Highstock的数据将始终是您拥有的完整范围的数据，但是对于当前正在查看的窗口，您将拥有高分辨率的数据点，但分辨率低这个窗口之前和之后的范围的数据点。新数据点将添加到数据的末尾，正如您通常所做的那样（请参阅动态更新的数据演示http://www.highcharts.com/stock/demo/dynamic-update ）

这可确保在添加新数据点时，导航器将也会被更新。但是，它也会阻止您加载全部数据点（因为前后范围只包含低分辨率的数据点）。您需要编写正确地将数据平均到更少数据点的代码，然后才能将其返回到highstocks图表。

在setExtremes处理函数中（当用户滚动导航器），我有代码可以将新数据的AJAX请求添加到Highstocks图表中。我也有使用setInterval（）每10秒获取新数据点的代码。您需要一个跟踪setInterval（）更新发生的变量，因为如果它向图表添加新的数据点，这也将最终调用setExtremes处理函数，然后再处理另一个AJAX请求。 setExtremes处理程序中的AJAX请求只应在setInterval（）更新未发生时运行。 （这很容易导致一些导致无限循环的AJAX数据请求的bug。）

您还需要AJAX数据请求中的变量，以便后端代码知道请求是来自setInterval（）还是来自setExtremes处理程序（当用户滚动导航器时），以便它知道它是否应该按原样返回所请求时间范围的数据（对于setInterval（）请求）或者对全部数据进行低/高分辨率平均（对于setExtremes处理请求）。

我不认为这些变量完全消除了种族的可能性您所描述的问题是正确的：您不能将adaptToUpdatedData设置为false并添加新的数据点，因为导航器不会更新。这可以防止您将导航器滚动到新的点。但是如果你没有设置它，当你请求新的（和更小的）数据范围时，导航器将更新以适应这个范围。导航器和主图表会显示相同的数据范围，导航器无用。

不幸的是，塞巴斯蒂安的回答不起作用。更新系列[0]不会影响导航器，因为将adaptToUpdatedData设置为false将禁止导航器重绘本身。

这种低/高分辨率方法是一种破解，但它是我发现这种方法的唯一方式（在经历了六种或其他方式无效后）。如果Highstocks团队可以将此功能添加到他们的库中，那将是非常好的。

I'm trying to combine lazy loading with dynamically updated data in Highstock. The idea is to have a large historical down-to-the-minute chart (with millions of data points) which is at the same time updated in real time (if the user scrolls to the right edge).

To prevent circular loading while loading data lazily, I need to set:

navigator : {
  adaptToUpdatedData: false
}

However, with this setting, adding a new data point to the chart does not update the navigator anymore and this prevents me to see those new data points at all (because I can't scroll past the previous right-most entry). I've tried adding those new data points to the navigator series as well but the navigator still does not get updated. I've also tried to change the max value in the xAxis of the navigator series programmatically but to no avail.

How can I make this work?

解决方案

I had spent a few weeks solving this problem, and it is tricky. It is a very simple matter to have lazy loading (see the "1.7 million points with async loading" demo at http://www.highcharts.com/stock/demo/lazy-loading ) OR have new data points added, but both requires a bit of a hack.

First I'll detail the solution I ended up with. Do not set adaptToUpdatedData to false, simply leave it out. All the work you will do will require changes on the backend code that produces the data. Essentially, the data that is returned to Highstock will always be the full range of data that you have, however you will have a high resolution of data points for the window that is currently being viewed, but low resolution of data points for the range before and after this window. New data points are added to the end of the data as you would normally do (see the "dynamically updated data" demo at http://www.highcharts.com/stock/demo/dynamic-update )

This ensures that when new data points are added, the navigator will also be updated. However, it also prevents you from having to load the full number of data points (since the before and after ranges only contain a low resolution of data points). You will need to write code that correctly averages your data into fewer data points before returning it to the highstocks chart.

In the setExtremes handler function (which gets called when the user scrolls the navigator), I have code that makes an AJAX request for new data to add to the Highstocks chart. I also have code that uses setInterval() to fetch new data points every 10 seconds. You need a variable that tracks when the setInterval() update is happening, because if it adds new data points to the chart, this will also end up calling the setExtremes handler function, which will then make yet another AJAX request. The AJAX request in your setExtremes handler should only run if a setInterval() update isn't happening. (It is easy to have some bug that causes an infinite loop of AJAX requests for data.)

You will also need a variable in the AJAX request for data so that the back end code knows if the request is from setInterval() or from your setExtremes handler (when the user scrolled the navigator), so that it knows if it should just return the data for the requested time range as is (for setInterval() request) or do the low/high resolution averaging for the full range of data (for setExtremes handler requests).

I don't think these variables completely erase the potential for race conditions.

The problems you described are correct: You can't set adaptToUpdatedData to false and add new data points because the navigator will not update. This prevents you from scrolling the navigator to the new points. But if you don't set it, when you request the new (and smaller) range of data, the navigator will update to fit this range. The navigator and the main chart will show the same range of data, making the navigator useless.

Sebastian's answer doesn't work, unfortunately. Updating series[0] won't affect the navigator because setting adaptToUpdatedData to false disables the navigator from redrawing itself.

This low/high resolution approach is a hack, but it is the only way I found that works (after going through a half-dozen or so other ways that didn't work.) It would be great if the Highstocks team could add this feature to their library.

这篇关于Highstock：如何结合延迟加载和动态数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！