Tạo biểu đồ dữ liệu dựa trên JavaScript với Billboard.js

Đồ họa và hình ảnh đóng một vai trò quan trọng trong việc cải thiện nội dung web. Với công nghệ hiện đại, thật dễ dàng để thêm hình ảnh tùy chỉnh như biểu tượng SVG vào trang của bạn.

Nhưng một hình ảnh đáng ngạc nhiên khác mà bạn có thể xây dựng từ đầu là biểu đồ web.

Điều này có thể giúp bạn vẽ đồ thị dữ liệu một cách trực quan để khách truy cập của bạn có thể nhanh chóng lướt qua thông tin thích hợp. Và thay vì tự mình viết một biểu đồ, bạn có thể sử dụng một thư viện như Billboard.js để thực hiện tất cả các công việc nặng nhọc.

Điều này thực sự được xây dựng trên đỉnh D3, một thư viện trực quan hóa dữ liệu JavaScript. Nó dễ dàng là thứ phổ biến nhất ngoài kia làm cho nó trở thành sự phụ thuộc an toàn nhất mà bạn có thể yêu cầu.

Với Billboard.js, bạn có thể truy cập API D3 một cách nhanh chóng và dễ dàng. Mục tiêu chính của Billboard là dễ sử dụng, làm cho nó có thể truy cập được cho bất cứ ai. Mặc dù nó có ích để có một số kinh nghiệm với JavaScript, nhưng bạn chắc chắn không cần phải là một chuyên gia.

Chỉ cần lưu ý toàn bộ cơ sở mã sử dụng cú pháp ES6 có thể gây nhầm lẫn cho các nhà phát triển JS ít kinh nghiệm.

Miễn là bạn biết cách biên dịch mã bạn sẽ ổn. Chúng tôi thực sự đã đề cập đến một vài tính năng hấp dẫn từ ES6 nếu bạn muốn tìm hiểu thêm.

Tất cả các chi tiết kỹ thuật về plugin này có vẻ tốt. Nhưng có lẽ bạn chỉ muốn biết những gì nó có thể làm.

Hãy xem trang demo và nhấp qua một số ví dụ trực tiếp.

Bạn sẽ tìm thấy mọi thứ từ biểu đồ hình tròn đến biểu đồ phân tán và biểu đồ thanh hoạt hình tùy chỉnh.

Với Billboard.js bạn có toàn quyền kiểm soát dữ liệu của bạn. Bạn kiểm soát cách nó xuất hiện trên trang, cách cấu trúc và loại tính năng UI / UX bạn thêm (nếu có).

Đây thực sự là một thư viện biểu đồ tuyệt vời và là một trong những thư viện dễ nhận nhất. Hãy xem repo GitHub của dự án để tìm hiểu thêm.

Bạn cũng có thể tìm hiểu đoạn trích này trên CodePen nếu bạn muốn đồ chơi có mã trong trình duyệt của bạn.