您的位置：首页 > Web前端 > JavaScript

goJS 绘制web流程图

2018-01-12 13:52 162 查看

goJS 绘制web流程图

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>诉讼流程</title>
<link href="${ctxStatic}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script>
<script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<link href="${ctxStatic}/modules/front/liucheng/css/jquery.orgchart.css?s=1" rel="stylesheet">
<link href="${ctxStatic}/modules/front/liucheng/css/liucheng.css?s=1" rel="stylesheet">
<script src="${ctxStatic}/modules/front/liucheng/js/jquery.orgchart.js?s=1"></script>
<script src="${ctxStatic}/modules/front/liucheng/js/go.js?s=1"></script>

<style>
body{
background-image: url('${ctxStatic}/modules/front/index/image/bg.jpg');
background-repeat:no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 100% 100%;
background-attachment:fixed;
-moz-background-size: 100% 100%;
}
.page-content{
min-height: 768px;
}
.page-header{
border-bottom:0px !important;
}
.page-header h1{
color:#fff;
}

</style>
</head>

<body>
<div class="main-content">
<div class="page-content">
<a id="fanhui" onclick="javascript :history.go(-1);" class="pull-left btn btn-lg btn-info" >返回</a>
<div class="page-header">
<h1 class="text-center">诉讼流程</h1>
</div>
<div class="row row-from">
<div class="col-xs-12">
<%--<img class="img-responsive center-block" src="${ctxStatic}/modules/front/liucheng/image/liucheng.png" >--%>


<div id="chart-container" class="chart-container" style="width:100%; min-height:768px;"></div>


</div>
</div>
</div>
</div>
</body>
</html>

<script type="text/javascript">

var $ = go.GraphObject.make;//

var myDiagram =$(go.Diagram, //定义的画布
"chart-container",//要渲染的DIV 的Id 名称,1中html中的id
{
initialContentAlignment: go.Spot.Center,
initialAutoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center,//对齐方式
layout://画布里的元素布局方式　　　　
$(go.ForceDirectedLayout,{
defaultSpringLength: 30,
defaultElectricalCharge: 100
})
});

myDiagram.layout =
$(go.TreeLayout,
{ angle: 90, layerSpacing: 35 });

$(go.TextBlock,{
text:"www.peng8.net",
stroke: "red",
font: "bold 10pt helvetica, bold arial, sans-serif",
margin: 2
});

myDiagram.nodeTemplate = $(go.Node, "Auto",
$(go.Shape, "Rectangle",//形状:一个圆角矩形，默认填充色为白色，边框颜色为红色
{
width:100,
height:60,
margin: 2,
fill: "#5e9cd3",
background: '#394',
stroke: "#5e9cd3"
},
new go.Binding("fill", "color")
),
$(go.TextBlock,//文本
{
font: "bold 10pt helvetica, bold arial, sans-serif",
stroke: "#fff",
margin: 2
},
new go.Binding("text", "text"))//申明动态绑定text属性，将数据源中提供text字段的值赋值给当前的text属性
);

myDiagram.linkTemplate =
$(go.Link,
{ adjusting: go.Link.Stretch, reshapable: true },
new go.Binding("points").makeTwoWay(),
$(go.Shape, //用来画线
{
isPanelMain: true,
strokeWidth: 2,
stroke: "#fff"

}),
$(go.Shape, //用来画箭头
{
toArrow: "standard",
fill: "#fff",
stroke: "#fff"
}),
$(go.TextBlock, //用来显示线上的label
{
textAlign: "center",
segmentOffset: new go.Point(0, -10),
font: "10pt helvetica, arial, sans-serif",
stroke: "#555555",
margin: 4
},
new go.Binding("text", "text")
)
);

var jsonList = {
nodeKeyProperty: "key", //关联的主键
nodeDataArray: [
{key:1,text:"节点1"},
{key:2,text:"节点2"},
{key:3,text:"节点3"},
{key:4,text:"节点4"},
{key:5,text:"节点5"},
{key:6,text:"节点6"}],//节点数据
linkDataArray: [
{from:1,to:2},
{from:2,to:3},
{from:2,to:5},
{from:3,to:6},
{from:5,to:4}]//点对应关系数据，上面from 和to 即开始节点的主键指向结束节点的主键
};

//7.最后就是如何给流程图填充动态数据了，这里我采用了json的方式，流程图赋值就是一句话就够了
myDiagram.model = go.Model.fromJson(jsonList);

$(function() {

});
</script>效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航