mxGraph绘制流程图
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title> <script src="../../js/lib/jquery.min.js" type="text/javascript" language="JavaScript" charset="utf-8"></script>
<script type="text/javascript">
mxBasePath = '../../js/lib/mxgraph';
</script> <script type="text/javascript" src="../../js/lib/mxgraph/js/mxClient.js"></script> <script type="text/javascript">
var xml = null;
var graph = null; function createGraph(container)
{
var graph = new mxGraph(container);
graph.setTooltips(true);
graph.setEnabled(true); // Disables folding
graph.isCellFoldable = function(cell, collapse)
{
return false;
}; // Creates the stylesheet for the process display
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_STROKECOLOR] = 'black';
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FILLCOLOR] = 'white';
//style[mxConstants.STYLE_GRADIENTCOLOR] = '#F0F0F0';
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_SHADOW] = true;
style[mxConstants.STYLE_FONTSTYLE] = 1;
style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_STROKECOLOR] = 'black';
style[mxConstants.STYLE_ROUNDED] = true; return graph;
}; //加载数据
function loadData() {
location=location;//刷新页面
} $(function () { var pid = $('#name').val();
$.ajax({
type:"POST",
async:false,
url:"../../index.php/?action=ticket&method=getProcess",
data:{
pid:pid
},
success:function(data){
$('#txt').val(data);
}
}); xml = $('#txt').val(); //绘图
var container = document.getElementById('graphContainer');
graph = createGraph(container);
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel()); //定时刷新页面
setTimeout(function () {
setInterval(loadData, 10000);
}, 1000); }); </script>
</head> <!-- Page passes the container and control to the main function -->
<body> <!-- Acts as a container for the graph -->
<div id="graphContainer" style="overflow:hidden;position:relative;cursor:default;">
</div> <input type='hidden' id='name' value=" <?php echo $_REQUEST['uid']; ?> "></input> <input type='hidden' type='text' id='txt'></input>
<br>
</body>
</html>
mxGraph绘制流程图的更多相关文章
- 记录使用echarts的graph类型绘制流程图全过程(二)- 多层关系和圆形图片的设置
本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置 图片的设置 如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态 ...
- 玩转控件:GDI+动态绘制流程图
前言 今天,要跟大家一起分享是"GDI+动态生成流程图"的功能.别看名字高大上(也就那样儿--!),其实就是动态生成控件,然后GDI+绘制直线连接控件罢了.实际项目效果图如下 ...
- 使用SVG绘制流程图
本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...
- 记录使用echarts的graph类型绘制流程图全过程(一)-x,y位置的计算
先说下本次案例业务需求,输入2个节点,获取数据后绘制出2个节点间的路径,之前使用的是网状图,但是网状图的效果不佳,需要转换成流程图的模式: 那么如何在不修改数据的情况下,实现类似效果尼? 看了下ech ...
- canvas绘制流程图
最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件 代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axs ...
- Graphviz 绘制流程图
凝视说明非常具体.不再详述. digraph G{ //dot 是一种画图语言,它能够方便你採用图形的方式高速.直观地表达一些想法, //比方描写叙述某个问题的解决方式,构思一个程序的流程,澄清一堆貌 ...
- JointJS绘制流程图
摘要: JointJS是一个javascript图表库.你可以使用它制作静态或者动态的图表.关系表.流程图. 效果图:
- 基于GOJS绘制流程图
基于GOJS封装的流程图设计(展示)工具类,主要分为两个工具类: 工具库依赖于go.js.jquery以及layer.js http://gojs.net/ http://jquery.com/ ht ...
- AntV G6绘制流程图学习例子
下面代码可以直接贴到html文件中运行看效果. 代码说明 js中data是一个json变量,里面有两个关键对象"nodes.edges",分别来描述节点.节点间箭线. 更多&quo ...
随机推荐
- Mac 下 Eclipse 添加 Dynamic Web Project 并配置 Tomcat
最近拿到了一个 Dynamic Web Project,我的 Mac 上的 Eclipse 之前没有过这类型的项目,所以导入之后无法正常运行.下面是我记录的如何配置 Eclipse 使之能够运行 Dy ...
- 责任链模式-Chain of Responsibility(Java实现), 例1
责任链模式-Chain of Responsibility, 例1 在这种模式中,通常每个接收者都包含对另一个接收者的引用.如果一个对象不能处理该请求,那么它会把相同的请求传给下一个接收者,依此类推. ...
- jmeter中的函数
1.函数帮助 1.tool-------->function helper dialog 可以查看函数帮助 2.jmeter中的函数 1.函数格式 ${__funcctionname(var ...
- Python的一些高级特性以及反序列化漏洞
0x01 简述 文章主要记录一下python高级特性以及安全相关的问题 python作为脚本语言,其作为高级语言是由c语言开发的,关于python的编译和链接可以看向这里https://github. ...
- vue 点击展开显示更多 点击收起部分隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java -jar和hadoop jar的区别
hadoop jar可以看做是java -jar的升级,可以和它一样带参数,程序一样的解析 不同的是hadoop jar运行的jar包他会依赖于hadoop安装目录下面的一些环境,并且你jar包里指定 ...
- python matplotlib 简单生成图
import numpy as np import pandas as pd from matplotlib import pyplot as plt data = pd.DataFrame([[1, ...
- “放到桌面”的Servlet实现
复习下Servlet下载文件, 当response把ContentType设置成application/xxxx的时候呢,浏览器会默认启动下载,而不是试图打开. 通过给httpHeader里面加入内容 ...
- Spring Cloud 2.x-前言
Spring Cloud Spring Boot 简介 模块介绍 文章列表 简介 微服务已经成为企业开发的标配,阿里的Dubbo已经被企业大规模使用,Spring Cloud作为后起之秀,同时也是 ...
- 04mycat数据切分
自定义切分文件 [root@mycat mycat]# cat conf/customer-hash-int.txt 101=0 102=0 103=0 104=1 105=1 106=1 Rule. ...