gojs实现工厂加工工序流程示意图动画效果代码
代码语言:html
所属分类:图表
代码描述:gojs实现工厂加工工序流程示意图动画效果代码,点击设备和显示详细文字和图片展示,可以自己修改样式。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .diagramStyling { background-color: #DAE4E4; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script> <div id="myDiagramDiv" class="diagramStyling" style="width:700px; height:400px"></div> <img src="" id="Image" /> <h1 id="Title"></h1> <script > // build GraphObject var $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element { maxSelectionCount: 1, // users can select only one part at a time "toolManager.hoverDelay": 10, // how quickly tooltips are shown initialAutoScale: go.Diagram.Uniform, // scale to show all of the contents "ChangedSelection": onSelectionChanged // view additional information }); function infoString(obj) { var part = obj.part; if (part instanceof go.Adornment) part = part.adornedPart; var msg = ""; if (part instanceof go.Link) { msg = ""; } else if (part instanceof go.Node) { msg = part.data.text + ":\n\n" + part.data.description; } return msg; } var colors = { "red": "#be4b15", "green": "#52ce60", "blue": "#6ea5f8", "lightred": "#fd8852", "lightblue": "#afd4fe", "lightgreen": "#b9e986", "pink": "#faadc1", "purple": "#d689ff", "orange": "#fdb400" }; // A data binding conversion function. Given an name, return the Geometry. // If there is only a string, replace it with a Geometry object, which can be shared by multiple Shapes. function geoFunc(geoname) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0