我对高图表完全陌生,所以请提前原谅任何错误。
我有一张图表说明了根据日期时间使用的带宽量。(就像这个例子。)每当图表在xAxis上缩放时,我都需要向用户显示更多数据;意味着当我们看到一段时间的详细信息时,应该弹出新的数据。幸运的是,我可以访问这些新数据,但主要问题是我不知道如何将这些新数据与我的旧图表相结合。
为了让我的问题更生动,让我们想象这样一个场景:假设我有过去2年的带宽使用量,以月为单位(对于xAxis上的每个月,我在yAxis上有一个值),然后我放大我的图表的某个部分,图表变得更宽,新的点在xAxis上弹出(当我们设置< code>zoomtype: 'x'时,在highcharts中会自动发生什么),对于其中的一些点,我在yAxis上有一些与它们对应的值,我希望这些新点在我的图表中得到考虑。对于大规模的数据,我该怎么做呢?(例如,当我有2年的数据,并且我想以一分钟的精度缩放时,在旧序列之间手动包含新点是不可行的。)
由于我的代码太大,放在这里会更复杂,我尝试通过图片来说明我想要的结果:
非常感谢任何帮助。
看看这个现场演示: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参考: