【流程图示例】轻量级流程图控件GoJS示例连载（一）：最小化

2024-11-05 技术教程

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和 HTML5 Canvas程序中创建流程图，且极大地简化你的JavaScript / Canvas 程序。

小编为大家准备了一套完整的GoJS的示例，将以连载的形式展开，供大家学习和交流讨论。

这不是GoJS的真正最小化演示，因为我们确实指定了自定义Node模板，但它非常简单。如果单击链接，示例的完整来源如下所示。

此示例使用Node模板设置Diagram.nodeTemplate，该模板数据绑定文本字符串和形状的填充颜色。有关构建自己的模板和模型数据的概述，请参阅“入门教程”。

该Diagram.initialContentAlignment设置导致图表内容出现在图的视口的中心。

使用鼠标和常用键盘命令，你可以平移，选择，移动，复制，删除和撤消/重做。在触摸设备上，使用手指作为鼠标，并保持手指静止以显示上下文菜单。默认上下文菜单支持当时为所选对象启用的大多数标准命令。

有关更精细和更有说服力的样本，请参阅基本示例。有关从服务器加载JSON数据的示例，请参阅最小化JSON示例。有关从服务器加载XML数据的示例，请参阅最小化XML示例。

以下为在页面中查看此示例页面的源代码：

functioninit(){if(window.goSamples)goSamples();//initforthesesamples--youdon'tneedtocallthisvar$=go.GraphObject.make;//forconcisenessindefiningtemplatesmyDiagram=$(go.Diagram,"myDiagramDiv",//createaDiagramfortheDIVHTMLelement{initialContentAlignment:go.Spot.Center,//centerthecontent"undoManager.isEnabled":true//enableundo&redo});//defineasimpleNodetemplatemyDiagram.nodeTemplate=$(go.Node,"Auto",//theShapewillgoaroundtheTextBlock$(go.Shape,"RoundedRectangle",{strokeWidth:0,fill:"white"},//Shape.fillisboundtoNode.data.colornewgo.Binding("fill","color")),$(go.TextBlock,{margin:8},//someroomaroundthetext//TextBlock.textisboundtoNode.data.keynewgo.Binding("text","key")));//butusethedefaultLinktemplate,bynotsettingDiagram.linkTemplate//createthemodeldatathatwillberepresentedbyNodesandLinksmyDiagram.model=newgo.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:"Beta",to:"Beta"},{from:"Gamma",to:"Delta"},{from:"Delta",to:"Alpha"}]);}

<divid="sample"deep="0"><divid="myDiagramDiv"style="border:solid1pxblack;width:400px;height:400px"></div><p>Thisisn'tatruly<i>minimal</i>demonstrationof<b>GoJS</b>,becausewedospecifyacustomNodetemplate,butit'sprettysimple.Thewholesourceforthesampleisshownbelowifyouclickonthelink.</p><p>Thissamplesetsthe<a>Diagram.nodeTemplate</a>,witha<a>Node</a>templatethatdatabindsboththetextstringandtheshape'sfillcolor.Foranoverviewofbuildingyourowntemplatesandmodeldata,seethe<ahref="../learn/index.html">GettingStartedtutorial.</a></p><p>The<a>Diagram.initialContentAlignment</a>settingcausesthediagram'scontentstoappearinthecenterofthediagram'sviewport.</p><p>Usingthemouseandcommonkeyboardcommands,youcanpan,select,move,copy,delete,andundo/redo.Ontouchdevices,useyourfingertoactasthemouse,andholdyourfingerstationarytobringupacontextmenu.Thedefaultcontextmenusupportsmostofthestandardcommandsthatareenabledatthattimefortheselectedobject.</p><p>Foramoreelaborateandcapablesample,seethe<ahref="basic.html">Basic</a>sample.ForasamplethatloadsJSONdatafromtheserver,seethe<ahref="minimalJSON.html">MinimalJSON</a>sample.ForasamplethatloadsXMLdatafromtheserver,seethe<ahref="minimalXML.html">MinimalXML</a>sample.</p></div>

以下为在GitHub上查看此示例页面的源代码：

<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"><title>MinimalGoJSSample</title><metaname="description"content="Analmostminimaldiagramusingaverysimplenodetemplateandthedefaultlinktemplate."/><metacharset="UTF-8"><scriptsrc="../release/go.js"></script><scriptsrc="../assets/js/goSamples.js"></script><scriptid="code">functioninit(){if(window.goSamples)goSamples();//initforthesesamples--youdon'tneedtocallthisvar$=go.GraphObject.make;//forconcisenessindefiningtemplatesmyDiagram=$(go.Diagram,"myDiagramDiv",//createaDiagramfortheDIVHTMLelement{initialContentAlignment:go.Spot.Center,//centerthecontent"undoManager.isEnabled":true//enableundo&redo});//defineasimpleNodetemplatemyDiagram.nodeTemplate=$(go.Node,"Auto",//theShapewillgoaroundtheTextBlock$(go.Shape,"RoundedRectangle",{strokeWidth:0,fill:"white"},//Shape.fillisboundtoNode.data.colornewgo.Binding("fill","color")),$(go.TextBlock,{margin:8},//someroomaroundthetext//TextBlock.textisboundtoNode.data.keynewgo.Binding("text","key")));//butusethedefaultLinktemplate,bynotsettingDiagram.linkTemplate//createthemodeldatathatwillberepresentedbyNodesandLinksmyDiagram.model=newgo.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:"Beta",to:"Beta"},{from:"Gamma",to:"Delta"},{from:"Delta",to:"Alpha"}]);}</script></head><bodyonload="init()"><divid="sample"><divid="myDiagramDiv"style="border:solid1pxblack;width:400px;height:400px"></div><p>Thisisn'tatruly<i>minimal</i>demonstrationof<b>GoJS</b>,becausewedospecifyacustomNodetemplate,butit'sprettysimple.Thewholesourceforthesampleisshownbelowifyouclickonthelink.</p><p>Thissamplesetsthe<a>Diagram.nodeTemplate</a>,witha<a>Node</a>templatethatdatabindsboththetextstringandtheshape'sfillcolor.Foranoverviewofbuildingyourowntemplatesandmodeldata,seethe<ahref="../learn/index.html">GettingStartedtutorial.</a></p><p>The<a>Diagram.initialContentAlignment</a>settingcausesthediagram'scontentstoappearinthecenterofthediagram'sviewport.</p><p>Usingthemouseandcommonkeyboardcommands,youcanpan,select,move,copy,delete,andundo/redo.Ontouchdevices,useyourfingertoactasthemouse,andholdyourfingerstationarytobringupacontextmenu.Thedefaultcontextmenusupportsmostofthestandardcommandsthatareenabledatthattimefortheselectedobject.</p><p>Foramoreelaborateandcapablesample,seethe<ahref="basic.html">Basic</a>sample.ForasamplethatloadsJSONdatafromtheserver,seethe<ahref="minimalJSON.html">MinimalJSON</a>sample.ForasamplethatloadsXMLdatafromtheserver,seethe<ahref="minimalXML.html">MinimalXML</a>sample.</p></div></body></html>

想要查看在线操作示例，可以点击此处>>>>>