Nhãn dòng mới html

Thực hiện theo hướng dẫn này để làm quen với tất cả các khái niệm chính của Biểu đồ. js. các loại và thành phần biểu đồ, bộ dữ liệu, tùy chỉnh, plugin, thành phần và rung chuyển cây. Đừng ngần ngại theo các liên kết trong văn bản

Chúng ta sẽ xây dựng một Biểu đồ. js trực quan hóa dữ liệu với một vài biểu đồ từ đầu

Trong một thư mục mới, tạo tệp package.json với nội dung sau

Các ứng dụng giao diện người dùng hiện đại thường sử dụng các gói mô-đun JavaScript, vì vậy chúng tôi đã chọn Parcel (mở cửa sổ mới) làm công cụ xây dựng không cấu hình tuyệt vời. Chúng tôi cũng đang cài đặt Biểu đồ. js v4 và ứng dụng khách JavaScript cho Cube (mở cửa sổ mới), API nguồn mở cho các ứng dụng dữ liệu mà chúng tôi sẽ sử dụng để tìm nạp dữ liệu trong thế giới thực (sẽ nói thêm về điều đó sau)

Chạy npm install, yarn install hoặc pnpm install để cài đặt các phụ thuộc, sau đó tạo thư mục src. Trong thư mục đó, chúng tôi sẽ cần một tệp index.html rất đơn giản

Như bạn có thể thấy, Biểu đồ. js yêu cầu đánh dấu tối thiểu. một thẻ canvas với một id mà chúng tôi sẽ tham khảo biểu đồ sau. Theo mặc định, Biểu đồ. biểu đồ js phản hồi nhanh và chiếm toàn bộ vùng chứa kèm theo. Vì vậy, chúng tôi đặt chiều rộng của div để kiểm soát chiều rộng biểu đồ

Cuối cùng, hãy tạo tệp src/acquisitions.js với nội dung sau

Hãy xem qua mã này

• Chúng tôi nhập khẩu npm install0, Biểu đồ chính. js, từ đường dẫn npm install1 đặc biệt. Nó tải tất cả Biểu đồ có sẵn. js (rất thuận tiện) nhưng không cho phép rung cây. Chúng tôi sẽ giải quyết vấn đề đó sau
• Chúng tôi khởi tạo một phiên bản npm install0 mới và cung cấp hai đối số. phần tử canvas nơi biểu đồ sẽ được hiển thị và đối tượng tùy chọn
• Chúng tôi chỉ cần cung cấp một loại biểu đồ (_______1_______3) và cung cấp npm install4 bao gồm npm install5 (thường là mô tả bằng số hoặc văn bản về các điểm dữ liệu) và một mảng gồm npm install6 (Biểu đồ. js hỗ trợ nhiều bộ dữ liệu cho hầu hết các loại biểu đồ). Mỗi bộ dữ liệu được chỉ định bằng một npm install7 và chứa một mảng các điểm dữ liệu
• Hiện tại, chúng tôi chỉ có một vài mục dữ liệu giả. Vì vậy, chúng tôi trích xuất các thuộc tính npm install8 và npm install9 để tạo ra các mảng của npm install5 và các điểm dữ liệu trong tập dữ liệu duy nhất

Đã đến lúc chạy ví dụ với yarn install1, yarn install2 hoặc yarn install3 và điều hướng đến máy chủ cục bộ. 1234 (mở cửa sổ mới) trong trình duyệt web của bạn

Chỉ với vài dòng code, chúng ta đã có một biểu đồ với rất nhiều tính năng. chú thích, đường lưới, dấu tích và chú giải công cụ được hiển thị khi di chuột. Làm mới trang web một vài lần để thấy rằng biểu đồ cũng. Hãy thử nhấp vào nhãn "Số lần chuyển đổi theo năm" để thấy rằng bạn cũng có thể chuyển đổi chế độ hiển thị của tập dữ liệu (đặc biệt hữu ích khi bạn có nhiều tập dữ liệu)

Tùy chỉnh đơn giản

Hãy xem biểu đồ như thế nào. biểu đồ js có thể được tùy chỉnh. Đầu tiên, hãy tắt hoạt ảnh để biểu đồ xuất hiện ngay lập tức. Thứ hai, hãy ẩn chú thích và chú giải công cụ vì chúng tôi chỉ có một tập dữ liệu và dữ liệu khá tầm thường

Thay thế lệnh gọi yarn install4 trong src/acquisitions.js bằng đoạn mã sau

Như bạn có thể thấy, chúng tôi đã thêm thuộc tính yarn install6 vào đối số thứ hai—đó là cách bạn có thể chỉ định tất cả các loại tùy chọn tùy chỉnh cho Biểu đồ. js. Với cờ boolean được cung cấp qua yarn install7. Hầu hết các tùy chọn trên toàn biểu đồ (e. g. , độ phản hồi hoặc tỷ lệ pixel của thiết bị) được định cấu hình như thế này

Chú thích và chú giải công cụ được ẩn bằng các cờ boolean được cung cấp trong các phần tương ứng trong yarn install8. Lưu ý rằng một số Biểu đồ. các tính năng js được trích xuất thành plugin. khép kín, các đoạn mã riêng biệt. Một vài trong số chúng có sẵn như là một phần của Biểu đồ. js (mở cửa sổ mới), các plugin khác được duy trì độc lập và có thể nằm trong danh sách tuyệt vời (mở cửa sổ mới) gồm các plugin, tích hợp khung và các loại biểu đồ bổ sung

Bạn sẽ có thể xem biểu đồ tối giản được cập nhật trong trình duyệt của mình

Dữ liệu trong thế giới thực

Với dữ liệu được mã hóa cứng, kích thước hạn chế, không thực tế, thật khó để thể hiện hết tiềm năng của Biểu đồ. js. Hãy nhanh chóng kết nối với API dữ liệu để làm cho ứng dụng mẫu của chúng ta gần hơn với trường hợp sử dụng sản xuất

Hãy tạo tệp yarn install9 với nội dung sau

Hãy xem những gì đang xảy ra ở đó

• Chúng tôi pnpm install0 thư viện ứng dụng khách JavaScript cho Cube (mở cửa sổ mới), API nguồn mở cho các ứng dụng dữ liệu, định cấu hình nó bằng URL API (pnpm install1) và mã thông báo xác thực (pnpm install2) và cuối cùng khởi tạo ứng dụng khách (pnpm install3)
• Cube API được lưu trữ trong Cube Cloud (mở cửa sổ mới) và được kết nối với cơ sở dữ liệu có bộ dữ liệu công khai (mở cửa sổ mới) gồm ~140.000 bản ghi đại diện cho tất cả các tác phẩm nghệ thuật trong bộ sưu tập của Bảo tàng Nghệ thuật Hiện đại (mở cửa sổ mới) ở . Chắc chắn, một bộ dữ liệu trong thế giới thực hơn những gì chúng ta có bây giờ
• Chúng tôi xác định một số chức năng không đồng bộ để lấy dữ liệu từ API. pnpm install4 và pnpm install5. Cái đầu tiên trả về số lượng tác phẩm nghệ thuật theo năm mua, cái còn lại trả về số lượng tác phẩm nghệ thuật cho mỗi cặp chiều rộng-chiều cao (chúng ta sẽ cần nó cho một biểu đồ khác)
• Hãy xem pnpm install4. Đầu tiên, chúng tôi tạo một truy vấn dựa trên JSON khai báo trong biến pnpm install7. Như bạn có thể thấy, chúng tôi xác định rằng cứ mỗi pnpm install8 chúng tôi muốn nhận được npm install9 tác phẩm nghệ thuật; . e. , không phải là không xác định);
• Thứ hai, chúng tôi tìm nạp src2 bằng cách gọi src3 và ánh xạ nó tới một mảng đối tượng với các thuộc tính npm install8 và npm install9 mong muốn

Bây giờ, hãy cung cấp dữ liệu trong thế giới thực vào biểu đồ của chúng ta. Vui lòng áp dụng một số thay đổi đối với src/acquisitions.js. thêm một lần nhập và thay thế định nghĩa của biến npm install4

Xong. Bây giờ, biểu đồ của chúng tôi với dữ liệu trong thế giới thực trông như thế này. Hình như có điều gì đó thú vị đã xảy ra vào năm 1964, 1968 và 2008

Chúng ta đã hoàn thành với biểu đồ thanh. Hãy thử biểu đồ khác. loại biểu đồ js

Các tùy chỉnh khác

Đồ thị. js hỗ trợ nhiều loại biểu đồ phổ biến

Ví dụ: Biểu đồ bong bóng cho phép hiển thị ba chiều dữ liệu cùng một lúc. các vị trí trên trục src8 và src9 biểu thị hai chiều và chiều thứ ba được biểu thị bằng kích thước của các bong bóng riêng lẻ

Để tạo biểu đồ, hãy dừng ứng dụng đang chạy, sau đó đi đến index.html0 và bỏ ghi chú hai dòng sau

Sau đó, tạo tệp index.html1 với nội dung sau

Có lẽ, mọi thứ khá đơn giản ở đó. chúng tôi lấy dữ liệu từ API và hiển thị biểu đồ mới với loại index.html2, chuyển ba chiều dữ liệu dưới dạng các thuộc tính (bán kính) src8, src9 và index.html5

Bây giờ, hãy đặt lại bộ nhớ cache bằng index.html6 và khởi động lại ứng dụng bằng yarn install1, yarn install2 hoặc yarn install3. Chúng ta có thể xem lại biểu đồ mới ngay bây giờ

Chà, nó trông không đẹp

Trước hết, biểu đồ không phải là hình vuông. Chiều rộng và chiều cao của tác phẩm nghệ thuật đều quan trọng như nhau, vì vậy chúng tôi cũng muốn làm cho chiều rộng của biểu đồ bằng với chiều cao của nó. Theo mặc định, Biểu đồ. js có tỷ lệ khung hình là 1 (đối với tất cả các biểu đồ hướng tâm, e. g. , biểu đồ vành khuyên) hoặc 2 (cho tất cả các biểu đồ còn lại). Hãy sửa đổi tỷ lệ khung hình cho biểu đồ của chúng tôi

Bây giờ trông tốt hơn nhiều

Tuy nhiên, nó vẫn chưa lý tưởng. Trục ngang kéo dài từ 0 đến 500 trong khi trục dọc kéo dài từ 0 đến 450. Theo mặc định, Biểu đồ. js tự động điều chỉnh phạm vi (giá trị tối thiểu và tối đa) của các trục thành các giá trị được cung cấp trong tập dữ liệu, để biểu đồ “phù hợp” với dữ liệu của bạn. Rõ ràng, bộ sưu tập MoMa không có các tác phẩm nghệ thuật có chiều cao từ 450 đến 500 cm. Hãy sửa đổi cấu hình trục cho biểu đồ của chúng ta để tính đến điều đó

Tuyệt vời. Kìa biểu đồ được cập nhật

Tuy nhiên, có một điều nữa. những con số này là gì? . Hãy áp dụng a cho cả hai trục để làm rõ mọi thứ. Chúng tôi sẽ cung cấp chức năng gọi lại sẽ được gọi để định dạng từng giá trị đánh dấu. Đây là cấu hình trục được cập nhật

Hoàn hảo, bây giờ chúng ta có các đơn vị phù hợp trên cả hai trục

Nhiều bộ dữ liệu

Đồ thị. js vẽ từng tập dữ liệu một cách độc lập và cho phép áp dụng các kiểu tùy chỉnh cho chúng

Hãy nhìn vào biểu đồ. có một “dòng” bong bóng có thể nhìn thấy với các tọa độ src8 và src9 bằng nhau đại diện cho các tác phẩm nghệ thuật hình vuông. Sẽ thật tuyệt nếu đặt những bong bóng này vào tập dữ liệu của riêng chúng và tô màu chúng theo cách khác. Ngoài ra, chúng ta cũng có thể tách các tác phẩm nghệ thuật “cao hơn” khỏi các tác phẩm “rộng hơn” và tô màu chúng theo cách khác

Đây là cách chúng ta có thể làm điều đó. Thay thế npm install6 bằng đoạn mã sau

Như bạn có thể thấy, chúng tôi xác định ba bộ dữ liệu với các nhãn khác nhau. Mỗi bộ dữ liệu có phần dữ liệu riêng được trích xuất với canvas3. Giờ đây, chúng khác biệt về mặt trực quan và như bạn đã biết, bạn có thể chuyển đổi mức độ hiển thị của chúng một cách độc lập

Ở đây ta dựa vào bảng màu mặc định. Tuy nhiên, hãy nhớ rằng mọi loại biểu đồ đều hỗ trợ rất nhiều thứ mà bạn có thể thoải mái tùy chỉnh

bổ sung

Khác—và rất mạnh mẽ. —cách tùy chỉnh Biểu đồ. js là sử dụng plugin. Bạn có thể tìm thấy một số trong hoặc tạo những cái đặc biệt của riêng bạn. Trên biểu đồ. js, đó là thành ngữ và dự kiến ​​sẽ tinh chỉnh các biểu đồ bằng các plugin. Ví dụ: bạn có thể tùy chỉnh nền canvas hoặc thêm đường viền cho nền bằng các plugin đặc biệt đơn giản. Hãy thử cái sau

Các plugin có API mở rộng, nhưng tóm lại, plugin được định nghĩa là một đối tượng có canvas4 và một hoặc nhiều hàm gọi lại được xác định trong các điểm mở rộng. Chèn đoạn mã sau vào trước và thay cho lệnh gọi yarn install4 trong index.html1

Như bạn có thể thấy, trong plugin canvas7 này, chúng tôi có được bối cảnh canvas, lưu trạng thái hiện tại của nó, áp dụng kiểu, vẽ hình chữ nhật xung quanh khu vực biểu đồ và khôi phục trạng thái canvas. Chúng tôi cũng chuyển phần bổ trợ trong yarn install8 nên phần bổ trợ này chỉ áp dụng cho biểu đồ cụ thể này. Chúng tôi cũng chuyển các tùy chọn phần bổ trợ trong canvas9;

Biểu đồ bong bóng của chúng tôi bây giờ trông lạ mắt hơn

rung cây

Trong quá trình sản xuất, chúng tôi cố gắng gửi càng ít mã càng tốt để người dùng cuối có thể tải các ứng dụng dữ liệu của chúng tôi nhanh hơn và có trải nghiệm tốt hơn. Để làm được điều đó, chúng ta sẽ cần áp dụng tính năng rung cây (mở cửa sổ mới), một thuật ngữ ưa thích để xóa mã không sử dụng khỏi gói JavaScript

Đồ thị. js hỗ trợ đầy đủ tính năng rung cây với thiết kế thành phần của nó. Bạn có thể đăng ký tất cả Biểu đồ. js cùng một lúc (thuận tiện khi bạn tạo mẫu) và đưa chúng đi kèm với ứng dụng của bạn. Hoặc, bạn chỉ có thể đăng ký các thành phần cần thiết và nhận gói tối thiểu, kích thước nhỏ hơn nhiều

Hãy kiểm tra ứng dụng ví dụ của chúng tôi. Kích thước gói là gì? . Trong một vài phút, bạn sẽ nhận được một cái gì đó như thế này

Chúng ta có thể thấy Biểu đồ đó. js và các phần phụ thuộc khác được nhóm lại với nhau trong một tệp 265 KB

Để giảm kích thước gói, chúng tôi sẽ cần áp dụng một vài thay đổi đối với src/acquisitions.js và index.html1. Trước tiên, chúng tôi sẽ cần xóa câu lệnh nhập sau khỏi cả hai tệp. id5

Thay vào đó, hãy chỉ tải các thành phần cần thiết và “đăng ký” chúng với Chart. js sử dụng id6. Đây là những gì chúng ta cần trong src/acquisitions.js

Và đây là đoạn trích cho index.html1

Bạn có thể thấy rằng, ngoài lớp npm install0, chúng tôi cũng đang tải bộ điều khiển cho loại biểu đồ, tỷ lệ và các thành phần biểu đồ khác (e. g. , thanh hoặc điểm). Bạn có thể xem tất cả các thành phần có sẵn trong

Ngoài ra, bạn có thể theo dõi Biểu đồ. lời khuyên js trong bảng điều khiển. Ví dụ: nếu bạn quên nhập div0 cho biểu đồ thanh của mình, bạn sẽ thấy thông báo sau trong bảng điều khiển của trình duyệt

Hãy nhớ kiểm tra cẩn thận hàng nhập khẩu từ npm install1 khi chuẩn bị đơn đăng ký sản xuất. Chỉ cần một lần nhập như thế này để vô hiệu hóa rung cây một cách hiệu quả

Bây giờ, hãy kiểm tra ứng dụng của chúng ta một lần nữa. Chạy id1 và bạn sẽ nhận được một cái gì đó như thế này

Bằng cách chỉ nhập và đăng ký các thành phần được chọn, chúng tôi đã loại bỏ hơn 56 KB mã không cần thiết. Cho rằng các phần phụ thuộc khác chiếm ~50 KB trong gói, tính năng rung cây giúp loại bỏ ~25% Biểu đồ. js từ gói cho ứng dụng ví dụ của chúng tôi

Bước tiếp theo

Bây giờ bạn đã quen thuộc với tất cả các khái niệm chính của Biểu đồ. js. các loại và thành phần biểu đồ, bộ dữ liệu, tùy chỉnh, plugin, thành phần và rung chuyển cây

Vui lòng xem lại nhiều ví dụ về biểu đồ trong tài liệu và kiểm tra danh sách tuyệt vời (mở cửa sổ mới) của Biểu đồ. js và các loại biểu đồ bổ sung cũng như (e. g. , Phản ứng, Vue, Svelte, v.v. ). Ngoài ra, đừng ngần ngại tham gia Chart. js Slack (mở cửa sổ mới) và làm theo Biểu đồ. js trên Twitter (mở cửa sổ mới)