Share Vẽ biểu đồ trên web với thư viện D3.js

[filiallion]

Language

Tiếng Việt

Để vẽ biểu đồ trên web, các bạn có rất nhiều thư viện từ JavaScript đến PHP hay các ngôn ngữ lập trình khác như C#, JSP. Tuy nhiên, việc sử dụng các thư viện JavaScript để vẽ biểu đồ là thuận tiện và linh động nhất. Bài viết này tôi giới thiệu với các bạn một thư viện JavaScript dùng để vẽ biểu đồ được rất nhiều các bạn lập trình viên web sử dụng đó là D3.js.

D3.js là một thư viện JavaScript được phát triển từ khá lâu và nhận được sự tin tưởng của rất nhiều các bạn lập trình viên bởi sự gọn nhẹ và linh hoạt của nó. Thư viện vẽ biểu đồ D3.js được phát triển bởi Mike Bostock và vẫn được duy trì, phát triển cho tới nay. Tôi cũng giải nghĩa rõ hơn của tên gọi D3.js (Hay gọi nhanh là D3) đó là cách chơi chữ của 3 từ Data-Driven Documents, D3 là lấy 3 chữ D từ các từ này.

Thư viện D3.js sẽ giúp các bạn trực quan hoá các dữ liệu thành các biểu đồ, hình ảnh giúp cho việc nhìn nhận, đánh giá tổng quan dữ liệu trở nên dễ dàng hơn rất nhiều so với các con số. Vì vậy, ngày nay các ứng dụng web thường hay tích hợp các biểu đồ vào website để phục vụ nhu cầu trực quan hoá dữ liệu này.

Để sử dụng thư viện D3.js, các bạn có thể tải nó tại đại chỉ https://github.com/d3/d3/zipball/master và tích hợp vào website với dòng mã lệnh HTML đơn giản như sau:

<script src="path/to/d3.v5.min.js"></script>

Phiên bản D3.js tôi sử dụng ở bài viết này là bản 5 mới nhất. Nếu các bạn đang lập trình với Nodejs thì các bạn có thể sử dụng gói D3.js dành cho Nodejs.

Bây giờ, các bạn có thể tạo một biểu đồ đơn giản như ví dụ mẫu sau:

var data = [10, 20, 100, 50, 150];
var barHeight = 30;
var bar = d3.select('svg')
            .selectAll('rect')
            .data(data)
            .enter()
            .append('rect')
            .attr('width', function(d) {
                return d;
            })
            .attr('height', barHeight - 1)
            .attr('transform', function(d, i) {
                return 'translate(0, ' + i * barHeight + ')';
            });

Các bạn cũng đừng quên tạo một SVG để hiển thị biểu đồ trên:

<svg width="300" height="600"></svg>

Các bạn có thể tìm hiểu thêm về thư viện D3.js tại địa chỉ https://d3js.org.