Question

我对highcharts完全不熟悉，所以请事先原谅任何错误。

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

为了让我的问题更加生动，让我们想象一下这个场景：假设我在月份范围内有过去2年的带宽使用率（对于xAxis上的每个月，我在yAxis上有一个值），然后我放大了一些部分我的图表和图表变得更宽，新点在xAxis上弹出（当我们设置zoomtype: 'x'时会在高图中自动发生），对于其中一些点，我在yAxis上有一些与之对应的值，我想要这些新点将在我的图表中考虑。如何处理大规模数据呢？（例如，当我有2年的数据并且我希望按照一分钟的准确度进行缩放时，在旧系列之间手动包含新点是不可行的。）

因为我的代码太大而且把它放在这里变得更复杂，我试图通过图片说明我想要的结果：

1）这是我缩放前的图表：

2）缩放后：

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

非常感谢任何帮助。

Answer 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参考：

如何将两组数据组合成Highcharts中的一个图表？

1 个答案: