Hướng dẫn dùng varchart JavaScript
Thứ tư, 28/12/2016 | 00:00 GMT+7 Show D3.js , hoặc D3, là một thư viện JavaScript. Tên của nó là viết tắt của D ata- D riven D ocuments (3 “D” s), và nó được biết đến như một thư viện trực quan hóa dữ liệu động và tương tác cho web. Được phát hành lần đầu vào tháng 2 năm 2011, version 4 của D3 được phát hành vào tháng 6 năm 2016. Tại thời điểm viết bài, bản phát hành ổn định mới nhất là version 4.4 và nó đang liên tục được cập nhật. D3 sử dụng định dạng Đồ họa Vectơ có thể mở rộng hoặc SVG , cho phép bạn hiển thị các hình dạng, đường thẳng và tô có thể phóng to hoặc thu nhỏ mà không làm giảm chất lượng. Hướng dẫn này sẽ hướng dẫn bạn tạo biểu đồ thanh bằng thư viện JavaScript D3. Yêu cầuĐể tận dụng tối đa hướng dẫn này, bạn nên làm quen với ngôn ngữ lập trình JavaScript cũng như kiến thức về CSS và HTML. Mặc dù bạn sẽ sử dụng CSS để tạo kiểu D3, nhưng cần lưu ý rất nhiều CSS chuẩn hoạt động trên HTML hoạt động khác trên SVG - nghĩa là bạn sẽ sử dụng Ta sẽ sử dụng editor và trình duyệt web. Đối với mục đích thử nghiệm, bạn nên sử dụng một công cụ để kiểm tra và gỡ lỗi JavaScript, HTML và CSS như Công cụ dành cho nhà phát triển Firefox hoặc Công cụ dành cho nhà phát triển của Chrome . Bước 1 - Tạo file và tham chiếu D3Hãy bắt đầu bằng cách tạo một folder để lưu giữ tất cả các file của ta . Bạn có thể gọi nó là gì bạn muốn, ta sẽ gọi nó là D3-project ở đây. Khi nó được tạo, hãy chuyển vào folder .
Để sử dụng các khả năng của D3, bạn phải đưa file Hãy sử dụng Để download version nén tốt hơn để đưa vào dự án của bạn, hãy nhập:
Nếu bạn định đọc mã D3, có lẽ tốt hơn là bạn nên tải version không nén với khoảng trắng thân thiện với con người bằng lệnh :
Ta sẽ sử dụng file Vì D3 version 4 là module , bạn có thể giảm kích thước file bằng cách chỉ kéo các module bạn sẽ sử dụng vào. Với D3 được download , hãy cài đặt các file CSS và HTML của ta . Bạn có thể chọn bất kỳ editor nào bạn muốn
làm việc trên file này, chẳng hạn như
Ta sẽ bắt đầu với một khai báo CSS chuẩn để tạo kiểu trang ở 100% chiều cao và không có lề.
Bạn có thể lưu file CSS ngay bây giờ. Tiếp theo, ta sẽ tạo file JavaScript của bạn , ta sẽ đặt tên là
Bây giờ, hãy kết nối tất cả các phần tử này với một file HTML, mà ta sẽ gọi là
Ta có thể cài đặt file này giống như hầu hết các file HTML khác và bên trong nó, ta sẽ tham chiếu đến các barchart.html
Tệp HTML có thể được lưu và đóng ngay bây giờ. Bước 2 - Cài đặt SVG trong JavaScript Bây giờ ta có thể mở file
Hãy bắt đầu bằng cách thêm một mảng số, mà ta sẽ sử dụng làm cơ sở cho biểu đồ thanh của ta : barchart.js
Tiếp theo, ta cần tạo phần tử SVG. Đây là nơi ta sẽ đặt tất cả các hình dạng của ta . Trong D3, ta sử dụng Ta có thể làm điều này với dòng đơn
barchart.js
Nếu bây giờ ta tải Quay lại file JavaScript của ta , ta có thể chuỗi các thuộc tính cho SVG để làm cho nó có chiều cao và chiều rộng đầy đủ của trang web. Ta sẽ sử dụng barchart.js
Nếu bạn reload trang trong trình duyệt của bạn , bạn sẽ thấy một hình chữ nhật chiếm toàn màn hình khi bạn di chuột qua DOM. Bước 3 - Thêm hình chữ nhậtVới SVG của ta đã sẵn sàng để sử dụng, ta có thể bắt đầu thêm các hình chữ nhật của tập dữ liệu của ta vào file JavaScript. barchart.js
Giống như với Ta liên kết mảng hình chữ nhật này với dữ liệu được lưu trữ trong
Để thực sự thêm một hình chữ nhật cho mỗi mục trong vùng chọn (tương ứng với mảng dữ liệu), ta cũng sẽ thêm Nếu bạn reload trang của bạn bây giờ, bạn sẽ không thấy bất kỳ hình chữ nhật nào, nhưng nếu bạn kiểm tra DOM, bạn sẽ thấy 9 hình chữ nhật được xác định ở đó. Ta vẫn chưa cài đặt các thuộc tính cho các hình chữ nhật để hiển thị chúng, vì vậy hãy thêm các thuộc tính đó vào. Đặt thuộc tính cho hình dạng Ta có thể thêm các thuộc tính vào hình dạng giống như cách ta đã xác định các thuộc tính cho SVG, bằng cách sử dụng Hình chữ nhật của ta sẽ có 4 thuộc tính:
Vì vậy, nếu ta muốn các hình chữ nhật, chẳng hạn như cao 250 pixel, rộng 40 pixel, 25 pixel từ phía bên trái của trình duyệt và 50 pixel từ trên cùng, ta sẽ viết mã của bạn như sau: barchart.js
Nếu ta làm mới trình duyệt, ta sẽ thấy tất cả các hình chữ nhật chồng lên nhau: Theo mặc định, các hình trong D3 được tô màu đen, nhưng ta có thể sửa đổi điều đó sau đó vì trước tiên ta cần giải quyết vị trí và kích thước của các hình chữ nhật. Tạo hình chữ nhật phản ánh dữ liệuHiện tại, tất cả các hình chữ nhật trong mảng của ta có cùng vị trí dọc theo trục X và không đại diện cho dữ liệu về chiều cao. Để sửa đổi vị trí và kích thước của các hình chữ nhật, ta cần giới thiệu các hàm cho một số thuộc tính của ta . Thêm các chức năng sẽ làm cho giá trị động hơn là thủ công. Hãy bắt đầu với việc sửa đổi thuộc tính
Ta sẽ thay thế con số 25 pixel bằng một hàm. Ta sẽ chuyển hai biến được định nghĩa bởi D3 cho JavaScript sẽ lặp qua
Tuy nhiên, nếu ta chạy mã ngay bây giờ, ta sẽ thấy rằng các hình chữ nhật nằm ngang so với phía bên trái của trình duyệt, vì vậy hãy thêm một số khoảng cách bổ sung ở đó, chẳng hạn như 25 pixel từ cạnh. Bây giờ mã đầy đủ của ta sẽ trông như thế này: barchart.js
Và nếu ta làm mới trình duyệt tại thời điểm này, ta sẽ thấy một cái gì đó trông giống như sau: Bây giờ ta có các hình chữ nhật được đặt cách nhau dọc theo trục X, đại diện cho từng mục trong mảng của ta . Tiếp theo, hãy để chiều cao của các hình chữ nhật phản ánh dữ liệu trong mảng. Bây giờ ta sẽ làm việc với thuộc tính
Nếu bạn chạy mã ngay bây giờ, bạn sẽ nhận thấy hai điều. Đầu tiên là các hình chữ nhật khá nhỏ, và thứ hai là chúng được gắn vào phần trên cùng của biểu đồ hơn là phần dưới cùng. Để giải quyết kích thước nhỏ của hình chữ nhật, hãy nhân với
Bây giờ kích thước của các hình chữ nhật đã lớn hơn, nhưng chúng vẫn được hiển thị từ trên xuống dưới. Các trình duyệt thường đọc các trang web từ trên cùng bên trái đến dưới cùng bên phải, trong khi ta đọc biểu đồ thanh từ dưới lên trên. Để định vị lại các hình chữ nhật, ta sẽ sửa đổi thuộc tính , ta sẽ sử dụng
Hãy xem mã JavaScript đầy đủ của ta : barchart.js
Đến đây, khi ta reload trang của bạn , ta sẽ thấy một biểu đồ thanh mà ta có thể đọc từ dưới lên trên: Bây giờ, ta có thể làm việc để tạo kiểu cho biểu đồ. Bước 4 - Tạo kiểu với D3Ta sẽ làm việc với file CSS của bạn để tạo kiểu cho các hình dạng D3 của ta , nhưng trước tiên, để làm cho công việc này dễ dàng hơn, ta sẽ đặt tên lớp cho các hình chữ nhật trong file JavaScript mà ta có thể tham chiếu trong file CSS của bạn . Thêm một lớp cũng giống như thêm bất kỳ thuộc tính nào khác bằng cách sử dụng ký hiệu dấu chấm. Ta sẽ gọi là class
Ta có thể thêm thuộc tính này bất cứ nơi nào ta muốn. Giữ nó làm thuộc tính đầu tiên có thể giúp bạn tham khảo dễ dàng hơn trong file CSS của ta . barchart.js
Bây giờ, hãy chuyển sang style.css
Ta có thể bắt đầu sửa đổi các hình chữ nhật của bạn bằng cách thay đổi màu tô của chúng, tham chiếu đến lớp style.css
Ở đây, ta đã làm cho các hình chữ nhật có màu xanh lam và ta có thể gán cho chúng một mã màu hex, như trong:
Đến đây, các hình chữ nhật của ta trông như thế này: Ta có thể cung cấp các giá trị bổ sung cho các hình chữ nhật, chẳng hạn như style.css
Điều này sẽ cung cấp cho các hình chữ nhật của ta một đường viền màu đen có chiều rộng là 5 pixel. Ngoài ra, ta có thể thêm một chút tương tác vào biểu đồ của bạn bằng cách thêm kiểu cho màu thanh để thay đổi khi di chuột:
Bây giờ, khi ta di chuột qua một trong các hình chữ nhật, hình chữ nhật cụ thể đó sẽ thay đổi màu đỏ: Ngoài ra, bạn có thể tạo kiểu cho các hình dạng trong file JavaScript của bạn bằng cách thêm các thuộc tính bổ sung. Trong khối hình chữ nhật, ta sẽ viết những thuộc tính này giống như các thuộc tính barchart.js
Sự lựa chọn là tùy thuộc vào bạn cách bạn quyết định tạo kiểu cho các hình dạng của bạn và trong file nào. Trong ví dụ này, ta sẽ làm việc trong style.css
Khi làm việc với màu sắc trên web, điều quan trọng là phải ghi nhớ đối tượng của bạn và làm việc để bao gồm các màu có thể truy cập phổ biến nhất có thể. Để tìm hiểu thêm về các cân nhắc về khả năng tiếp cận màu sắc, bạn có thể xem Acessibility & Me . Bước 5 - Thêm nhãnBước cuối cùng của ta là thêm một số điểm đánh dấu có thể định lượng vào biểu đồ của ta dưới dạng nhãn. Các nhãn này sẽ tương ứng với các số trong mảng của ta . Thêm văn bản tương tự như thêm các hình dạng hình chữ nhật mà ta đã làm ở trên. Ta cần chọn văn bản, sau đó nối văn bản đó vào SVG. Ta cũng
sẽ gắn nó với barchart.js
Khi ta làm mới trình duyệt của bạn , ta sẽ không thấy bất kỳ văn bản nào trên trang, nhưng ta sẽ thấy lại nó trong DOM: Nếu bạn di chuột qua các dòng văn bản trong DOM, bạn sẽ thấy rằng tất cả văn bản đều nằm ở đầu trang, trong đó X và Y bằng 0. Ta sẽ sửa đổi vị trí bằng cách sử dụng cùng các công thức hàm mà ta được sử dụng cho các hình chữ nhật bằng cách thêm các thuộc tính. barchart.js
Khi bạn tải trang web ngay bây giờ, bạn sẽ thấy các số trôi nổi trên các thanh. Cần lưu ý vì đây là SVG chứ không phải hình ảnh, bạn có thể chọn văn bản giống như với bất kỳ văn bản nào khác mà bạn thấy trên trang. Từ đây, bạn có thể bắt đầu định vị lại các số bằng cách sửa đổi công thức hàm. Bạn có thể cần giữ chúng nổi trên các thanh, ví dụ: barchart.js
Ngoài ra, bạn có thể đặt các số nổi trên các hình chữ nhật bằng cách sửa đổi vị trí của chúng theo trục Y. Ta cũng muốn làm cho điều này dễ đọc hơn, vì vậy hãy thêm một lớp mà ta có thể truy cập từ barchart.js
Trong style.css
Bạn có thể sửa đổi văn bản nhiều như bạn muốn thông qua định vị và tạo kiểu. Ví dụ: bạn cũng có thể cần thay đổi thuộc tính Cải tiến mã và mã đã hoàn thànhĐến đây, bạn sẽ có một biểu đồ thanh hoạt động đầy đủ được hiển thị trong thư viện D3 của JavaScript. Hãy xem xét tất cả các file mã của ta . barchart.html
style.css
barchart.js
Mã này đang hoạt động hoàn toàn, nhưng bạn có thể làm rất nhiều điều để cải thiện mã. Ví dụ: bạn có thể tận dụng phần tử group SVG để group các phần tử SVG lại với nhau, cho phép bạn sửa đổi văn bản và hình chữ nhật của bạn trong ít dòng mã hơn. Bạn cũng có thể truy cập dữ liệu theo nhiều cách khác nhau. Ta đã sử dụng một mảng để lưu giữ dữ liệu của bạn , nhưng bạn có thể cần trực quan hóa dữ liệu mà bạn đã có quyền truy cập và nó có thể nhiều dữ liệu hơn đáng kể so với những gì sẽ hoạt động tốt trong một mảng. D3 sẽ cho phép bạn làm việc với một số loại file dữ liệu khác nhau:
Ví dụ: bạn có thể có file JSON trong folder trang web của bạn và kết nối nó với file JavaScript
Bạn cũng có thể kết hợp thư viện D3 với các tính năng tương tác khác mà bạn có thể đã biết từ vanilla JavaScript. Kết luậnHướng dẫn này đi qua việc tạo biểu đồ thanh trong thư viện JavaScript D3. Bạn có thể tìm hiểu thêm về d3.js bằng cách truy cập API D3 trên GitHub . Các ngôn ngữ lập trình khác cung cấp các cách khác để trực quan hóa dữ liệu không giới hạn trong trình duyệt web. Từ đây, bạn có thể học cách sử dụng matplotlib để vẽ dữ liệu bằng Python . Tags: Các tin liên quan Bắt đầu với Trực
quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3 |