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

代码语言：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) {
  var geo = icons[geoname];
  if (typeof geo === "string") {
    geo = icons[geoname] = go.Geometry.parse(geo, true);
  }
  return geo;
}

myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
  locationObjectName: 'main',
  locationSpot: go.Spot.Center,
  toolTip:
  $(go.Adornment, "Auto",
  $(go.Shape, { fill: "#CCFFCC" }),
  $(go.TextBlock, { margin: 4, width: 140 }, //https://gojs.net/latest/intro/toolTips.html
  new go.Binding("text", "", infoString).ofObject()))
  /*toolTip:
    $("ToolTip",
      $(go.TextBlock, { margin: 4, width: 140 }, //https://gojs.net/latest/intro/toolTips.html
        new go.Binding("text", "", infoString).ofObject())
    )*/ },

new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
// The main element of the Spot panel is a vertical panel housing an optional icon,
// plus a rectangle that acts as the port
$(go.Panel, "Vertical",
$(go.Shape, {
  name: 'icon',
  width: 1, height: 1,
  stroke: null, strokeWidth: 0,
  fill: colors.blue },

new go.Binding("fill", "color", function (c) {return colors[c];}),
new go.Binding("width", "iconWidth"),
new go.Binding("height", "iconHeight"),
new go.Binding("geometry", "icon", geoFunc)),
$(go.Shape, {
  name: 'main',
  width: 40, height: 40,
  margin: new go.Margin(-1, 0, 0, 0),
  portId: "",
  stroke: null, strokeWidth: 0,
  fill: colors.blue },

new go.Binding("fill", "color", function (c) {return colors[c];}),
new go.Binding("width", "portWidth"),
new go.Binding("height", "portHeight"))),


$(go.TextBlock, {
  font: "Bold 14px Lato, sans-serif",
  textAlign: "center",
  margin: 3,
  maxSize: new go.Size(100, NaN),
  alignment: go.Spot.TopCenter,
  alignmentFocus: go.Spot.BottomCenter },

new go.Binding("text")));



// Some links need a custom to or from spot
function spotConverter(dir) {
  if (dir === "left") return go.Spot.LeftSide;
  if (dir === "right") return go.Spot.RightSide;
  if (dir === "top") return go.Spot.TopSide;
  if (dir === "bottom") return go.Spot.BottomSide;
  if (dir === "rightsingle") return go.Spot.Right;
}

myDiagram.linkTemplate =
$(go.Link, {
  toShortLength: -2,
  fromShortLength: -2,
  layerName: "Background",
  routing: go.Link.Orthogonal,
  corner: 15,
  fromSpot: go.Spot.RightSide,
  toSpot: go.Spot.LeftSide },

// make sure links come in from the proper direction and go out appropriately
new go.Binding("fromSpot", "fromSpot", function (d) {return spotConverter(d);}),
new go.Binding("toSpot", "toSpot", function (d) {return spotConverter(d);}),

new go.Binding("points").makeTwoWay(),
// mark each Shape to get the link geometry with isPanelMain: true
$(go.Shape, { isPanelMain: true, stroke: colors.lightblue, strokeWidth: 10 },
new go.Binding("stroke", "color", function (c) {return colors[c];})),
$(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40] }));



// build model
var model = $(go.GraphLinksModel);

model.nodeDataArray =
[
{
  key: 1,
  pos: '-180 -57',
  icon: 'natgas',
  iconWidth: 30,
  iconHeight: 60,
  portHeight: 20,
  text: 'Gas\nCompanies',
  description: 'Provides natural gas liquids (NGLs).',
  caption: 'Gas Drilling Well',
  imgsrc: '//repo.bfw.wiki/bfwrepo/image/637adbce2f3ba.png' },

{
  key: 2,
  pos: '-180 100',
  icon: 'oil',
  iconWidth: 40,
  iconHeight: 60,
  portHeight: 20,
  text: 'Oil\nCompanies',
  description: 'Provides associated petroleum gas (APG). This type of gas used to be released as waste from oil drilling, but is now commonly cap.........完整代码请登录后点击上方下载按钮下载查看