1. Các sản phẩm
  2.   Biểu đồ
  3.   JavaScript
  4.   mxGraph 

mxGraph 

 
 

Thư viện lập sơ đồ JavaScript nguồn mở

Tạo các ứng dụng biểu đồ và đồ thị tương tác thông qua Thư viện lập sơ đồ JavaScript miễn phí nguồn mở.

mxGraph là một thư viện lập sơ đồ JavaScript mã nguồn mở cung cấp chức năng hiển thị sơ đồ SVG và HTML. Không cần phần mềm của bên thứ ba để sử dụng thư viện mxGraph. Điều tốt khác là nó không yêu cầu plugin và có thể được tích hợp vào hầu như bất kỳ khuôn khổ nào. mxGraph cung cấp các tính năng nhằm hiển thị các sơ đồ và đồ thị tương tác. API cung cấp tất cả các chức năng thường được yêu cầu để vẽ, tương tác và liên kết ngữ cảnh với sơ đồ.

API sử dụng một kiến trúc rất phổ biến, nó yêu cầu một máy chủ web có khả năng xử lý các trang HTML và một trình duyệt web hỗ trợ JavaScript. Nó chủ yếu sử dụng một tệp JavaScript chứa tất cả các chức năng của thư viện. Tệp đó được tải vào trang web HTML trong phần JavaScript và thực thi trong vùng chứa HTML trong trình duyệt

Previous Next

Bắt đầu với mxGraph

Cách được khuyến nghị để cài đặt mxGraph là thông qua npm, nó có sẵn thông qua trình quản lý gói npm. Để sử dụng mxGraph làm phụ thuộc, hãy sử dụng npm install.

Cài đặt mxGraph qua npm

npm install mxgraph --save

Tạo đồ thị qua API JavaScript

Thư viện mxGraph mã nguồn mở cung cấp chức năng tạo sơ đồ hoặc đồ thị bằng JavaScript. Nó cũng hỗ trợ sửa đổi các đồ thị phức tạp bằng cách tạo các trình chỉnh sửa đồ thị mới hoặc tùy chỉnh chúng. Đầu tiên, bạn cần tạo một biểu đồ bên trong vùng chứa đã cho và sau đó bạn có thể dễ dàng thêm các ô vào mô hình để xây dựng biểu đồ. Bạn có thể dễ dàng thêm tiêu đề sơ đồ và ghi chú cho nhiều người tham gia. Thư viện cũng cung cấp các tính năng bổ sung như hiệu ứng hình ảnh, điều khiển giao diện người dùng, v.v.

Hợp nhất hai đồ thị qua JavaScript

mxGraph cho phép các lập trình viên máy tính hợp nhất hai biểu đồ bên trong các ứng dụng JavaScript của riêng họ. Trước hết, bạn cần tạo một biểu đồ mẫu bên trong vùng chứa đã cho. Vui lòng làm cho tất cả các ô tròn bằng nhãn màu trắng, đậm. Bây giờ hãy tạo mô hình đồ thị thứ hai mà không có vùng chứa. Thêm các ô vào mô hình đích trong một bước duy nhất bằng cách sử dụng id tùy chỉnh cho các đỉnh. Bây giờ bạn có thể hợp nhất mô hình từ đồ thị thứ hai vào mô hình của đồ thị đầu tiên.

Vẽ lưới bằng JavaScript

Thư viện mxGraph cho phép các nhà phát triển phần mềm vẽ một lưới động bên trong các ứng dụng JavaScript của riêng họ. Bạn có thể dễ dàng vẽ động một lưới bằng cách sử dụng HTML 5 canvas. Đầu tiên, vui lòng tạo biểu đồ bên trong vùng chứa đã cho và Tạo lưới động yêu cầu canvas. Bạn cần sửa đổi tính năng lọc sự kiện để chấp nhận canvas làm vùng chứa. Bây giờ, c ủa nền nếu được yêu cầu và đặt khoảng cách của các đường lưới tính bằng pixel. Bây giờ vẽ lưới thực tế.

 Tiếng Việt