初识gojs

最新推荐文章于 2024-02-15 00:09:46 发布

爱吃青菜的土拨鼠

最新推荐文章于 2024-02-15 00:09:46 发布

阅读量316

点赞数

分类专栏： gojs 文章标签： javascript

原文链接：https://blog.csdn.net/qq_36520153/article/details/78904572

版权

gojs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是GoJS的入门指南，介绍了如何使用JavaScript库GoJS创建和定制交互式图表。首先，通过引入GoJS库并创建画布载体，接着定义模型数据和节点模板，包括不同形状和文本。此外，还展示了如何设置节点连线，实现动态连接。通过实例代码，读者可以了解GoJS的基本用法，从而构建自己的图形化应用。

摘要由CSDN通过智能技术生成

原文大牛地址：http://www.cnblogs.com/landeanfen/p/7910530.html

需要用到gojs 根据各位大牛的资料保存下自己的心得

全文只是自己的理解内容，并非官方语言，有错误希望大家及时指出

gojs

gojs 就是基于js的进行一些节点添加，更改的一个画图工具开局需要定义一个画布

js 相当于画笔然后用js 在画布上进行绘画对自己索要想展示的内容进行创建

第一步：引入文件：引入go 文件

第二步：创建一个画布的载体(div）其中需要id=" 画布的名"

第三步：创建画布

根据个人习惯定义一个简介的模板，

    var $ = go.GraphObject.make;  // 为了定义模板的简洁性
      myDiagram =
        $(go.Diagram, "myDiagramDiv",  // 必须命名或引用DIV HTML元素
          {
            initialContentAlignment: go.Spot.Center,// 在中间
            allowDrop: true,  // 接受调色板中的掉落必须是正确的吗must be true to accept drops from the Palette
            "LinkDrawn": showLinkLabel,  // 这个DiagramEvent监听器定义
            "LinkRelinked": showLinkLabel,
            "animationManager.duration": 800, // 略长于默认动画(600ms)
            "undoManager.isEnabled": true  // enable undo & redo 18/5000 // 启用撤销和重做
          });

设置画布中的值：

initialContentAlignment: go.Spot.Center, //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键

"undoManager.isEnabled": true, //不运行用户改变图表的规模 allowZoom: false, //画布上面是否出现网格

"grid.visible": true, //允许在画布上面双击的时候创建节点 "clickCreatingTool.archetypeNodeData": { text: "Node" }, //允许使用ctrl+c、ctrl+v复制粘贴 "commandHandler.copiesTree": true, //允许使用delete键删除节点 "commandHandler.deletesTree": true, // dragging for both move and copy "draggingTool.dragsTree": true,

创建模型数据（madel

var myModel = objGo(go.Model);//创建Model对象
        // model中的数据每一个js对象都代表着一个相应的模型图中的元素
        myModel.nodeDataArray = [
            { key: "工厂" },
            { key: "车间" },
            { key: "工人" },
            { key: "岗位" },
        ];
        myDiagram.model = myModel; //将模型数据绑定到画布图上

创建节点（node） // 节点就是值得是画布上画出来的图形的形状图形的样式。下面是我转载的大佬的内同原文上述有链接

上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试
在gojs里面给我们提供了几种模型节点的可选项：

Shape:形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等
TextBlock:文本域（可编辑）
Picture:图片
Panel:容器来保存其他Node的集合
默认的节点模型代码只是由一个TextBlock组件构建成
我们增加下面一段代码

 // 定义一个简单的节点模板
        myDiagram.nodeTemplate =
            objGo(go.Node, "Horizontal",//横向布局的面板
                // 节点淡蓝色背景
                { background: "#44CCFF" },
                objGo(go.Shape,
                    "RoundedRectangle", //定义形状，这是圆角矩形
                    { /* Shape的参数。宽高颜色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' },
                    // 绑定 Shape.figure属性为Node.data.fig的值，Model对象可以通过Node.data.fig 获取和设置Shape.figure（修改形状）
                    new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')),
                objGo(go.TextBlock,
                    "Default Text",  // 默认文本
                    // 设置字体大小颜色以及边距
                    { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
                    //绑定TextBlock.text 属性为Node.data.name的值，Model对象可以通过Node.data.name获取和设置TextBlock.text
                    new go.Binding("text", "name"))
            );

        var myModel = objGo(go.Model);//创建Model对象
        // model中的数据每一个js对象都代表着一个相应的模型图中的元素
        myModel.nodeDataArray = [
            { name: "工厂", fig: 'YinYang', fill2: 'blue' },
            { name: "车间", fig: 'Peace', fill2: 'red' },
            { name: "工人", fig: 'NotAllowed', fill2: 'green' },
            { name: "岗位", fig: 'Fragile', fill2: 'yellow' },
        ];
        myDiagram.model = myModel; //将模型数据绑定到画布图上

（5）节点连线就是每一个节点中从哪里到哪里

每个类型的节点连线写法大同小异但是有微妙的不同具体参考官网中不同类型的连线树形流程图的节点连线 parent 代表其父元素其中也可以在这中加图片，可以写对应的点击事件。
有了上面的基础，我们可以在画布上面画出我们想要的图形效果了，可是还没有连线。我们知道连线是建立在节点模型的上面的，于是乎我们的Model又分为了以下三种类型：

Model：最基本的（不带连线，如上面的例子）
GraphLinksModel ：高级点的动态连线图
TreeModel：树形图的模型（从例子看好像用的不多）

GraphLinksModel中为model.nodeDataArray提供model.linkDataArray为node节点连线保存数据模型信息，其实也是的一个JSON数组对象，每个线条都有两个属性 “to” 和 “from” 即Node节点的“key”值，两个属性代表两个key表示两个节点间的连线。

我们上面已经写过最基本的Model的例子了，我们再来个带连线的Model的示例

var myModel = objGo(go.GraphLinksModel);
        myModel.nodeDataArray =
            [
                { key: "aaa" ,name: "工厂" },
                { key: "bbb" ,name: "车间"},
                { key: "ccc" ,name: "车间" }
            ];
        myModel.linkDataArray =
            [
                { from: "aaa", to: "bbb" },
                { from: "bbb", to: "ccc" }
            ];
        myDiagram.model = myModel;