如何将两束数据合并到 Highcharts 中的一个图表中？答案

【问题标题】：How to combine two bunch of data, into one chart in Highcharts?如何将两束数据合并到 Highcharts 中的一个图表中？
【发布时间】：2017-12-10 08:22:49
【问题描述】：

我对 highcharts 完全陌生，所以请提前原谅任何错误。

我有一张图表说明了根据日期时间使用的带宽量。（有点像this example.）每当图表在xAxis上缩放时，我都需要向用户显示更多数据；意味着当我们详细查看一段时间时，应该弹出新数据。幸运的是，我可以访问这些新数据，但主要问题是我不知道如何将这些新数据与旧图表结合起来。

为了使我的问题更生动，让我们想象一下这种情况：假设我在过去 2 年的月度范围内使用带宽（对于 xAxis 上的每个月，我在 yAxis 上都有一个值），然后我放大某些部分我的图表和图表变得更宽，xAxis 上弹出新点（当我们设置 zoomtype: 'x' 时，highcharts 中会自动发生什么），对于其中一些点，我在 yAxis 上有一些与它们对应的值，我想要这些新的在我的图表中要考虑的点。对于大规模数据，我该怎么做？（例如，当我有 2 年的数据并且我想以一分钟的精度缩放时，在旧系列之间手动包含新点是不可行的。）

由于我的代码太大，放在这里比较复杂，所以我尝试通过图片来说明我想要的结果：

1) 这是我放大前的图表：

2) 缩放后：

3) 以及我不知道如何制作的最终结果：

任何帮助将不胜感激。

【问题讨论】：

标签： charts highcharts

【解决方案1】：

看看这个现场演示：http://jsfiddle.net/kkulig/6gyfx6n7/

我使用afterSetExtremes 事件来检查当前显示的时间跨度并设置适当的数据。如果它短于 30 天，那么我会加分。否则我恢复默认数据。 pointsAdded 帮助我控制这些操作是否真的需要。

events: {
  afterSetExtremes: function(e) {
    var series = this.series[0];

    if (pointsAdded && e.max - e.min > 30 * day) {
      console.log('Set default data');
      series.setData(data.slice());
      pointsAdded = false;
    } else if (!pointsAdded) {
      console.log('Add points');
      additionalData.forEach(function(p) {
        series.addPoint(p, false);
        series.chart.redraw();
        pointsAdded = true;
      });
    }
  }
}

要查看它的工作情况，请选择过去 20 天左右。然后点击All按钮返回默认视图。

API 参考：

【讨论】：