JavaScript có sẵn sàng để trực quan hóa các tập dữ liệu lớn không?

Question

Chúng tôi có một số dữ liệu (10-50 cột, hàng trăm nghìn hàng) mà chúng tôi thường hình dung trong Excel dưới dạng biểu đồ đường hoặc biểu đồ thanh xếp chồng.
Người dùng muốn có thể phóng to và thu nhỏ biểu đồ để xem các mẫu riêng lẻ, nhưng các loại hoạt động này thực sự mang Excel đến đầu gối của nó.

Tôi đang suy nghĩ về việc nhúng dữ liệu vào trang HTML, với JavaScript nội tuyến để xử lý trực quan hóa trong trình duyệt. Một cái gì đó giống như lib biểu đồ flotr JS sẽ được thừa hưởng cho các biểu đồ.

1. Đây có phải là một ý tưởng ngu ngốc không?
2. Trình duyệt có sẵn sàng cho loại tải này không?
3. Đây có phải là một vấn đề được giải quyết mà tôi chỉ nên googled kỹ lưỡng hơn trước khi yêu cầu?

Answer 1

Javascript có thể đã sẵn sàng cho nó, vì bản thân javascript đã nhận được khá nhanh. Trong trình duyệt trải nghiệm của tôi thường là không phải đã sẵn sàng để xử lý các cấu trúc DOM rất lớn. Ít nhất bạn có thể mong đợi dành nhiều thời gian để tìm hiểu tại sao mọi thứ diễn ra chậm. Bạn cũng sẽ khám phá ra rằng rất nhiều thư viện javascript "chuẩn" (nguyên mẫu/jquery xuất hiện trong tâm trí) không thích hợp để làm việc với các cấu trúc DOM "quá mức" lớn.

Hãy chuẩn bị sẵn sàng để tìm hiểu rằng một hoạt động nhất định chậm trên tất cả các trình duyệt, nhưng cuối cùng, có 3-4 lý do khác nhau trên các trình duyệt khác nhau. Điều này dựa trên kinh nghiệm làm việc với các DOM quá khổ vừa phải. Trong khi chắc chắn có thể, nó sẽ chi phí một số tiền hợp lý của công việc để có được một kết quả phong nha.

Answer 2

Javascript có sẵn sàng để hình dung các tập dữ liệu lớn không?

Có - ngôn ngữ đến mức dễ dàng, trong môi trường phù hợp, xử lý các bản ghi và thao tác quan trọng, trực quan hóa, v.v. Bản thân ngôn ngữ cũng tốt.

Đây có phải là ý tưởng ngu ngốc không?

Không, trên thực tế, bạn có thể tin cậy trên hầu hết mọi máy tính để có thể chạy ngôn ngữ nền tảng có khả năng này.

Trình duyệt có sẵn sàng cho loại tải này không?

Một số có thể - phụ thuộc vào việc xử lý và hành động bạn đang thực sự thực hiện. Với Chrome sử dụng công cụ javascript nhanh và ngày càng có nhiều người dựa vào nó, cuộc chiến tốc độ javascript được kích hoạt. Tôi nghĩ đây là một tình huống sử dụng hoàn toàn hợp lệ.

Bạn sẽ cần phải chuẩn bị để đo điểm chuẩn và tối ưu hóa, có nghĩa là đào sâu vào ruột của javascript. Vui lòng công bố kết quả của bạn để những thiếu sót có thể được sửa đổi.

-Adam

Answer 3

Tôi đặc biệt khuyên bạn nên đưa ra đề xuất của Adam để thực hiện một số điểm chuẩn và tối ưu hóa. Gần đây tôi đã thực hiện một số công việc về vẽ các tập dữ liệu lớn với Flot và có hiệu suất thấp hơn hiệu suất chấp nhận được với Internet Explorer (ví dụ: toàn bộ trình duyệt treo trong khoảng 20 giây trên hộp nhà phát triển của tôi trong khi vẽ đồ thị).

Flot sử dụng phần tử canvas để lập biểu đồ chỉ được hỗ trợ từ Internet Explorer 9+. Flot cung cấp hỗ trợ cho các phiên bản cũ hơn của Internet Explorer bằng cách sử dụng thư viện ExplorerCanvas. Thư viện này sử dụng VML, vẽ đồ họa bằng cách điều khiển các phần tử VML thông qua DOM.

Sử dụng Internet Explorer 8 script profiler Tôi đã khám phá ra hầu hết thời gian được thực hiện để hiển thị cốt truyện được gọi là số insertAdjacentHTML method gốc để tạo các phần tử VML. Bởi vì không có gì có thể được thực hiện để cải thiện hiệu suất của các cuộc gọi đến các phương thức bản địa mà thay vào đó tôi đã làm việc để giảm số lượng các điểm dữ liệu được vẽ (lần lượt giảm các phần tử VML được tạo ra trong DOM) để có được hiệu suất chấp nhận được.

Nếu bạn không cần hoặc quan tâm đến việc hỗ trợ cho các phiên bản cũ hơn của Internet Explorer khi bạn nên tìm Flot/Flotr có khả năng xử lý các tập dữ liệu lớn. Nhưng nếu bạn cần hỗ trợ các phiên bản này, hãy chuẩn bị sẵn sàng để chạy vào các vấn đề về hiệu năng khi lập biểu đồ các tập dữ liệu lớn.