mxgraph

mxGraph是一套用于图表图形的显示交互的开发工具库。支持的技术有：Java JavaScript PHP .NET。

Java版本用于创建高性能的桌面应用程序。
JavaScript版本的mxGraph是一个JS绘图组件,适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序,即主要用在所有的工作于网页浏览器本身的应用。

JavaScript版本主要技术优势:
不需要第三方插件。
涉及的技术是开放的。
标准化的技术，应用程序可以轻松部署到最大数量的浏览器用户，而不需要在用户端的电脑进行额外的配置或安装。
JavaScript版本主要技术劣势：
渲染速度。当用户屏幕上可见的单元数量攀升到数百时，在大多数浏览器上重绘减缓到超出可接受的水平。在信息管理理论中，同时显示数百个单元通常是不正确的，因为用户无法一下子理解这么多的数据。有几种方法，我们统称为复杂性管理机制，可以用来限制信息的数量，达到合理水平，从而保持可接受的重绘率。复杂性管理在本用户手册后面的章节中有详细描述。

下载地址： http://www.jgraph.com/mxdownload.html
中文手册： http://www.mxgraph.cn/doc/mxgraph

如何使用

在HTML页面加载mxGraph核心js文件即可使用mxGraph所有功能，几乎所有的js工具库都是这样使用的（JQuery ExtJs…）。

下载mxGraph并解压
https://github.com/jgraph/mxgraph/releases/tag/v3.6.0.0

mxGraph/javascript/src 目录下包含了开发mxGraph项目所需要的所有东西,复制一份到项目中并指定正确的路径即可使用

PS : 当显示的元素数量增多到上百个时， mxGraph的渲染速度会相当的缓慢。这将使用复杂性管理机制来解决。

mxgraph的包

JavaScript的版本分成8个package。顶层是 mxClient 类。
editor package 提供实现图表编辑器所需的类在这个包中的主类是mxEditor。

view and model packages 实现图形组件, mxGraph. 它指的是一个 mxGraphModel包含 mxCells和缓存 mxGraphView的cells状态.
handler, layout and shape packages 包含事件监听器、布局算法和形状, 事件监听器包括 mxRubberband for rubberband selection, mxTooltipHandler for tooltips and mxGraphHandler for basic cell modifications. mxCompactTreeLayout implements a tree layout algorithm, and the shape package provides various shapes, which are subclasses of mxShape.
util package 提供了实用工具类包括mxclipboard复制粘贴, 拖放, mxConstants 键和值的样式, mxEvent and mxUtils 跨浏览器的事件处理和通用函数,mxResources 国际化 and mxLog 控制台输出。
io package 实现将JavaScript对象到XML的通用 mxObjectCodec 。主类是 mxCodec. mxCodecRegistry 是全球注册自定义的编解码器。

hello,world简单例子

显示hello和world两个格子相连。

1)新建一个helloWorld.html文件
2)放入一个container用于装载mxGraph
3)检测浏览器支持与否
4)画图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        mxBasePath = 'src/';
    </script>
    <script type="text/javascript" src="src/js/mxClient.js"></script>
</head>
<script type="text/javascript">
    function main(container) {
        // 检查浏览器支持
        if (!mxClient.isBrowserSupported()) {
            mxUtils.error('Browser is not supported!', 200, false);
        }
        else {
            // 在指定容器中创建图形
            var model = new mxGraphModel();
            var graph = new mxGraph(container, model);
            // 激活橡皮圈选择
            new mxRubberband(graph);
            // 拿到插入单元的默认父节点。
            // 这通常是根节点的第一子节点（如0层）。
            var parent = graph.getDefaultParent();
            // 在一个步骤中，加入所有的单元到模型中
            model.beginUpdate();
            try {
                var v1 = graph.insertVertex(parent, null,
                        'Hello', 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null,
                        'World', 200, 150, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
            }
            finally {
                // 更新显示
                model.endUpdate();
            }
        }
    }
    ;
</script>
<!-- 页面传递图形的容器给程序 -->
<body onload="main(document.getElementById('container'))">
<div id="container"></div>
</body>
</html>

在script中的mxBasePath:
一个JavaScript变量，用来定义CSS,图片,资源和js的使用的目录。是一段JavaScript代码,并需要被放置在脚本标记内。它必须在加载mxClient.js之前,而且不应该斜线。

mxClient.js
这是mxGraph库的路径。

onload=”main(document.getElementById(‘container’))”
创建容器,onload加载网页时会被调用。它通过在传递即下定义的一个div 容器作为参数。
mxGraph组件将被放置在这个div容器中。

mxClient.isBrowserSupported()
任何mxGraph应用程序的第一行应该检查浏览器的支持，如果不支持应该适当退出。如果浏览器支持， mxGraph将在div容器内被创建，在开始/结束更新调用之间，三个单元被添加到图形中。

部分方法

// 无效
graph.setEnabled(false);

// 连接
graph.setConnectable(true);

// 提示信息
graph.setTooltips(true);

// 右键移动容器坐标轴
graph.setPanning(true);

// 容器大小自适应
graph.setResizeContainer(true);

// 使用浏览器默认的按键监听
new mxRubberband(graph);

// 动态改变样式
graph.getView().updateStyle = true;

// 重复连接
graph.setMultigraph(false);

// Label 将显示 Html 格式的 Value
graph.setHtmlLabels(true);

// 禁用浏览器默认的右键菜单栏
mxEvent.disableContextMenu(container);

// 允许移动 Vertex 的 Label
graph.setVertexLabelsMovable(true);

// 禁止改变元素大小
graph.setCellsResizable(false);

// 允许连线的目标和源是同一元素
graph.setAllowLoops(true);

//选中所有的线
raph.selectEdges();

//使线在所有元素的底下
graph.orderCells(true);

//取消选中的元素
graph.clearSelection();

——节点样式设置
1、如何设节点颜色？
通过属性fillColor（填充色）、gradientColor（渐变色），设为一样的颜色就是节点颜色了。
2、如何设置透明颜色？
在配置文件中none可设为默认颜色，transparent可设透明颜色
3、节点不可改变大小
0否，1是
4、节点与连线紧密连接，无空隙

5、节点颜色渐变方向？

6、如果不用配置文件？
你可以通过cell.setStyle(“XXXX”) 来实现样式的动态设置。
XXX形如：”样式属性=属性值;样式属性2=属性值2；”，可通过mxGraph官方doc搜索mxConstants来查找你需要的属性。
若设定选中节点的样式，还可通过graph.setCellStyles(mxConstants.属性,mxConstants.属性值);来设定该节点的样式。如：graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION,mxConstants.DIRECTION_NORTH);
参考资料
mxGraph 教程1 - 开发入门指南
 mxGraph 用户手册 – JavaScript客户端

2016-11-14