2012-12-12 49 views
27

我正在通過MoSync開發跨平臺移動應用程序。關於在移動設備中顯示來自藍牙的數據的JavaScript圖表,我需要一個具有非常高的渲染速度和性能的JavaScript圖表API。它應該足夠快以繪製/重繪/更新圖表,因爲數據將被注入Web視圖。 AFAIK通過測試幾個API,數據注入降低了移動應用程序的速度。 FFI,以下幾點可能有助於顯示圖表應該多快才能在應用程序中順利運行。通過HTML爲移動應用程序提供高性能的JavaScript圖表API

  1. 更新:每500ms或可能250ms的
  2. 每次更新的新數據:三個陣列與尺寸50爲三個系列
  3. 數據遍歷(從藍牙到圖表API):C++> > UI(HTML)>> WebView >>圖表API

請注意,我知道有大量可用的JavaScript圖表API,但是我需要一條建議,已經考慮瞭解釋的情況。

回答

40

下面你會發現我的研究。希望這可以幫助您找到解決方案。

  1. Comparison of JavaScript Data Visualization Libraries特別說flotr2是出於性能內置。它被張貼在六月,2012

    移動友好:是的,性能卓越,包括觸摸事件/多點觸摸

    有趣的特點:可擴展的插件框架,性能調整。 JSON API, 可編程的交互

  2. RGraph:專門用於解決性能和移動的問題顯着的解決方案。 They have a whole page breaking down how they achieve superior performance.

  3. JSXGraph:比較文章13 Chart and Graph plotting javascript plugins指出「已經採取了特別的措施來優化性能」。但是,我沒有在網站上看到關於移動支持的任何信息。

  4. 你可能想看看這些:

    http://jsperf.com/search?q=chart

    唯一一個我可以看到有這將是對你的任何使用是海軍報與 拉斐爾,雖然。當然,你總是可以試着在 之上構建自己的測試,併爲你感興趣的其他庫編寫自己的測試。

    通過https://stackoverflow.com/a/9900526/1085891

  5. 不幸的是,Javascript Graphs and Charts libraries比較不具有的性能標準,但我想可能仍然是有幫助的。

  6. 另一個通過R /編程:https://canvasjs.com

附加:JavaScript Performance On Mobile Devices

+0

感謝您的詳細解答。 flotr2在我的移動應用程序上運行平穩,其性能非常棒,因爲我試圖每250ms添加三個大小爲100的陣列。難以置信:) – utvecklare

+2

另一個通過r /編程:http://canvasjs.com/ – JSuar

3

我對Highcharts圖表庫有大量數據集(高達10000點)有很好的經驗。它使用SVG和VML進行渲染,這比基於canvas的解決方案快得多。另外,因爲它不使用閃光燈,它可以在大多數移動設備上使用。

+1

它如何處理實時數據?根據我的經驗,通過調用addPoint()每秒添加新點(或幾秒鐘)會泄漏大量內存 –

+0

感謝Ryan,我也使用了highcharts,但長時間延遲問題在嘗試更新時仍然可用通過將JavaScript代碼注入webview然後調用addPoint()方法來實現。 – utvecklare

+0

嘗試調用'Series#setData()',而不是更新整個系列的數據。 –

4

這裏是另一種高性能的圖表庫稱爲CanvasJS

它使得超過10萬的數據點在100-200ms。由於它基於Canvas,因此它適用於大多數現代設備。

相關問題