使用工具提示在豐富的散點圖上繪製75000點

我可以在這裏發佈一些代碼，但問題的標題正是問題所在。使用工具提示在豐富的散點圖上繪製75000點

我的chart.destroy()需要很多時間75000點。每個點也有一個工具提示（使用的工具提示是Highcharts自己的工具提示）

此外，使用new Highcharts.Chart({ ...options...})繪製新圖表也需要大量時間。

有沒有人與Highcharts合作過這麼多數據點？如果是的話，你是如何設法保持順暢運作的。 4-5秒的延遲沒有問題，但我在渲染圖表時出現了30秒的延遲。時間軸中的GC事件也顯示了大量垃圾收集的數據。我覺得我沒有解決方案，但我正在拼命尋找任何線索。

謝謝！

來源

2014-09-04 AdityaSaxena

在這裏你可以找到例如對於具有散點50K的畫布上Highcharts：http://jsfiddle.net/highcharts/az37W/ - 然而無提示，因爲工具提示主要是那些性能問題的罪魁禍首。 – 2014-09-04 13:10:40

我之前就看到過，但它不能幫助我，因爲我需要工具提示。感謝提示，認爲:) – AdityaSaxena 2014-09-04 13:38:06

您知道，Highcharts的性能主要問題是a）標記b）工具提示，因爲它使用了機器的大部分資源。你想要分散（標記）和工具提示，然後......祝你好運;）無論如何，如何讀取75000點的這種散佈？作爲用戶，我必須說這將是可怕的。 – 2014-09-05 12:26:51

性能瓶頸在於需要在內存中表示數據集中每個點的數據量。既然你需要工具提示，每個點都必須將它的值作爲字符串存儲在內存中;因此您至少需要75,000個內存中的對象，而不包括highcharts本身的成本。 highcharts可以在顯着較短的時間內（無工具提示）顯示75k散點圖的原因是，它會對輸出進行採樣並顯示一個估計值，而沒有任何點的交互性。

http://jsfiddle.net/5haL91vf/1/

出於演示的目的，我使用了一個名爲ZingChart庫，並使用渲染類型爲畫布，以提高大型數據集的性能。啓用工具提示後，我可以在我的計算機上顯示15k以下的頭髮（顯然取決於計算機）75k。但是，正如你可以看到，當可視化密度超過像素密度時，散射圖沒有真正的價值。

進行簡單設置時間：

startTime = Date.now(); 
zingchart.render({ 
    id:'zc', 
    width: 1000, 
    height: 700, 
    output: "canvas", 
    data:myChart 
}); 

zingchart.bind('zc', 'complete', function(){ 
    alert((Date.now() - startTime)/1000 + " seconds"); 
});

來源

2014-09-05 21:48:35

需要說明的是，沒有工具提示的75k工作速度相當快：http://jsfiddle.net/az37W/17/ - 小於1秒。和工具提示：http://jsfiddle.net/az37W/22/ - 12秒（當然，如你所說，取決於電腦，但你的例子使我45secs渲染？）。 – 2014-09-08 09:40:18

使用工具提示在豐富的散點圖上繪製75000點

回答

相關問題