处理 Highcharts 中具有动态 x 轴范围的无数据模块

Question

我目前正在使用 Highcharts 使用线性图显示时间序列数据。我实现了一个时间滑块组件，允许用户放大特定时间范围。该滑块根据用户交互动态调整 x 轴的最小值和最大值。

这是我的设置：

• 我将所有数据传递到 Highcharts，并在调整滑块时动态更新 x 轴的最小值和最大值。
• 有时，对于某些最小和最大设置，没有可用的数据点。

当这种情况发生时，我想使用 Highcharts 的无数据模块显示“无可用数据”消息。但是，由于我将所有数据提供给 Highcharts 并让它根据 x 轴边界处理显示，因此即使选定范围内没有可见数据点，也不会出现无数据标签。 我在代码中导入了 NoData 模块，并添加了 noData 标签以在代码中显示，如下所示：

lang: {
      noData: 'No data available'
    },

当我尝试将空数据数组传递给 Highcharts 时，该模块工作正常。但是，当 Highcharts 负责根据最小值和最大值显示值时，不会显示该消息。

这里有一个 JSFiddle 链接 来说明这个问题。

在这段代码中，我设置了静态最小值和最大值，以使其尽可能容易地重现。要重现我的问题，您可以将最大值从 1435705200000 更改为 1335705200000（以说明如果用户尝试放大没有可用数据的图表时间范围会发生什么情况）。

有没有办法让 Highcharts 识别这些场景并相应地显示无数据消息？任何实现此行为的建议或解决方法将不胜感激。

感谢您的协助！

Answer 1

您可以检查是否有任何点可见，例如检查是否计算了

yAxis.dataMax

并相应地调用

chart.showNoData

或

chart.hideNoData

。

  chart.xAxis[0].setExtremes(null, 1335705200000);

  if (chart.yAxis[0].dataMax === undefined) {
    chart.showNoData();
  } else {
    chart.hideNoData();
  }

---

实例：https://jsfiddle.net/BlackLabel/tmgyv1fn/

API 参考： https://api.highcharts.com/highcharts/noData