提问者:小点点

如何在Highcharts中将两组数据组合成一个图表?


我对高图表完全陌生,所以请提前原谅任何错误。

我有一张图表说明了根据日期时间使用的带宽量。(就像这个例子。)每当图表在xAxis上缩放时,我都需要向用户显示更多数据;意味着当我们看到一段时间的详细信息时,应该弹出新的数据。幸运的是,我可以访问这些新数据,但主要问题是我不知道如何将这些新数据与我的旧图表相结合。

为了让我的问题更生动,让我们想象这样一个场景:假设我有过去2年的带宽使用量,以月为单位(对于xAxis上的每个月,我在yAxis上有一个值),然后我放大我的图表的某个部分,图表变得更宽,新的点在xAxis上弹出(当我们设置< code>zoomtype: 'x'时,在highcharts中会自动发生什么),对于其中的一些点,我在yAxis上有一些与它们对应的值,我希望这些新点在我的图表中得到考虑。对于大规模的数据,我该怎么做呢?(例如,当我有2年的数据,并且我想以一分钟的精度缩放时,在旧序列之间手动包含新点是不可行的。)

由于我的代码太大,放在这里会更复杂,我尝试通过图片来说明我想要的结果:

非常感谢任何帮助。


共1个答案

匿名用户

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

我在SetExtremes事件之后使用来检查当前显示的时间跨度并设置适当的数据。如果时间短于30天,我将添加额外的点。否则我将恢复默认数据。point sAdded帮助我控制是否实际需要这些操作。

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参考:

    < Li > https://API . high charts . com/high stock/xaxis . events . afterset extremes < Li > https://API . high charts . com/class-reference/high charts。系列