一、简介

因为公司业务需求，要编写一个可配置的流程图。我老大给我推荐了Go.js这个功能强大的可视化图表库。这几天一直泡在GoJs的官网上，可惜全是英文看起来非常吃力。希望每天总结一下可以，梳理一下学习中的漏洞。

就从一个小demo开始吧

二、简单的流程图制作

利用GoJs制作一个简单的流程图

第一步

下载go.js
然后新建一个HTML文件

//引入go.js
<script src="./go.js"></script>//创建存放画布的盒子
<div style="width: 100%; display: flex; justify-content: space-between"><div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: #282c34;"></div><div id="myDiagramDiv" style="flex-grow: 1; height: 750px; background-color: #282c34;"></div>
</div>//创建画布
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv");

第二步

给画布添加一个简单的流程图

//定义节点模板 go.Shape定义节点图形
myDiagram.nodeTemplate =$(go.Node, "Auto",$(go.Shape, "RoundedRectangle", { //矩形fill: "white"//默认白色},new go.Binding("fill", "color")), //将Shape.fill绑定为node.data.color$(go.TextBlock, {margin: 5},new go.Binding("text", "key")) //将TextBlock.text绑定为node.data.key);//定义连接线的模板myDiagram.linkTemplate =$(go.Link,$(go.Shape, //连接线new go.Binding("stroke", "color"),new go.Binding("strokeWidth", "thick")),$(go.Shape, //箭头形状{toArrow: "OpenTriangle",fill: null},new go.Binding("stroke", "color"),new go.Binding("strokeWidth", "thick")));//添加节点数据var nodeDataArray = [{key: "start",color: "lightblue",},{key: "yes",// color: "white",},{key: "end",color: "pink",}];//添加连接线数据var linkDataArray = [{from: "start",to: "yes"}, {from: "yes",to: "end"}];//将节点挂载到模型上myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

第三步

添加画板

myPalette =$(go.Palette, "myPaletteDiv", {nodeTemplateMap: myDiagram.nodeTemplateMap, //共享画布的节点模板model: new go.GraphLinksModel([{ //在画板上添加需要的节点模板key: "Start"}])});

最终效果图

实在是太简单了

GoJs制作简单的流程图相关推荐

vue 使用gojs绘制简单的流程图
在vue项目中需要展示工作流进度,可以使用的流程图插件很多 flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart ...
在线制作简易业务流程图
这段时间,由于需要制作简单的业务流程图,试了不少工具.方法,最终选择了processon在线制作流程图,有模版可以用参考,操作很简单,上手快.写模块,再连线就OK了.网址是:https://www.p ...
html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)
插件描述:canvas制作简单的HTML图表,折线或者矩形统计使用canvas制作简单的HTML图表,折线或者矩形统计. 使用canvas制作简单的HTML图表,折线或者矩形统计,简单而实用.图形由 ...
【教程】新手如何制作简单MAD和AMV，学不会那都是时辰
[教程]新手如何制作简单MAD和AMV,学不会那都是时 http://tieba.baidu.com/p/2303522172 [菜鸟教你做MAD]Vegas制作MAD入门教程 http://tieb ...
phalcon: eventManager事件管理（结合dispatcher调度控制器）制作简单的acl
制作简单的acl, dispatcher(专门用来加载或调度或跳转到相应的url地址即XXXcontroller的调度器或控制器,能够在controller执行前对controller进行停止跳转等) ...
python爬虫图片-如何用Python来制作简单的爬虫，爬取到你想要的图片
原标题:如何用Python来制作简单的爬虫,爬取到你想要的图片在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我 ...
hbuilderx制作简单网页_网页制作的基本步骤是怎样的？制作简单网页的具体操作有哪些呢？...
网页制作的基本步骤是怎样的?制作简单网页的具体操作有哪些呢?如果是详细的网页制作,设计和制作一样关键.有可能是网页设计制作新手对简单网页制作设计的具体操作不太清楚.更别说设计详细的网页了.下面一起来看 ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
python中excel制作成绩报表_python制作简单excel统计报表2之操作excel的模块openpyxl简单用法...
python制作简单excel统计报表2之操作excel的模块openpyxl简单用法 # coding=utf-8 from openpyxl import Workbook, load_workb ...

GoJs制作简单的流程图

一、简介

二、简单的流程图制作

第一步

第二步

第三步

GoJs制作简单的流程图相关推荐

最新文章

热门文章

GoJs制作简单的流程图

一、 简介

二、简单的流程图制作

第一步

第二步

第三步

GoJs制作简单的流程图相关推荐

最新文章

热门文章

一、简介