前台代码：

<!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;

    }

}

Gojs简单例子的更多相关文章

  1. Hibernate4.2.4入门(一)——环境搭建和简单例子

    一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...

  2. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答

    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...

  3. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  4. ko 简单例子

    Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...

  5. mysql定时任务简单例子

    mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9     如果要每30秒执行以下语句:   [sql] update userinfo set endtime = now() WHE ...

  6. java socket编程开发简单例子 与 nio非阻塞通道

    基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...

  7. 一个简单例子：贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  8. [转] 3个学习Socket编程的简单例子：TCP Server/Client, Select

    以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...

  9. jsonp的简单例子

    jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. 各Spring-Boot-Starters介绍(转)

    原文传送门:Spring Boot application starters ↑传送门里有各Spring-Boot-Starters的依赖pom.xml(一般人我不告诉他) 注意:此为初订版,博主渣翻 ...

  2. Batch to setup JAVA programming environment for Algorithm class from priston

    Original web site: http://algs4.cs.princeton.edu/linux/ Part. I [username:~/] [username:~/] mkdir al ...

  3. Wireshark数据抓包分析——网络协议篇

                   Wireshark数据抓包分析--网络协议篇     watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/ ...

  4. 实现一个简单的虚拟demo算法

    假如现在你需要写一个像下面一样的表格的应用程序,这个表格可以根据不同的字段进行升序或者降序的展示. 这个应用程序看起来很简单,你可以想出好几种不同的方式来写.最容易想到的可能是,在你的 JavaScr ...

  5. Angular 4.0从入门到实战

    AngularJS 优点 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令: 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能: ...

  6. FATAL ERROR: Could not find ./share/fill_help_tables.sql

    [root@c01 mysql-5.6.33]# /apps/mysql-5.6.33/scripts/mysql_install_db --datadir=/data/my_db --user=my ...

  7. lua笔记二 赋值语句

    赋值是改变一个变量的值和改变表域的最基本的方法. a = "hello" .. "world" t.n = t.n + 1 Lua可以对多个变量同时赋值,变量列 ...

  8. C#之Console

    Console.Write  表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine  表示向控制台写入字符串后换行.Console.Read 表示从控制 ...

  9. python（35）：多线程读取文件

    多线程读取文件: # _*_coding:utf-8_*_ import time, threading, ConfigParser ''' Reader类,继承threading.Thread @_ ...

  10. vue2.0的生命周期

    生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程, 我们称这是Vue的生命周期.通俗说就是Vue实 ...