代码如下：

<!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绘制流程图的更多相关文章

  1. 记录使用echarts的graph类型绘制流程图全过程（二）- 多层关系和圆形图片的设置

    本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置 图片的设置 如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态 ...

  2. 玩转控件:GDI+动态绘制流程图

       前言 今天,要跟大家一起分享是"GDI+动态生成流程图"的功能.别看名字高大上(也就那样儿--!),其实就是动态生成控件,然后GDI+绘制直线连接控件罢了.实际项目效果图如下 ...

  3. 使用SVG绘制流程图

    本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...

  4. 记录使用echarts的graph类型绘制流程图全过程（一）-x，y位置的计算

    先说下本次案例业务需求,输入2个节点,获取数据后绘制出2个节点间的路径,之前使用的是网状图,但是网状图的效果不佳,需要转换成流程图的模式: 那么如何在不修改数据的情况下,实现类似效果尼? 看了下ech ...

  5. canvas绘制流程图

    最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件 代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axs ...

  6. Graphviz 绘制流程图

    凝视说明非常具体.不再详述. digraph G{ //dot 是一种画图语言,它能够方便你採用图形的方式高速.直观地表达一些想法, //比方描写叙述某个问题的解决方式,构思一个程序的流程,澄清一堆貌 ...

  7. JointJS绘制流程图

    摘要: JointJS是一个javascript图表库.你可以使用它制作静态或者动态的图表.关系表.流程图. 效果图:

  8. 基于GOJS绘制流程图

    基于GOJS封装的流程图设计(展示)工具类,主要分为两个工具类: 工具库依赖于go.js.jquery以及layer.js http://gojs.net/ http://jquery.com/ ht ...

  9. AntV G6绘制流程图学习例子

    下面代码可以直接贴到html文件中运行看效果. 代码说明 js中data是一个json变量,里面有两个关键对象"nodes.edges",分别来描述节点.节点间箭线. 更多&quo ...

随机推荐

  1. 1. Nagios和 NagiosQL安装及配置

    目录 1. Nagios 和 NagiosQL简介 2. Nagios+NagiosQL搭建环境说明 3. Nagios.Nagios-plugins和NagiosQL的安装 4. 配置NagiosQ ...

  2. PHP中的数组

    一.数组的基础 php数组的分类 按照下标的不同,php分为关联数组与索引数组: 索引数组:下标从零依次增长(以前那种) 关联数组:下标为字符串格式,每个下标字符串与数组的值一一关联对应(有点儿像对象 ...

  3. 模拟stringBeanFactory解析xml

    思路:根据源码分析,将配置Bean类信息存放到xml文件中,通过解析xml, 然后反射拿到对象 存放到集合中 这里选择hashmap(键放置类名,值放置对象)存放,使用时使用get方法通过键(类名)拿 ...

  4. list转换string

    方法1 "".join 若list中为字符型 str = "".join(list) >>> L=['a','b','c'] >> ...

  5. solr7.5--win10--部署使用

    2018年8月份学习使用solr,当时下载的版本是solr7.5,写这篇博文的时候是2019年3月份,solr此时已经出到了8.0版本.一个大版本的变迁肯定有很多的改动,暂时还未研究就不赘述了. 此篇 ...

  6. 413 重温HTML + css 考试 + 访问HTML元素

    考试前的复习 初学css1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式, ...

  7. 【转载】大白话Docker入门（一）

    原文:https://yq.aliyun.com/articles/63035 随着docker现在越来越热门,自己也对docker的好奇心也越来越重,终于忍不住利用了一些时间把docker学习一遍. ...

  8. 【Android手机测试】OOM

    当大多数应用程序都消耗完自己的内存的时候,因为这些应用程序的内存需求加起来超出了物理内存(包括swap)的容量,内核(OOM killer)必须杀掉一些进程才能腾出空间保障系统正常运行 Linux内核 ...

  9. day12 函数对象，名称空间与作用域

    """ 今日内容: 1.函数参数传值细节 2.三元表达式 3.列表及字典推导式 4.函数对象 5.名称空间与作用域 6.函数的嵌套定义初识 ""&qu ...

  10. AI应用开发实战（转）

      AI应用开发实战 - 从零开始配置环境 与本篇配套的视频教程请访问:https://www.bilibili.com/video/av24421492/ 建议和反馈,请发送到https://git ...