Highcharts - 按系列中的第3个元素导航＆＃39;隐藏＆＃39;在情节中

Question

我有一些格式（速度，频率，日期）的信息。会发生的是我需要以速度x频率绘制此图表，但我想允许用户按日期使用导航过滤，这不会出现在图表上。

另外，我有一些不是动态构建的信息，这是速度x频率的限制。此信息将作为参考点固定在图上。因此，当我过滤绘图信息（而不是限制）时，它必须始终显示这些限制图。

您可以通过此图表了解，区域图显示了点（速度，频率）的限制。然后，我会添加速度x频率点（x日期），然后按日期过滤。

你能给我一些建议吗？

这是一个JSFIDDLE

JSFIDDLE

data: [
                [0, 20, here is a date], [10, 20,here is a date],
                [50, 39.9994, here is a date], [100,49.7494, here is a date]
            ],

伙计们，请注意，系列中数组的每个元素都有3个元素[a，b，c]，假设第三个元素（c）是DATE，而不是现在的随机数。我希望能够使用注释的导航器代码来过滤这个C系列的元素，这个C元素实际上并没有出现在你看到的图表上，它只是一个隐藏元素，只是为了过滤数据。

Answer 1

如果你想在同一个图表中使用导航器，那将会有点棘手。导航器仅适用于日期时间数据，并且必须与主图表中的轴连接。

所以，你有这种格式的数据：

var points = [
  [5, 9, Date.UTC(2016, 1, 0)],
  [65, 6, Date.UTC(2016, 1, 1)],
  ...

您需要两个x轴 - 一个代表数据，另一个连接到导航器。第二个轴必须可见才能使用导航器，并且必须与日期时间数据连接。

所以现在，除了两个x轴之外，你需要两个系列 - 一个包含实际数据，另一个包含第一个系列的[date, y]值。附加数据将在导航器中显示 - 注意，在导航器中您不能使用散布系列 - 因此它将转换为行系列 - 发生它没有错误，您的数据应按日期排序。

series: [{
  id: 'main-series',
  data: points.map(function(point) {
    return [point[0], point[1], point[2], point[1]]
  }),
  showInNavigator: false,
  xAxis: 1,
  keys: ['x', 'y', 'date', 'holdY'] //holdY is for easier hiding points
}, {
  xAxis: 0,
  data: points.map(function(point) {
    return [point[2], point[1]];
  }),
  showInNavigator: true,
  enableMouseTracking: false,
  color: 'transparent',
  showInLegend: false
}],

xAxis: [{
  minRange: 1000 * 3600 * 24,
  type: 'datetime',
  tickLength: 0,
  tickLength: 0,
  labels: {
    enabled: false
  },
}, {
  type: 'linear'
}],

你需要一个回调的最后一件事，它将在导航器中的极值之后隐藏/显示点。隐藏/显示取决于第三点的属性，即日期。没有直接的API可以隐藏/显示特定的点（饼图除外），但可以通过将点值设置为null来实现（这就是为什么我在holdY中保留了实数y）。

events: {
  afterSetExtremes: function(e) {
    var points = this.chart.get('main-series').points;
    points.forEach(function(point) {
      point.update({
        y: e.min <= point.date && point.date <= e.max ? point.holdY : null
      }, false, false);
    });
    this.chart.redraw();
  }
}

示例：https://jsfiddle.net/3wuwdonn/1/

我会考虑使用导航器作为单独的图表，然后您不需要主图表中的第二个x轴和系列，您也不需要让它们看起来不可见。

此处仅显示导航器图表的示例：http://jsfiddle.net/f7Y9p/