Hướng dẫn javascript tree library - thư viện cây javascript
|
Đã đến lúc mở rộng kho công cụ trực quan hóa dữ liệu của bạn với một loại sơ đồ có thể được triển khai với thư viện sơ đồ DHTMLX. Chúng tôi sẵn sàng chia sẻ với bạn một hướng dẫn toàn diện về cách sản xuất sơ đồ cây JavaScript. Tất cả bạn phải làm là tải xuống phiên bản dùng thử của thư viện sơ đồ của chúng tôi và tuân thủ các hướng dẫn chi tiết được cung cấp trong bài đăng này. Sơ đồ cây là gìSơ đồ cây là một công cụ được sử dụng rộng rãi cho phép trình bày đồ họa các loại dữ liệu khác nhau trong cấu trúc phân cấp hoặc giống như cây. Nó thường bao gồm các phần tử cây (các nút) được nối với nhau với các đường kết nối (nhánh), minh họa một cách sinh động các mối quan hệ giữa con cái giữa các nút. Sử dụng loại sơ đồ này, bạn có thể tận hưởng khái niệm biểu diễn dữ liệu đơn giản, khả năng dễ dàng theo dõi các phụ thuộc giữa các yếu tố sơ đồ và độ rõ của thông tin được cung cấp. Nhờ sự kết hợp giữa đơn giản và khả năng thích ứng cao, sơ đồ cây JavaScript (cũng được đặt tên là đồ thị cây) đã trở nên phổ biến trong các lĩnh vực ứng dụng khác nhau như:
Cây gia đình JavaScriptNgoài việc sử dụng rộng rãi trong hệ thống phân cấp tổ chức, sơ đồ cây là phổ biến trong gia phả để trực quan hóa cây gia đình. Một cây gia đình JavaScript là một loại sơ đồ dành cho việc trình bày trực quan các mối quan hệ họ hàng và trái phiếu thế hệ trong một gia đình. Các sơ đồ này có thể được sử dụng không chỉ trong các ngành học như lịch sử hoặc gia phả mà còn bởi những người bình thường quan tâm đến tổ tiên của họ. Ví dụ trên mô tả một phần của cây gia đình hoàng gia Anh với dòng kế tiếp được làm nổi bật trong màu đỏ. Ví dụ về sơ đồ cây javascript của dhtmlx Chúng ta hãy xem xét kỹ hơn về ví dụ của sơ đồ cây JavaScript được tạo bởi thư viện sơ đồ DHTMLX. Biểu đồ trên là một biểu đồ org, hiển thị cấu trúc tổ chức phân cấp của một tổ chức y tế. Nó đi kèm với các hình dạng tùy chỉnh bao gồm thông tin trực quan và văn bản về nhân viên y tế: ảnh bác sĩ, tên, vị trí, trường cho thông tin liên lạc (số điện thoại và email) cũng như biểu tượng và nhãn. Các đầu nối thẳng và trực giao (chi nhánh) thể hiện cấu trúc báo cáo nhân viên. Cách tạo sơ đồ cây JavaScript với DHTMLXBây giờ chúng tôi sẽ hiểu rõ hơn về chuỗi các hành động được thực hiện với thư viện JavaScript của chúng tôi để vẽ sơ đồ cây như trong ví dụ trên. 1. Khởi tạo sơ đồ cây JavaScript: & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; const sơ đồ = new dhx.diagram ("sơ đồ", {& nbsp; & nbsp; & nbsp; type: "org", & nbsp; & nbsp; & nbsp; defaultShapetype: "mẫu" & nbsp; & nbsp;DOCTYPE html> Các bước đầu tiên phải được thực hiện trước khi khởi tạo như sau:
Sau đó gọi cho hàm tạo DHX.Diagram để thực hiện việc khởi tạo sơ đồ cây của bạn. Hàm hàm tạo đi kèm với hai tham số: một thùng chứa đã được tạo và một đối tượng có thuộc tính cấu hình. Trong đối tượng cấu hình, bạn phải xác định thuộc tính loại: org org để tạo biểu đồ org, đây là một loại sơ đồ cây để hiển thị phân cấp tổ chức. Ngoài ra, bạn cần chỉ định loại hình dạng sơ đồ thông qua thuộc tính DefaultShapetype.dhx.Diagram constructor to carry out the initialization of your tree diagram. The constructor function comes with two parameters: an already created container and an object with configuration properties. In the configuration object, you have to define the type:”org” property to create an org chart, which is a kind of a tree diagram for showing the organization hierarchy. Besides, you need to specify the type of diagram shapes via the defaultShapeType property. 2. Đặt cấu hình mặc định cho hình dạng sơ đồ: const mặc định = {& nbsp; & nbsp; & nbsp; Chiều cao: 115, & NBSP; & nbsp; & nbsp; chiều rộng: 330 & nbsp;}; defaults = { Bạn có thể tăng tốc quá trình tạo sơ đồ cây JavaScript của mình từ đầu bằng cách áp dụng cấu hình mặc định. Nó cho phép bạn đặt các đặc điểm chung của các yếu tố cụ thể cho tất cả các hình dạng cùng một lúc. Ví dụ của chúng tôi về sơ đồ cây bao gồm 12 nút có cùng kích thước (115 x 330). Vì vậy, chúng tôi có thể chỉ định chiều cao và chiều rộng mặc định cho chúng.defaults config. It enables you to set common characteristics of specific elements for all shapes at once. Our example of the tree diagram consists of 12 nodes with the same dimensions (115 x 330). So, we can specify the default height and width for them. 3. Tạo một mẫu cho các hình dạng tùy chỉnh: const template = ({ảnh, tên, bài, điện thoại, mail}) => (`& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; template = ({ photo, name, post, phone, mail }) => (` When it comes to the creation of a custom shape for your tree diagram, the first thing you should do is set up an HTML template for shapes. We apply the ES6+ standard for this purpose.You can define all required attributes of custom shapes via this template:
4. Add shapes to the tree diagram: diagram.addShape("template",
{ The following step will be the addition of custom shapes to your JavaScript tree graph. It can be done with the addShape method. This simple method enables you to swiftly add various shapes utilizing templates and the default configuration of shapes. 5. Prepare and parse data into the diagram: diagram.data.parse(data);data.parse(data); const data = [ Để lấp đầy sơ đồ cây của bạn bằng nội dung, bạn phải áp dụng phương thức phân tích cú pháp.parse method. 6. Sửa đổi sự xuất hiện của các yếu tố cụ thể trong biểu đồ cây JavaScript của bạn: & nbsp; .DHX-Diagram-demo_personal-card {& nbsp; & nbsp; Chiều cao: 100%; & nbsp; & nbsp; Hiển thị: Flex; & nbsp; & nbsp; Sắp xếp mục: Trung tâm; & nbsp; & nbsp; Justify-Content: Trung tâm; & nbsp; & nbsp; Bối cảnh: Trắng; & nbsp; & nbsp; Màu sắc: RGBA (0,0,0,0,7); & nbsp; & nbsp; Biên giới: 1px rắn #dfdfdf; & nbsp; & nbsp; Đệm: 10px 12px; & nbsp; } & nbsp; .DHX-Diagram-demo_personal-card I {& nbsp; & nbsp; Màu sắc: RGBA (0,0,0,0,7); & nbsp; & nbsp; & nbsp; Chiều cao: 20px; & nbsp; & nbsp; & nbsp; Chiều rộng: 20px; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 18px; & nbsp; } & nbsp; .Dhx-Diagram-demo_personal-card__info {& nbsp; & nbsp; Hiển thị: Flex; & nbsp; } & nbsp; .dhx-diiagram-demo_personal-card__info a {& nbsp; & nbsp; Màu sắc:#0288d1 & nbsp; } & nbsp; .DHX-Diagram-demo_personal-card__Container {& nbsp; & nbsp; Chiều cao: 100%; & nbsp; & nbsp; & nbsp; Chiều rộng: 100%; & nbsp; & nbsp; & nbsp; tràn: ẩn; & nbsp; & nbsp; & nbsp; Vị trí: tương đối; & nbsp; } & nbsp; đều & nbsp; Văn bản-Align: Trái; & nbsp; & nbsp; kích thước phông chữ: 14px; & nbsp; & nbsp; Độ cao dòng: 20px; & nbsp; & nbsp; Chiều cao: 20px; & nbsp; & nbsp; Biên độ: 00 4px 0; & nbsp; & nbsp; tràn: ẩn; & nbsp; & nbsp; Text-Overflow: Ellipsis; & nbsp; & nbsp; không gian trắng: Nowrap; & nbsp; } & nbsp; .DHX-Diagram-demo_personal-card__Container i {& nbsp; & nbsp; Biên độ bên lề: 4px; & nbsp; } & nbsp; .DHX-Diagram-demo_personal-card__img-container {& nbsp; & nbsp; Min-Width: 93px; & nbsp; & nbsp; & nbsp; Chiều rộng: 93px; & nbsp; & nbsp; & nbsp; Biên độ bên lề: 12px; & nbsp; } & nbsp; .DHX-Diagram-demo_personal-card__img-container img {& nbsp; & nbsp; chiều rộng: kế thừa; & nbsp; & nbsp; Chiều cao: Tự động; & nbsp; }style> Và cuối cùng, bạn có thể điều khiển giao diện và cảm nhận của sơ đồ cây HTML5 của bạn bằng cách xác định các kiểu cho các yếu tố thẻ cá nhân thông qua CSS. Bạn có thể áp dụng một loạt các thuộc tính CSS cho các yếu tố bạn chọn và chỉ định kích thước, căn chỉnh, khoảng cách, màu sắc và bất kỳ cài đặt nào khác. Sau khi hoàn thành bước cuối cùng này, bạn có thể bắt đầu sử dụng sơ đồ cây này để phác thảo cấu trúc bên trong của một công ty. Suy nghĩ cuối cùngHướng dẫn dễ thực hiện này cho thấy thư viện sơ đồ JavaScript của chúng tôi có thể được sử dụng để xây dựng sơ đồ cây. Ngoài loại sơ đồ này, bạn có thể xây dựng bất kỳ sơ đồ nào khác bằng các mẫu HTML đơn giản như sơ đồ mạng hoặc sơ đồ lớp UML. Tận dụng phiên bản dùng thử miễn phí trong 30 ngày và bắt đầu sơ đồ ngay bây giờ. Tài liệu liên quan:
|
