Xây dựng đồ thị động nhanh chóng trên D3 với Plottable.js

Miễn phí Thư viện D3.js chỉ là một trong số nhiều cho phép bạn tạo đồ họa tương tác trên trang. Trong khi D3 có lẽ là phổ biến nhất trong nhóm, học cách sử dụng nó không phải là nhiệm vụ dễ dàng.

Đó là lý do tại sao Plottable.js là một thư viện có giá trị Đây là một dự án nguồn mở miễn phí được xây dựng trên đỉnh D3.js, giúp mọi người dễ dàng tạo ra biểu đồ dữ liệu tương tác từ đầu.

Thư viện này xử lý tất cả các công việc bẩn thỉu, để bạn có thể tập trung vào các chi tiết cụ thể như dữ liệu. Plottable tạo mã thích hợp cho kích thước và vị trí của bất kỳ biểu đồ bạn chọn.

Mỗi biểu đồ có thành phần riêng trong Plottable nơi bạn có thể sao chép / dán mã mẫu để xây dựng lại biểu đồ trên của riêng bạn. Khi viết bài này, bạn có thể chọn từ 10 kiểu đồ thị lô, bao gồm biểu đồ thanh, biểu đồ hình tròn, sơ đồ phân tán và sơ đồ khu vực.

Bạn có thể xây dựng lại các thành phần riêng lẻ và tùy chỉnh cài đặt của họ một cách linh hoạt. Bằng cách này, bạn có thể dễ dàng thay đổi các yếu tố tương tác, màu sắc, hình động, vị trí, kích thước và bất cứ thứ gì bạn cần.

Các thư viện đầy đủ có sẵn trên GitHub nếu bạn muốn duyệt mã nguồn và tải xuống một bản sao.

Nhưng, cách tốt nhất để học là thông qua ví dụ. Đó là lý do tại sao bạn nên xem qua của họ đồ thị mẫu chạy Plottable để xem nó hoạt động như thế nào.

Mỗi đồ thị là tương tác đầy đủ, với mã nguồn để khởi động. Nếu bạn muốn xây dựng lại một biểu đồ tương tự, chỉ cần sao chép / dán mã JS và định dạng lại nếu cần.

Tôi có hai mục yêu thích cá nhân từ trang web của họ: Lịch nhiệt được mô phỏng theo bảng hoạt động của GitHub và Biểu đồ đồng bộ hóa với các tính năng lựa chọn năng động.

Nếu bạn chưa từng sử dụng D3.js trước đó thì bạn sẽ phải vật lộn để tìm hiểu thư viện này. Đặc biệt, bởi vì nó được viết bằng TypeScript, vì vậy có lẽ bạn cũng muốn chọn nó. Mã cuối cùng là được biên dịch thành ES5 JavaScript, vì vậy nó nên làm việc trong tất cả các trình duyệt chính.

Nếu bạn sẵn sàng lặn xuống hãy nhìn vào họ Trang hướng dẫn đầy đủ các tài nguyên tiện dụng. Bạn sẽ học mọi thứ bạn cần để bắt đầu với Plottable và tạo các biểu đồ dựa trên web động từ đầu.