javascript - 图表动画从视口(viewport)移动后滞后较大

Question

我正在绘制图表，我发现图形穿过视口(viewport)后，绘图不平滑，并且绘图变得不一致且有滞后。

chart.series[0].addPoint([x,getRandomInt(40, 95)], true, shiftFlag);
chart.series[1].addPoint([x,getRandomInt(40, 95)], true, shiftFlag);
chart.series[2].addPoint([x,getRandomInt(40, 95)], true, shiftFlag);

fiddle - http://jsfiddle.net/bRp6h/38/

Answer 1

问题是，当您添加它们时，您会为每个点调用一次 redraw ，这会使用额外的资源。

addPoint(options [, redraw] [, shift] [, animation])

您应该做的是显式调用 chart.redraw()它重绘图表一次，而不是 3 次，如下所示:

chart.series[0].addPoint([x,getRandomInt(40, 95)], false, shiftFlag);
chart.series[1].addPoint([x,getRandomInt(40, 95)], false, shiftFlag);
chart.series[2].addPoint([x,getRandomInt(40, 95)], false, shiftFlag);
chart.redraw();

工作示例: http://jsfiddle.net/ewolden/bRp6h/42/

series.addPoint 上的 API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint