gojs实现工厂加工工序流程示意图动画效果代码

代码语言:html

所属分类:图表

代码描述:gojs实现工厂加工工序流程示意图动画效果代码,点击设备和显示详细文字和图片展示,可以自己修改样式。

代码标签: 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