gojs-圖形外掛

阿新 • • 發佈：2020-07-20

GoJS

GoJS示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>


<script src="gojs/go.js"></script>

<script>
    var 
 $ = go.GraphObject.make;
    // 第一步：建立圖表
    var myDiagram = $(go.Diagram, "myDiagramDiv"); // 建立圖表，用於在頁面上畫圖

    // 第二步：建立一個節點，內容為武沛齊
    var node = $(go.Node, $(go.TextBlock, {text: "武沛齊"}));

    // 第三步：將節點新增到圖表中
    myDiagram.add(node)
</script>
</body>
</html>

示例1

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>


<script src="gojs/go.js"></script>

<script>
    var 
 $ = go.GraphObject.make;
    // 第一步：建立圖表
    var myDiagram = $(go.Diagram, "myDiagramDiv"); // 建立圖表，用於在頁面上畫圖


    var node1 = $(go.Node, $(go.TextBlock, {text: "武沛齊"}));
    myDiagram.add(node1);

    var node2 = $(go.Node, $(go.TextBlock, {text: "武沛齊", stroke: 'red'}));
    myDiagram.add(node2);

     
var node3 = $(go.Node, $(go.TextBlock, {text: "武沛齊", background: 'lightblue'}));
    myDiagram.add(node3);
    

</script>
</body>
</html>

TextBlock

TextBlock

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>


<script src="gojs/go.js"></script>
<script src="gojs/Figures.js"></script>

<script>
    var $ = go.GraphObject.make;

    var myDiagram = $(go.Diagram, "myDiagramDiv"); // 建立圖表，用於在頁面上畫圖

    var node1 = $(go.Node,
        $(go.Shape, {figure: "Ellipse", width: 40, height: 40})
    );
    myDiagram.add(node1);

    var node2 = $(go.Node,
        $(go.Shape, {figure: "RoundedRectangle", width: 40, height: 40, fill: 'green',stroke:'red'})
    );
    myDiagram.add(node2);

    var node3 = $(go.Node,
        $(go.Shape, {figure: "Rectangle", width: 40, height: 40, fill: null})
    );
    myDiagram.add(node3);


    var node4 = $(go.Node,
        $(go.Shape, {figure: "Diamond", width: 40, height: 40, fill: '#ddd'})
    );
    myDiagram.add(node4);

    // 需要引入Figures.js
    var node5 = $(go.Node,
        $(go.Shape, {figure: "Club", width: 40, height: 40, fill: 'red'})
    );
    myDiagram.add(node5);

</script>
</body>
</html>

Shape

Shape

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>


<script src="gojs/go.js"></script>
<script src="gojs/Figures.js"></script>

<script>
    var $ = go.GraphObject.make;

    var myDiagram = $(go.Diagram, "myDiagramDiv"); // 建立圖表，用於在頁面上畫圖


    var node1 = $(go.Node,
        "Vertical",
        {
            background: 'yellow',
            padding: 8
        },
        $(go.Shape, {figure: "Ellipse", width: 40, height: 40}),
        $(go.TextBlock, {text: "武沛齊"})
    );
    myDiagram.add(node1);

    var node2 = $(go.Node,
        "Horizontal",
        {
            background: 'white',
            padding: 5
        },
        $(go.Shape, {figure: "RoundedRectangle", width: 40, height: 40}),
        $(go.TextBlock, {text: "武沛齊"})
    );
    myDiagram.add(node2);

    var node3 = $(go.Node,
        "Auto",
        $(go.Shape, {figure: "Ellipse", width: 80, height: 80, background: 'green', fill: 'red'}),
        $(go.TextBlock, {text: "武沛齊"})
    );
    myDiagram.add(node3);


</script>
</body>
</html>

Node

Node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiagramDiv" style="width:500px; min-height:450px; background-color: #DAE4E4;"></div>


<script src="gojs/go-debug.js"></script>

<script>
    var $ = go.GraphObject.make;

    var myDiagram = $(go.Diagram, "myDiagramDiv",
        {layout: $(go.TreeLayout, {angle: 0})}
    ); // 建立圖表，用於在頁面上畫圖

    var startNode = $(go.Node, "Auto",
        $(go.Shape, {figure: "Ellipse", width: 40, height: 40, fill: '#79C900', stroke: '#79C900'}),
        $(go.TextBlock, {text: '開始', stroke: 'white'})
    );
    myDiagram.add(startNode);


    var downloadNode = $(go.Node, "Auto",
        $(go.Shape, {figure: "RoundedRectangle", height: 40, fill: '#79C900', stroke: '#79C900'}),
        $(go.TextBlock, {text: '下載程式碼', stroke: 'white'})
    );
    myDiagram.add(downloadNode);

    var startToDownloadLink = $(go.Link,
        {fromNode: startNode, toNode: downloadNode},
        $(go.Shape, {strokeWidth: 1}),
        $(go.Shape, {toArrow: "OpenTriangle", fill: null, strokeWidth: 1})
    );
    myDiagram.add(startToDownloadLink);


    var zipNode = $(go.Node, "Auto",
        $(go.Shape, {figure: "RoundedRectangle", height: 40, fill: '#79C900', stroke: '#79C900'}),
        $(go.TextBlock, {text: '本地打包', stroke: 'white'})
    );
    myDiagram.add(zipNode);

    var downloadToZipLink = $(go.Link,
        {fromNode: downloadNode, toNode: zipNode},
        $(go.Shape, {strokeWidth: 1}),
        $(go.Shape, {toArrow: "OpenTriangle", fill: null, strokeWidth: 1})
    );
    myDiagram.add(downloadToZipLink);


    for (var i = 1; i < 6; i++) {
        var node = $(go.Node, "Auto",
            $(go.Shape, {figure: "RoundedRectangle", height: 40, fill: 'lightgray', stroke: 'lightgray'}),
            $(go.TextBlock, {text: '伺服器' + i, stroke: 'white', margin: 5})
        );
        myDiagram.add(node);

        var nodeToZipLink = $(go.Link,
            {fromNode: zipNode, toNode: node, routing: go.Link.Orthogonal},
            $(go.Shape, {strokeWidth: 1, stroke: 'lightgray'}),
            $(go.Shape, {toArrow: "OpenTriangle", fill: null, strokeWidth: 1, stroke: 'lightgray'})
        );
        myDiagram.add(nodeToZipLink);
    }

</script>
</body>
</html>

Link

Link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="diagramDiv" style="width:100%; min-height:450px; background-color: #DAE4E4;"></div>


<script src="gojs/go-no-logo.js"></script>
<script>
    var $ = go.GraphObject.make;
    var diagram = $(go.Diagram, "diagramDiv", {
        layout: $(go.TreeLayout, {
            angle: 0,
            nodeSpacing: 20,
            layerSpacing: 70
        })
    });

    diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, {
            figure: "RoundedRectangle",
            fill: 'lightgray',
            stroke: 'lightgray'
        }, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
        $(go.TextBlock, {margin: 8}, new go.Binding("text", "text"))
    );

    diagram.linkTemplate = $(go.Link,
        {routing: go.Link.Orthogonal},
        $(go.Shape, {stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
        $(go.Shape, {toArrow: "OpenTriangle", stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
        $(go.TextBlock, {font: '8pt serif', segmentOffset: new go.Point(0, -10)}, new go.Binding("text", "link_text"))
    );

    var nodeDataArray = [
        {key: "start", text: '開始', figure: 'Ellipse', color: "lightgreen"},
        {key: "download", parent: 'start', text: '下載程式碼', color: "lightgreen", link_text: '執行中...'},
        {key: "compile", parent: 'download', text: '本地編譯', color: "lightgreen"},
        {key: "zip", parent: 'compile', text: '打包', color: "red", link_color: 'red'},
        {key: "c1", text: '伺服器1', parent: "zip"},
        {key: "c11", text: '服務重啟', parent: "c1"},
        {key: "c2", text: '伺服器2', parent: "zip"},
        {key: "c21", text: '服務重啟', parent: "c2"},
        {key: "c3", text: '伺服器3', parent: "zip"},
        {key: "c31", text: '服務重啟', parent: "c3"}
    ];
    diagram.model = new go.TreeModel(nodeDataArray);

    /*
    diagram.model.addNodeData({key: "c4", text: '伺服器3', parent: "c3", color: "lightgreen"})
    var c1 = diagram.model.findNodeDataForKey("c1");
    diagram.model.setDataProperty(c1, "color", "red");
    */

</script>
</body>
</html>

資料繫結

資料繫結

去除Logo

找到 go.js 檔案，查詢字串 7eba17a4ca3b1a8346 ，然後替換指定內容。

下載GoJS外掛：猛擊這裡或https://gojs.net/

gojs-圖形外掛

GoJS GoJS示例 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

FCPX外掛:直線圖形矩形線條路徑動畫預設

本次小編為您帶來直線圖形矩形線條路徑動畫預設，這是一套適用於Final Cut Pro的字幕外掛。線條路徑動畫預設 Mac外掛包含了直線，波浪線，三角形，矩形，圓形，八角形以及環線等多種形狀。直線圖形矩形線外

jmeter-伺服器圖形監視器外掛

效能測試時，我們的關注點有兩部分服務本身：併發響應時間 QPS等指標伺服器的資源使用情況：cpu memory I/O disk等指標

Leaflet中使用Leaflet.draw外掛實現圖形互動繪製和編輯(修改圖形座標點)

場景 Leaflet中使用Leaflet.Pin外掛實現圖層要素編輯效果： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785

iOS開源二進位制使用外掛cocoapods-imy-bin

iOS編譯速度如何穩定提高10倍以上 GitHub開源地址附詳細使用教程一、概要 cocoapods-imy-bin功能點：

Flutter外掛開發

Flutter外掛開發建立外掛目錄 flutter create -i objc -a java --template=plugin demo -i,表示指定iOS的語言,objc,swift

Mybatis之外掛分析

前言 Mybatis提供了強大的擴充套件功能，也就是Mybatis的外掛（plugins）功能；MyBatis允許你在已對映語句執行過程中的某一點進行攔截呼叫，攔截之後可以對已有方法新增一些定製化的功能，比如常見的分頁功能；試圖修

Mybatis分頁外掛PageHelper的學習與使用

後端程式設計師都知道，在Web系統中，分頁是一種常見的功能，我之前寫的分頁方法都比較麻煩，移植性也不高，這就很不樂觀了。作為一個積極開朗的程式設計師，怎麼能不去了解PageHelper分頁外掛呢？PageHelper是國內非

【Arthas】通過Cloud Toolkit外掛使用Arthas一鍵診斷遠端伺服器

Cloud Toolkit是一個IDE 外掛，幫助開發者更高效地開發、測試、診斷並部署應用。使用本外掛，開發者能夠方便地將本地應用一鍵部署到任意機器，或 ECS、EDAS、Kubernetes；並支援高效執行終端命令和 SQL 等。

在node中使用ffmpeg外掛

FFmpeg 是一個自由軟體，可以執行音訊和視訊多種格式的錄影、轉換、流功能，包含了 libavcodec——這是一個用於多個專案中音訊和視訊的解碼器庫，以及 libavformat——一個音訊與視訊格式轉換庫。 “FFmpeg”這個單

【MyBatis-Plus-In-Action】七、外掛拓展

上一節我們學習了mybatis-plus 的程式碼生成器,這一節我們來學習一下mybatis-plus 的外掛拓展。

caddy（3）為 caddy 新增一個反向代理外掛

caddy-grpc 為 caddy 新增一個反向代理外掛專案地址：github.com/yhyddr/cadd… 前言上一次我們學習瞭如何在 Caddy 中擴充套件自己想要的外掛。部落格中只提供了大致框架。這一次，我們來根據具體外掛 caddy-g

如何為 caddy 添寫自定義外掛

如何為 caddy 添寫自定義外掛專案地址：github.com/yhyddr/quic… 前言 Caddy附帶一個HTTP伺服器，但是你可以實現其他伺服器型別並將它們插入Caddy中。其他型別的伺服器可以是SSH、SFTP、TCP、內部使用的其他東西

[Egg.js] egg-tx 介面級事務管理外掛

egg-tx 一個 egg 事務外掛，它支援 Mysql、Mongo 資料庫，它能做到請求介面級別的事務管理。

springboot：歸納整合，框架整體應用以及外掛推薦

在前兩天，Damon也是將springboot大概的狀況給大家介紹了不少，今天Damon就跟大家說說springboot框架的一些整合，以及一些實用的外掛介紹，希望大家喜歡。（最近由於實訓比較累【現在才10已經很目澀了】，所以每日推

PostgreSQL 修改預設使用者 postgres 的密碼 - 圖形化介面操作

如何修改 PostgreSQL 的使用者密碼呢？網上的方法大都是使用命令列修改，但不知為何我執行總是失敗。

利用c++和easyx圖形庫做一個低配版掃雷遊戲

遊戲介面由於這個遊戲是我抱著玩一玩的心態做出來的，所以沒有過多的去設計介面，也沒有去找遊戲的資源（圖片、遊戲音效等）。僅使用了不同顏色的方塊來表示遊戲中方塊的狀態和種類。（綠色為初始狀態（未翻轉的狀態

mybatis使用pagehelper外掛過程詳解

這篇文章主要介紹了mybatis使用pagehelper外掛過程詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

C++連連看判定圖形消除演算法

我們玩過的連連看遊戲，通過選定兩個圖形相同的元素，判定其是否可在三次轉彎內連線起來，若能，則消去，若不能，則不可消去，

java圖形化介面實現簡單混合運算計算器的示例程式碼

寫了好幾天了終於寫完了這個四則運算計算器，總程式碼放在後面截圖如下：

gojs-圖形外掛

GoJS示例

去除Logo

相關推薦