时间戳

首页 > 解决方案 > 是否有 rangeselector 事件来获取数据范围之外的日期？

javascript - 是否有 rangeselector 事件来获取数据范围之外的日期？

问题描述

我正在寻找一个图表来加载和显示价值数年的时间序列数据，这些数据是多年来收集的，但以小块（1 天、1 周、1 个月）动态加载。例如，我正在查看显示 8/21 -> 8/22 数据的图表。

我想使用内置的范围选择器来更改日期范围，例如将起始日期更改为 8/15，然后获取并显示 8/15 -> 8/22 的数据。

我正在寻找用户修改日期范围选择器时触发的事件或 API。我已经找到并尝试过xAxis.events. setExtremes，但这似乎没有我需要的东西。在触发此事件之前，图表会进行某种形式的清理，我给它的日期被丢弃，事件中的 To-From 日期被标准化为数据本身的最小和最大范围。例如，假设我将数据从 8/19 -> 8/22（3 天窗口）加载到图表中，但我的图表放大到 8/21 -> 8/22（1 天）。我想查看 8/15 -> 8/22 的数据，所以我将 From date 更改为 8/15。被触发的事件将我输入的最小值更改为 8/19，因为这是现有数据的最小边缘，但我想要的是一个表明日期更改为 8/15 的事件。

我也尝试在使用rangeSelector.inputDateParserAPI 时破解一些东西，但这绝对不理想，而且我认为它甚至不会起作用，因为我无法告诉 [i] 哪个 [/i] 日期字段被编辑。

我不确定还有什么可以尝试的，但我担心我需要单独实现/集成我自己的自定义范围选择器，我宁愿不这样做。

这是一个使用setExtremes. （它来自 API 文档，而不是我的代码，但它很好地代表了我正在尝试做的事情）

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/events-setextremes/

我想要发生的是，当我将起始日期设置为“2001-01-01”时，setExtremes事件（或其他事件）返回2001-01-01（或任何其他格式的等效项）。但问题是，它将 2001 更改为 2007，因为这是最低的数据值，然后才告诉我输入了什么值。

当我将范围选择器中的日期更改为数据范围之外的日期时，有什么方法可以检测或触发事件？

标签： javascripthighcharts

解决方案

Highcharts 核心中没有这样的事件。但是，可以通过包装RangeSelector.prototype.drawInput和添加以下代码行轻松添加它：

// Custom event
H.fireEvent(rangeSelector, 'RSValueProvided', {
  inputValue: inputValue,
  dataMin: dataMin,
  dataMax: dataMax
});

之后，您可以添加一个将在事件发生时调用的回调函数：

chart: {
  events: {
    load: function() {
      var chart = this;

      Highcharts.addEvent(chart.rangeSelector, 'RSValueProvided', function(e) {
        var date = +new Date(e.inputValue);

        if (date < e.dataMin || date > e.dataMax) {
          console.log(e.inputValue);
        }
      });
    }
  }
}

演示：

API参考：

推荐阅读