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

时间:2016-09-01 16:04:24

标签: javascript charts highcharts user-experience

我使用来自各种设备的大量时间序列数据。在这篇文章中,我将使用一个电池数据的例子,因为它很简单。我可以使用DateTime轴轻松获取电池数据并在高图中随时间绘制图表。我总是有其他重要的事件数据,因为它为您提供了所查看的内容,但不需要绘制图表。举个例子,有人打开或关灯。知道这可以为您提供电池使用情况发生变化的背景信息。今天我把它们作为情节线。类似情节的问题是你与它的互动非常有限。你可以有一个标签,但当你有很多情节线靠近在一起时,标签就是一团糟。我也无法真正做一个很好的工具提示,可以为用户提供有关他们需要知道的更多信息。一个例子是他们看到情节带,他们看到它是一个“亮灯”事件,他们做了一些事情,他们可以看到一个x瓦的灯打开,从那个电池拉Y量。适用于情节乐队的是,当我放大时,他们会对变化做出反应。

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

我不知道这是用Highcharts解决的问题,还是只是一个普通的UX问题。我肯定在寻求帮助。 Hightcharts留在这个项目中,但我似乎无法解决这个问题

enter image description here

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

1 个答案:

答案 0 :(得分:1)

你可以:

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

<强> 2 即可。使用plotLines / plotBands,并创建自定义鼠标输入/输出事件     模仿工具提示

第3 即可。使用Highstock的flags系列类型

<强> 4 即可。使用Highcharts插件库中的 Annotate 插件