在Highcharts顶部的动画div非常慢

Question

我正在写一个使用Highcharts的应用程序，并且在一个实例中，我希望在图表的底部有一个“滑块”，它在图表上垂直延伸。移动滑块将根据用户在图表上移动滑块的位置更新页面的其他部分。

问题是，当在Highchart（图像或div）上绘制任何东西时，性能变得绝对不可接受。滑块根本无法跟上鼠标移动See a jsfiddle here。注意 - 这只发生在处理大量数据点时（在我的情况下这绝对是不可避免的）。

有什么我可以做的，但不能绘制在图表之上？

Answer 1

我怀疑缓慢是因为浏览器必须在div滑过时重绘图表（整体或部分）。用大数据集来重绘图表，这会变得令人生厌。

有解决方案，但并非所有的人总是可以接受的：

• 您可以尝试减少您的数据以较低频率取样设点的数量。
• 您可以尝试开窗，以便查看器仅显示整个集合中的范围。例如，如果您有10,000个数据点，则您的窗口可以沿数据集滑动，一次只显示1,500个点，而不是所有10,000个点。
• 转移到其他技术，如Flash或Silverlight。

就像我说过的，虽然并非所有这些，甚至其中的任何一个都适合你。

Answer 2

我注意到，当你拖动滑块到图上时，它仍然会突出显示数据点。您可能应该在拖动滑块时在图表的那部分上设置指针事件：无，这将允许浏览器不检查该子树中的指针事件（如果有很多数据点可能会有些贵，特别是如果您在悬停时更新这些元素）。