1. 제품
  2.   도표
  3.   JavaScript
  4.   mxGraph 

mxGraph 

 
 

오픈 소스 JavaScript 다이어그램 라이브러리

오픈 소스 무료 JavaScript 다이어그램 라이브러리를 통해 대화형 그래프 및 차트 작성 애플리케이션을 생성합니다.

mxGraph는 SVG 및 HTML 다이어그램을 렌더링하기 위한 기능을 제공하는 오픈 소스 JavaScript 다이어그램 라이브러리입니다. mxGraph 라이브러리를 사용하기 위해 타사 소프트웨어가 필요하지 않습니다. 다른 좋은 점은 플러그인이 필요하지 않으며 거의 모든 프레임워크에 통합될 수 있다는 것입니다. mxGraph는 대화형 다이어그램 및 그래프를 표시하기 위한 기능을 제공합니다. API는 다이어그램을 그리고, 상호 작용하고, 컨텍스트를 다이어그램과 연결하는 데 일반적으로 필요한 모든 기능을 제공합니다.

API는 매우 일반적인 아키텍처를 사용하므로 HTML 페이지를 처리할 수 있는 웹 서버와 JavaScript를 지원하는 웹 브라우저가 필요합니다. 주로 모든 라이브러리 기능을 포함하는 하나의 JavaScript 파일을 사용합니다. 해당 파일은 JavaScript 섹션의 HTML 웹 페이지에 로드되고 브라우저의 HTML 컨테이너에서 실행됩니다.

Previous Next

mxGraph 시작하기

mxGraph를 설치하는 권장 방법은 npm을 사용하는 것이며 npm 패키지 관리자를 통해 사용할 수 있습니다. mxGraph를 종속성으로 사용하려면 npm install을 사용하십시오.

npm을 통해 mxGraph 설치

npm install mxgraph --save

JavaScript API를 통해 그래프 생성

오픈 소스 mxGraph 라이브러리는 JavaScript를 사용하여 다이어그램 또는 그래프를 생성하기 위한 기능을 제공합니다. 또한 새 그래프 편집기를 만들거나 사용자 지정하여 복잡한 그래프를 수정하는 것을 지원합니다. 먼저 주어진 컨테이너 내부에 그래프를 생성해야 하며, 그런 다음 모델에 셀을 쉽게 추가하여 그래프를 빌드할 수 있습니다. 다이어그램 제목을 쉽게 추가하고 여러 참가자에게 메모를 추가할 수 있습니다. 라이브러리는 시각 효과, 사용자 인터페이스 제어 등과 같은 추가 기능도 제공합니다.

JavaScript를 통해 두 그래프 병합

mxGraph를 사용하면 컴퓨터 프로그래머가 자체 JavaScript 응용 프로그램 내에서 두 개의 그래프를 병합할 수 있습니다. 먼저 주어진 컨테이너 안에 샘플 그래프를 생성해야 합니다. 흰색의 굵은 레이블로 모든 셀을 둥글게 만드십시오. 이제 컨테이너 없이 두 번째 그래프 모델을 생성하십시오. 정점에 대한 사용자 정의 ID를 사용하여 단일 단계로 대상 모델에 셀을 추가하십시오. 이제 두 번째 그래프의 모델을 첫 번째 그래프의 모델에 병합할 수 있습니다.

자바스크립트를 사용하여 그리드 그리기

mxGraph 라이브러리를 사용하면 소프트웨어 개발자가 자체 JavaScript 애플리케이션 내에서 동적으로 그리드를 그릴 수 있습니다. HTML 5 캔버스를 사용하여 동적으로 그리드를 쉽게 그릴 수 있습니다. 먼저 주어진 컨테이너 내부에 그래프를 생성하고 캔버스가 필요한 그리드를 동적으로 생성하십시오. 캔버스를 컨테이너로 허용하려면 이벤트 필터링을 수정해야 합니다. 이제 필요하면 배경을 제거하고 그리드 선의 거리를 픽셀 단위로 설정합니다. 이제 실제 그리드를 그립니다.

 한국인