javascript - Highcharts:显示数据相关事件的最佳方式

Question

我使用来自各种设备的大量时间序列数据。在这篇文章中，我将仅使用电池数据的示例，因为它很好而且简单。我可以轻松获取电池数据，并使用日期时间轴在 Highcharts 中将其随着时间的推移绘制成图表。我总是有其他需要了解的重要事件数据，因为它为您提供了您正在查看的内容的背景信息，但不需要绘制图表。举个例子，有人打开或关闭了灯。了解这一点可以让您了解电池使用情况发生变化的原因。今天我把这些作为情节。像这样的情节的问题在于你与它的互动非常有限。你可以有一个标签，但是当你有很多情节线靠在一起时，标签就会变得一团糟。我也无法真正提供一个很好的工具提示来为用户提供更多有关他们需要了解的信息。一个例子是，他们看到绘图带，他们看到这是一个“灯打开”事件，他们做了一些事情，他们可以看到打开了 x 瓦的灯，从电池中拉出 Y 量。对于情节带来说，最有效的是，当我放大时，它们会响应变化。

我正在寻找一种解决方案、一种模式、一种方法来允许用户显示基于时间序列的数据以及覆盖在其上的一些相关事件。这种方法将允许用户深入研究它以获取上下文并更好地理解他们的时间序列数据

我不知道这是否是 Highcharts 解决的问题，还是只是一个一般的用户体验问题。我肯定正在寻求一些帮助。 Hightcharts 会留在这个项目中，但我似乎无法解决这个问题

这是我为这篇文章制作的电池图表示例。这些是灰色的情节线，表示经常发生并且非常接近的事件。正如您所看到的，用户没有上下文或他们的意思。他们确实知道发生了一些事情，并且可以爬取数据以查看这些图可能是什么。在现实世界中，他们知道灰色是一个调试事件，他们可以从那里深入研究，但这实际上并不能解决问题

Answer 1

你可以:

1。使用单独的scatter系列来用特定的点标记来标记事件，这样您就可以利用图例、数据标签和 自动工具提示功能

2。使用 plotLines/plotBands，并创建自定义 mousein/out 事件
模仿工具提示

3。使用 Highstock 的 flags 系列类型

• http://www.highcharts.com/stock/demo/flags-general

4。使用 Highcharts 插件存储库中的 Annotate 插件

• http://www.highcharts.com/plugin-registry