Share - Vẽ Biểu đồ Trên Web Với Thư Viện D3.js | Gextend

• Home
• Forums New posts Search forums
• Resources Latest reviews Search resources
• Members Current visitors New profile posts Search profile posts
• What's new Featured content New posts New resources New profile posts Latest activity

Log in Register What's new Search

Search

Everywhere Threads This forum This thread Search titles only Note By: Search Advanced search…

• New posts
• Search forums

Menu Log in Register Install the app Install How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

• Home
• Forums
• Discussion
• Web
• JavaScript

You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. ShareVẽ biểu đồ trên web với thư viện D3.js

• Thread starter Thread starter filiallion
• Start date Start date 08/26/2019
• Tags Tags chart d3js javascript

filiallion

Administrator

Staff member Administrator Messages 590 Points 10 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: HTML: <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: JavaScript: 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: HTML: <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. You must log in or register to reply here. Share: Facebook X Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Email Share Link

• Home
• Forums
• Discussion
• Web
• JavaScript

Back Top