−목차

GoJS 가이드

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

예시

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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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" }
    ]);
}