Vì tôi đang cố gắng tìm một thư viện biểu đồ nhanh để hiển thị biểu đồ trên thiết bị di động nên hiệu suất rất quan trọng đối với tôi. Nó cũng phải có giấy phép để có thể sử dụng cho mục đích thương mại. Tôi đã so sánh:
- c3, dựa trên d3 và do đó sử dụng SVG
- chart.js đang sử dụng canvas
Các biểu đồ được tải bên trong một thành phần WebView bên trong một ứng dụng gốc và tất cả dữ liệu (bao gồm cả thư viện JS) đều là cục bộ, do đó không bị chậm do yêu cầu http. Để tối đa hóa hiệu suất hơn nữa, tôi cũng đặt mọi thứ bên trong một tệp duy nhất.
Tôi đã tải 4 biểu đồ (đường, thanh, bánh, đường / thanh) với khoảng 500 điểm dữ liệu.
Việc đo thời gian của tôi không bao gồm tải thực tế của trang html. Tôi đã đo hình thức từ thời điểm tôi bắt đầu sử dụng mã thư viện biểu đồ cho đến khi kết thúc kết xuất. Tất cả hoạt ảnh biểu đồ đã bị tắt.
C3 mất khoảng 1500-1800 ms trên các thiết bị Android và iPhone hiện đại. iPhone hoạt động tốt hơn Android khoảng 100ms.
Chart.js mất khoảng 400-800ms. Android hoạt động tốt hơn iPhone khoảng 300ms.
Không có gì ngạc nhiên, SVG chậm hơn. Tùy thuộc vào trường hợp sử dụng của bạn, có thể quá chậm.
Trên máy tính để bàn, kết xuất trong c3 là khoảng 150-200ms và biểu đồ.js là khoảng 80-100ms. Chạy thử nghiệm tương tự trong trình giả lập Android và iPhone cho kết quả tương tự như trên máy tính để bàn. Vì vậy, việc làm chậm thiết bị di động chắc chắn là do giới hạn phần cứng / xử lý.
Hy vọng điều đó sẽ giúp