在Highcharts頂部的動畫div非常慢

Question

我正在寫一個使用Highcharts的應用程序，並且在一個實例中，我希望在圖表的底部有一個「滑塊」，它在圖表上垂直延伸。移動滑塊將根據用戶在圖表上移動滑塊的位置更新頁面的其他部分。

問題是，當在Highchart（圖像或div）上繪製任何東西時，性能變得絕對不可接受。滑塊根本無法跟上鼠標移動See a jsfiddle here。注意 - 這隻發生在處理大量數據點時（在我的情況下這絕對是不可避免的）。

有什麼我可以做的，但不能繪製在圖表之上？

Answer 1

我懷疑緩慢是因爲瀏覽器必須在div滑過時重繪圖表（整體或部分）。用大數據集來重繪圖表，這會變得令人生厭。

有解決方案，但並非所有的人總是可以接受的：

• 您可以嘗試減少您的數據以較低頻率取樣設點的數量。
• 您可以嘗試開窗，以便查看器僅顯示整個集合中的範圍。例如，如果您有10,000個數據點，則您的窗口可以沿數據集滑動，一次只顯示1,500個點，而不是所有10,000個點。
• 轉移到其他技術，如Flash或Silverlight。

就像我說過的，雖然並非所有這些，甚至其中的任何一個都適合你。

Answer 2

我注意到，當你拖動滑塊到圖上時，它仍然會突出顯示數據點。您可能應該在拖動滑塊時在圖表的那部分上設置指針事件：無，這將允許瀏覽器不檢查該子樹中的指針事件（如果有很多數據點可能會有些貴，特別是如果您在懸停時更新這些元素）。