GoJS 가이드

툴 설치 디렉토리/template/HTML5/3RD/GOJS 하위의 “103_xFrame5_GoJS_Guide.pdf” 가이드문서 참조

템플릿 위치: /HTML5/3RD/GOJS/sample_gojs

템플릿 파일

• sample_gojs.xml
• sample_gojs.js
• 새창으로 실행

var GO_JS_URL = "/xf5/ext/lib/flowchart/go.js";	// GoJS라이브러리경로
												// 주의: GO_JS_URL 변수에 대한 값은 프로젝트 상황에 맞추어 변경해야 한다.

this.myDiagram;	// GoJS 다이어그램 오브젝트

function screen_on_load()
{
	this.screen.loadjs(GO_JS_URL);	// GoJS라이브러리를 로드

    var $ = go.GraphObject.make;  // for conciseness in defining templates

	// GoJS 다이어그램을 그리기 위해 DIV의 DOM오브젝트를 취득
	let divId = this.div_gojs.getjdom()[0].id;
	// DIV의 DOM오브젝트에 GoJS 다이어그램 연결
    this.myDiagram = $(go.Diagram, divId);

	// GoJS 다이어그램에 표현할 노드 기본템플릿 등록
	this.myDiagram.nodeTemplate =
		$(go.Node, "Auto",  // the Shape will go around the TextBlock
			$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
			$(go.TextBlock, { margin: 8 }, new go.Binding("text", "key"))
		);

	// GoJS 다이어그램에 노드와 링크를 생성
	this.myDiagram.model = new go.GraphLinksModel(
	[ // a JavaScript Array of JavaScript objects, one per node;
		// the "color" property is added specifically for this app
		{ key: "Alpha", color: "lightblue" },
		{ key: "Beta", color: "orange" },
		{ key: "Gamma", color: "lightgreen" },
		{ key: "Delta", color: "pink" }
	],
	[ // a JavaScript Array of JavaScript objects, one per link
		{ from: "Alpha", to: "Beta" },
		{ from: "Alpha", to: "Gamma" },
		{ from: "Beta", to: "Beta" },
		{ from: "Gamma", to: "Delta" },
		{ from: "Delta", to: "Alpha" }
	]);
}