goJS 绘制web流程图

最新推荐文章于 2024-06-07 13:37:04 发布

kenhins

最新推荐文章于 2024-06-07 13:37:04 发布

阅读量5.5k

点赞数

分类专栏： Javascript jQuery

本文链接：https://blog.csdn.net/kenhins/article/details/79043198

版权

Javascript 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

jQuery

40 篇文章 0 订阅

订阅专栏

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" οnclick="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" >--%>
					<!-- flowchart start -->

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

				</div>
			</div>
		</div>
	</div><!-- /.main-content -->
</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>

效果图：

kenhins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
goJS 绘制web流程图

goJS 绘制web流程图诉讼流程 body{ background-image: url('${ctxStatic}/modules/front/index/image/bg.jpg'); background-repeat:no-repeat; background-position-x: center;
复制链接

扫一扫