2012-12-12 31 views
27

Tôi đang làm việc trên một ứng dụng di động đa nền tảng thông qua MoSync. Về biểu đồ JavaScript để hiển thị dữ liệu đến từ Bluetooth trong thiết bị di động, tôi cần API biểu đồ JavaScript có tốc độ và hiệu suất kết xuất rất cao. Nó phải đủ nhanh để vẽ/vẽ lại/cập nhật biểu đồ vì dữ liệu sẽ được tiêm vào Webview. AFAIK từ việc kiểm tra vài API, việc phun dữ liệu làm giảm tốc độ trong các ứng dụng di động. FFI, các điểm sau đây có thể hữu ích để cho thấy tốc độ của biểu đồ để chạy trơn tru trong ứng dụng.API biểu đồ JavaScript hiệu suất cao cho ứng dụng dành cho thiết bị di động thông qua HTML

  1. Cập nhật: mỗi 500ms hoặc có thể là 250ms
  2. dữ liệu mới mỗi cập nhật: ba mảng với kích thước 50 cho ba loạt
  3. dữ liệu đi qua (từ Bluetooth để vạch API): C++> > Giao diện người dùng (HTML) >> WebView >> biểu đồ API

Lưu ý rằng tôi biết rất nhiều API biểu đồ JavaScript có sẵn, tuy nhiên tôi cần một lời khuyên đã xem xét tình hình giải thích.

Trả lời

40

Dưới đây bạn sẽ tìm thấy nghiên cứu của tôi. Hy vọng rằng, điều này giúp bạn tìm ra một giải pháp.

  1. Comparison of JavaScript Data Visualization Libraries đặc biệt nói rằng flotr2 được xây dựng để thực hiện. Nó đã được đăng trên Tháng Sáu, 2012.

    thoại di động thân thiện: Có, được xây dựng để thực hiện và bao gồm cảm ứng sự kiện/đa cảm ứng

    Thú vị các tính năng: khuôn khổ plugin mở rộng, điều chỉnh cho hiệu suất. JSON api, lập trình cho tương tác

  2. RGraph: giải pháp đáng chú ý giải quyết cụ thể hiệu suất và các vấn đề di động. They have a whole page breaking down how they achieve superior performance.

  3. cho biết rằng "chăm sóc đặc biệt đã được thực hiện để tối ưu hóa hiệu suất". Tuy nhiên, tôi không thấy bất cứ điều gì trên trang web về hỗ trợ di động.

  4. Bạn có thể muốn có một cái nhìn tại các:

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

    Người duy nhất tôi có thể thấy có điều đó sẽ sử dụng bất kỳ cho bạn là flot vs raphael, mặc dù. Tất nhiên bạn luôn có thể cố gắng xây dựng trên đó và viết các bài kiểm tra của riêng bạn cho các thư viện khác mà bạn quan tâm.

    qua https://stackoverflow.com/a/9900526/1085891

  5. Thật không may, Javascript Graphs and Charts libraries so sánh không có một tiêu chí thực hiện nhưng tôi nghĩ vẫn có thể hữu ích.

  6. Một qua r/lập trình: https://canvasjs.com

Extra:JavaScript Performance On Mobile Devices

+0

Cảm ơn bạn đã trả lời chi tiết. flotr2 hoạt động trơn tru trên ứng dụng di động của tôi và hiệu suất của nó là tuyệt vời vì tôi đã cố gắng thêm ba mảng với kích thước 100 mỗi 250ms. Unbelievable :) – utvecklare

+2

Khác thông qua r/lập trình: http://canvasjs.com/ – JSuar

3

Tôi đã có những trải nghiệm tuyệt vời với thư viện biểu đồ Highcharts với bộ dữ liệu lớn (tối đa 10000 điểm). Nó sử dụng SVG và VML để hiển thị, nhanh hơn nhiều so với các giải pháp dựa trên canvas. Ngoài ra, bởi vì nó không sử dụng flash, nó sẽ hoạt động trên hầu hết các thiết bị di động.

+1

Cách xử lý dữ liệu thời gian thực? Theo kinh nghiệm của tôi, với việc gọi addPoint() để thêm các điểm mới mỗi giây (hoặc vài lần trong một giây) nó bị rò rỉ nhiều bộ nhớ –

+0

Cảm ơn Ryan, tôi cũng sử dụng highcharts, nhưng vấn đề trì hoãn lâu vẫn có sẵn trong khi cố gắng cập nhật bằng cách tiêm mã JavaScript vào webview và sau đó gọi phương thức addPoint(). – utvecklare

+0

Hãy thử gọi 'Series # setData()' thay vào đó, và chỉ cập nhật dữ liệu cho toàn bộ chuỗi. –

4

Dưới đây là một biểu đồ High Performance Library gọi CanvasJS

Nó làm cho hơn 100.000 datapoints trong 100-200ms. Bởi vì nó dựa trên Canvas, nó hoạt động trên hầu hết các thiết bị hiện đại.

0

Kiểm tra dygraphs, nó có bản trình diễn ấn tượng. Kiểm tra nó trên một thời gian ngắn trên điện thoại, cảm thấy người đàn ông tốt.

Xem thêm comparison of relevant projects.

Các vấn đề liên quan