====== 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" }
]);
}