Highstock:如何组合延迟加载和动态数据？

Question

我正在尝试将延迟加载与Highstock中的动态更新数据结合起来.我们的想法是拥有一个大型的历史最新图表(具有数百万个数据点),同时实时更新(如果用户滚动到右边缘).

为了防止在懒惰加载数据时循环加载,我需要设置:

navigator : {
  adaptToUpdatedData: false
}

但是,使用此设置,向图表添加新数据点不会再更新导航器,这使我无法查看这些新数据点(因为我无法滚动到前一个最右边的条目).我已经尝试将这些新数据点添加到导航器系列中,但导航器仍然没有更新.我还尝试以编程方式更改导航器系列的xAxis中的最大值,但无济于事.

我怎样才能做到这一点？

Answer 1

我花了几周时间解决这个问题,这很棘手.延迟加载是一件非常简单的事情(参见http://www.highcharts.com/stock/demo/lazy-loading上的"170万点异步加载"演示)或者添加了新的数据点,但两者都有需要一点点黑客攻击.

首先,我将详细说明我最终得到的解决方案.不要将adaptToUpdatedData设置为false,只需将其保留为false即可.您将要做的所有工作都需要更改生成数据的后端代码.基本上,返回到Highstock的数据将始终是您拥有的全部数据,但是您将获得当前正在查看的窗口的高分辨率数据点,但之前的数据点的分辨率较低在这个窗口之后.像往常一样,新数据点被添加到数据末尾(请参阅http://www.highcharts.com/stock/demo/dynamic-update上的"动态更新数据"演示)

这可确保在添加新数据点时,还将更新导航器.但是,它还可以防止您必须加载全部数据点(因为前后范围仅包含低分辨率的数据点).在将数据返回到highstocks图表之前,您需要编写能够将数据正确平均为更少数据点的代码.

在setExtremes处理函数中(当用户滚动导航器时调用它),我有一些代码可以将新数据的AJAX请求添加到Highstocks图表中.我也有使用setInterval()的代码每10秒获取一个新的数据点.你需要一个跟踪setInterval()更新发生时间的变量,因为如果它将新的数据点添加到图表中,这也将最终调用setExtremes处理函数,然后再生成另一个AJAX请求.只有在没有发生setInterval()更新时,才能运行setExtremes处理程序中的AJAX请求.(很容易出现一些导致数据无限循环的AJAX请求的错误.)

您还需要AJAX数据请求中的变量,以便后端代码知道请求是来自setInterval()还是来自setExtremes处理程序(当用户滚动导航器时),以便它知道它是否应该返回所请求时间范围的数据(对于setInterval()请求)或对整个数据范围进行低/高分辨率平均(对于setExtremes处理程序请求).

我不认为这些变量完全抹去了竞争条件的可能性.

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

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

这种低/高分辨率的方法是一种黑客攻击,但它是我发现有效的唯一方法(在经过其他六种方法之后无法正常工作.)如果Highstocks团队可以添加这个功能到他们的图书馆.