高图表:显示缺少数据的x轴,但忽略某些区域



我想使用 Highcharts StockChart 库来制作图表。以下是我需要创建的图表上的详细信息:

  • 图表的类型是datetime
  • 数据每分钟更新一次(它是来自股票的数据),因此图表会不断更新。
  • 图表的数据是从上午 9:00 到上午 11:40,然后从下午 12:35 到下午 3:00(有午休时间)。
  • 数据以 5
  • 分钟的间隔以条形显示(除午休时间外,每 5 分钟接收一次数据)。
  • 接收数据时,条形将开始从左到右绘制。
  • 无论图表上显示多少数据,条形宽度都需要相同。
  • 图表的 x 轴的标签需要始终相同且位于同一位置(每小时上午 9:00 至下午 3:00),即使缺少数据(必须在 x 轴上绘制一条线)。

因此,我在图表的 x 轴上使用设置为当天下午 3:00 的max属性。有了这个,我可以:

  • 条形宽度相同
  • 无论在同一时间间隔(直到下午 3 点)丢失数据如何,都绘制 x 轴。

一切都很好,直到午休时间(上午11:40)。但是,当收到中午 12:35(午休后)的数据时,图表将忽略max属性,绘制的 x 轴的最后一行直到下午 1 点(这条线需要绘制到下午 3 点)。我假设这是因为直到上午 11:40 所有 5 分钟的数据都存在,因此图表了解需要绘制数据的间隔,并且还可以在同一间隔上绘制 x 轴线。但是一旦数据出现差距,图表就不再知道数据是否会在 5 分钟的间隔内继续出现,因此只会考虑到目前为止收到的所有数据,忽略max属性。

为了解决这个问题,我尝试了不同的选择:

  • 我使用了设置为 falseordinal属性。有了这个,我可以解决缺少x轴标签的问题,直到下午3点,但问题是午休时间在图表上会有间隙。我需要合并午休时间并将 x 轴标签绘制到下午 3 点。
  • 我尝试使用tickInterval属性,并且能够设置 x 轴的间隔,但仅适用于正在绘制的数据。但是,x 轴将其标记为直到下午 1 点,并且需要直到下午 3 点。
  • 我尝试在午休时间使用breaks属性,同时使用ordinal属性设置为 false,但没有工作。此外,图表需要在午休时间合并;使用此属性会故意造成差距,因此此属性不会帮助我解决此问题。

所以,我注意到在有数据的地方正确更改了间隔,但在 x 轴上没有数据的地方没有绘制线条(直到下午 1 点,直到下午 3 点)。如果我使用ordinal属性,它将显示缺失数据的所有 x 轴线,但需要隐藏午休时间的间隙。

任何帮助不胜感激=)

更新:

我注意到,当仍然没有数据时,如果使用 highcharts 的 v1.3.1(我目前正在使用的那个),x 轴线在下午 3 点之前被正确绘制,但如果使用最新版本,这不会发生。对于最新版本,似乎忽略了max属性。

在注释中包含我的代码的jsfiddle链接(因为stackoverflow不允许我发布很多链接,因为没有足够的声誉)。

我能够实现我想要的。最后,我所做的是创建空数据来填补午休时间的空白。此外,我在下午 3 点之前为剩余数据创建了空数据,这样 x 轴线就正确绘制了: https://jsfiddle.net/K4Cj6/201/:[1504528800000,null,null,null,null]

无论如何,谢谢伙计们=)

最新更新