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