GoJS 在 Vue 中的简单实现

最新推荐文章于 2025-05-09 16:46:19 发布

蚂蚁二娘

最新推荐文章于 2025-05-09 16:46:19 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web2022050901/article/details/125014599

本文介绍了如何在Vue项目中实现GoJS交互式图表库的简单应用，包括创建空图像和添加节点的方法，详细展示了代码结构、样式及行为部分，并提供了效果示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GoJS 在 Vue 中的简单实现

介绍与引入

简述： GoJS 是一个用于实现交互式图表的 JavaScript 库

在 vue 中使用

安装：

npm install gojs --save

gojs

import gojs from 'gojs'  // 在 main.js 中引入
Vue.prototype.go = gojs  // 挂载

1. 创建一个空图像

结构部分（template）

<div class="flowChart" id="flowChart"></div>  // 准备节点

样式部分（css）

.flowChart {
    width: 800px;
    height: 400px;
    margin: 10% auto;
    background-color: rgb(236, 236, 236);
}

行为部分（script）

// 初始化
init(){
    var $ = go.GraphObject.make
    var myDiagram = $(go.Diagram, "flowChart",  // 获取节点
        {
            "undoManager.isEnabled": true // 设置开启 Ctrl-Z 撤消，Ctrl-Y 重做
        }
    )  
}

效果示例：

2. 在图像中添加节点

行为部分（script）

// 初始化
init(){
    var $ = go.GraphObject.make
    var myDiagram = $(go.Diagram, "flowChart")  // 获取节点
    
    var myModel = $(go.Model)

    myModel.nodeDataArray = [
        { key: "东方月初" },
        { key: "王权富贵" },
        { key: "涂山红红" }
    ]

    myDiagram.model = myModel
}

效果示例：在这里插入图片描述

通过创建由 GraphObjects 组成的模板，创建一个节点，我们可以使用几个构建块类： ● 形状：用于显示带有颜色的预定义或自定义几何图形； ● 文本块：以各种字体显示（可能可编辑）文本； ● 图片：用于显示图像； ● 面板：用于容纳其他对象的集合的容器，这些对象可以根据面板的类型以不同的方式定位和调整大小（如桌子、垂直堆叠和拉伸容器）；

行为部分（script）

// 初始化
init(){
    var $ = go.GraphObject.make
    var myDiagram = $(go.Diagram, "flowChart")  // 获取节点
    
    myDiagram.nodeTemplate = $(  
        go.Node,
        'Horizontal',  // 设置位置 - 水平居中
        { background: "#44CCFF" }, // 设置模板样式
        $(go.TextBlock,
            'Horizontal',
            { font : 'bold 16px sans-serif' },
            new go.Binding("text", "key")              
        ),
    )
    
    var myModel = $(go.Model)

    myModel.nodeDataArray = [
        { key: "东方月初" },
        { key: "王权富贵" },
        { key: "涂山红红" }
    ]

    myDiagram.model = myModel
}

效果示例：