====== GoJS 가이드 ====== 툴 설치 디렉토리/template/HTML5/3RD/GOJS 하위의 "103_xFrame5_GoJS_Guide.pdf" 가이드문서 참조 ===== 예시 ===== 템플릿 위치: /HTML5/3RD/GOJS/sample_gojs 템플릿 파일 * [[xf5projecthome>template/screen/HTML5/3RD/GOJS/sample_gojs.xml|sample_gojs.xml]] * [[xf5projecthome>template/screen/HTML5/3RD/GOJS/sample_gojs.js|sample_gojs.js]] * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/3RD/GOJS/sample_gojs|새창으로 실행]] echo ''; echo ''; echo ''; ==== 화면 스크립트 ==== 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" } ]); }