Highstock：如何结合延迟加载和动态数据？

我正试图在Highstock中合并lazy loading和dynamically updated data。这个想法是有一个实时更新的同时更新（如果用户滚动到右边缘）的大型历史最新分钟图表（数百万个数据点）。Highstock：如何结合延迟加载和动态数据？

为了防止循环加载在加载数据懒洋洋的，我需要设置：

navigator : { 
    adaptToUpdatedData: false 
}

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

我该如何做这项工作？

来源

2013-04-21 Mark Goldenstein

我已经花了几个星期解决了这个问题，这很棘手。延迟加载是一件非常简单的事情（请参阅http://www.highcharts.com/stock/demo/lazy-loading上的“170万异步加载点”演示文稿）或添加了新数据点，但都需要一些破解。

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

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

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

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

我不认为这些变量完全消除了竞争条件的可能性。

您描述的问题是正确的：由于导航器不会更新，因此无法将adaptToUpdatedData设置为false并添加新的数据点。这可以防止您将导航器滚动到新的点。但是如果你没有设置它，当你请求新的（和更小的）数据范围时，导航器将更新以适应这个范围。导航器和主图表会显示相同的数据范围，导航器无用。

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

这种低/高分辨率的方法是一种黑客攻击，但它是我发现这种方法的唯一方式（在经历了六种或其他方式无效后）。如果Highstocks团队可以将此功能添加到他们的图书馆。

来源

2013-07-15 19:36:14

感谢您的回答！我也花了很多时间来解决这个问题，但最终我放弃了。不幸的是，Highstocks团队相当无益;他们不仅没有找到解决方案，显然他们甚至没有意识到存在问题！每次电子邮件来回之后，他们一直在建议那些不起作用的解决方案。这是非常不幸的，因为它是更好的产品之一。无论如何，你是否有机会将代码发布到某处（例如GitHub）？那将是真棒！ – 2013-08-21 12:32:30

Fuu，这意味着在后端完整的重构？ – 2013-09-06 13:18:01

@Al Sweigart http://stackoverflow.com/questions/23567405/how-to-prevent-highstock-from-hiding-data-rows是什么帮助我。 – 2014-07-20 13:06:23

我有这个问题两个，并尝试了很多解决方案后，我得到了一个真正为我工作。我将为你描述它：

我使用一个全局变量，它包含最大值xAxis，当我更新图表时，我验证新的xAxis值是否大于maxX变量。

如果这是真的，那么我用新点更新maxX，然后使用chart.xAxis.setExtremes (chart.xAxis.min, maxX);，之后我重绘图表。

有了这两件事情，图表将模拟动态数据的延迟加载，但又出现了另一个问题：范围选择器和导航器没有更新。解决方案是：

chart.rangeSelector.buttons[0].setState(2); 
chart.rangeSelector.clickButton(0,0,true);

这两行使范围选择器再次启用，一切都变好了。

来源

2014-10-10 19:01:13 Jonathan

Highstock：如何结合延迟加载和动态数据？

回答

相关问题