zoukankan      html  css  js  c++  java
  • 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,  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; 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;
        }
    }
    
  • 相关阅读:
    随机过程之第一次出现的期望
    js模板引擎介绍搜集
    qt的安装和debug
    $parse/$eval和$observe/$watch如何区分
    angular controller as syntax vs scope
    Angularjs Controller 间通信机制
    Ng-template寄宿方式
    angularjs移除不必要的$watch
    angularJs项目实战!02:前端的页面分解与组装
    推荐几个可以与PhoneGap很好搭配的UI框架
  • 原文地址:https://www.cnblogs.com/hfultrastrong/p/8743699.html
Copyright © 2011-2022 走看看