首页 技术 正文
技术 2022年11月13日
0 收藏 557 点赞 2,966 浏览 3255 个字

Gojs简单例子

前台代码:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script src="/lib/go-js/assets/js/go.js"></script> <script id="code" th:inline="javascript">
/*<![CDATA[*/
function init() { var keynode, mapnode; keynode = eval([[${nodekey}]]);
mapnode = eval([[${nodemap}]]); console.log(keynode);
console.log(mapnode) if (window.goSamples) goSamples();
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {strokeWidth: 1},
new go.Binding("fill", "color")),
$(go.TextBlock,
{margin: 20, width: 60, height: 20},
new go.Binding("text", "key"))
);
// myDiagram.model = new go.GraphLinksModel(
// [
// {key: "Alpha", color: "lightblue"},
// {key: "Beta", color: "orange"},
// {key: "Gamma", color: "lightgreen"},
// {key: "Delta", color: "pink"}
// ], [
// {from: "Alpha", to: "Beta"},
// {from: "Alpha", to: "Gamma"},
// {from: "Gamma", to: "Delta"},
// {from: "Delta", to: "Alpha"}
// ]
// ); myDiagram.model = new go.GraphLinksModel(keynode, mapnode);
} /*]]>*/
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:800px; height:800px"></div>
</div>
</body>
</html>

后台代码:

package com.thunisoft.maybeemanagementcenter.controller;import com.fasterxml.jackson.core.JsonProcessingException;
import com.thunisoft.maybeemanagementcenter.pojo.LinkMap;
import com.thunisoft.maybeemanagementcenter.pojo.LinkNode;
import com.thunisoft.maybeemanagementcenter.util.JsonHelper;
import com.thunisoft.maybeemanagementcenter.util.JsonStrUltil;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/sleuth")
public class SleuthController { /**
*
*/
@GetMapping("/index")
public String index(Model model) { List<LinkNode> nodekey = new ArrayList<>();
nodekey.add(new LinkNode("a"));
nodekey.add(new LinkNode("b"));
nodekey.add(new LinkNode("c"));
nodekey.add(new LinkNode("d")); List<LinkMap> nodemap = new ArrayList<>();
nodemap.add(new LinkMap("a", "b"));
nodemap.add(new LinkMap("a", "c"));
nodemap.add(new LinkMap("c", "d"));
nodemap.add(new LinkMap("d", "a")); JsonHelper jm = new JsonHelper();
String nodekeyjson = null;
String nodemapjson = null;
try {
nodekeyjson = jm.toJson(nodekey);
nodemapjson = jm.toJson(nodemap);
} catch (JsonProcessingException e) {
e.printStackTrace();
} model.addAttribute("nodekey", nodekeyjson);
model.addAttribute("nodemap", nodemapjson); return "link";
}
}

pojo:

package com.thunisoft.maybeemanagementcenter.pojo;/**
* 链路中节点
*/
public class LinkNode {
private String key;
private String color = "lightblue"; /*背景颜色,默认亮蓝色*/ public LinkNode(String key) {
this.key = key;
} public LinkNode(String key, String color) {
this.key = key;
this.color = color;
} public String getKey() {
return key;
} public void setKey(String key) {
this.key = key;
} public String getColor() {
return color;
} public void setColor(String color) {
this.color = color;
}
}
package com.thunisoft.maybeemanagementcenter.pojo;/**
* 链路之间节点映射
*/
public class LinkMap {
private String from;
private String to; public LinkMap(String from, String to) {
this.from = from;
this.to = to;
} public String getFrom() {
return from;
} public void setFrom(String from) {
this.from = from;
} public String getTo() {
return to;
} public void setTo(String to) {
this.to = to;
}
}
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902