在Highcharts之上设置div非常慢

Question

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

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

除了不在图表顶部绘图之外，还有什么我可以做的吗？

Answer 1

我怀疑这种缓慢是因为当div滑过它时，浏览器必须重绘图表（整个图形或部分图形）。使用大型数据集重绘图表时，这会变得非常慢。

有解决方案，但并非所有解决方案都可以接受：

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

就像我说的那样，并非所有这些甚至任何一个都适合你。

Answer 2

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