Mxgraph

mxGraph入门与部署

最新推荐文章于 2025-07-29 15:43:02 发布

原创最新推荐文章于 2025-07-29 15:43:02 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

jGraph 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何创建包含mxGraph的HTML页面，包括设置JavaScript变量mxBasePath，加载mxClient.js库，创建图表容器以及在图中添加单元格。还讨论了mxGraph的部署和调试，涉及生产与开发版本的区别。

1. Hello World!

Creating an HTML page that links the mxGraph client JavaScript,
Creating a container to place the mxGraph into,
Adds the required cells to that graph.

<script type="text/javascript">mxBasePath = 'javaScript/src'</script>
    <script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

mxBasePath:这是一个JavaScript变量，定义了css、图像、资源和js目录所在的目录。它是JavaScript代码，需要放在脚本标记中。这必须在加载mxClient.js的行之前，并且后面不应该有斜杠。

mxClient.js:这是到mxGraph库的路径。如果HTML文件在本地执行，则路径可能是计算机的本地路径或公共Internet路径。如果html页面是从web服务器下载的，那么路径通常是公共Internet路径

Creation of the container:在代码的底部，在body元素中，定义了加载web页面时调用的函数(onload的值)。它将div容器作为参数传递，该参数在下面定义。这个div是mxGraph组件将放在其中的容器。在本例中，应用了网格背景，就像在绘图应用程序中常用的那样。在创建容器时，除了背景和容器的宽度和高度之外，没有描述图形可视化的其他部分。
注意，如果不希望出现滚动条，应该始终使用overflow:hidden样式

The entry function: 在本例中，文件的主要代码是在页面加载时执行的条目方法。这是JavaScript代码，必须在JavaScript脚本元素中。任何mxGraph应用程序的第一行都应该检查是否支持浏览器，如果不支持，则退出。如果支持浏览器，则在div容器中创建一个mxGraph，并在开始/结束更新调用之间向图添加三个单元格。

if (!mxClient.isBrowserSupported())
         {
            mxUtils.error('Browser is not supported!', 200, false);//检查浏览器是否支持MxGraph
         }
         else{
}

  // Creates the graph inside the given container 
            var graph = new mxGraph(container); 在<div>嵌入graph容器

js是一个JavaScript文件，它结合了mxGraph的所有JavaScript源代码。从web服务器下载时，由于每个文件所需的请求/确认的开销，将所有JavaScript作为一个文件获得要比作为许多单独的文件快得多。速度的增加通常至少是x2，尽管它随着服务器的容量而变化，服务器可以在一个客户机上打开并行套接字。
JavaScript代码及其依赖项都放在head元素中。
默认情况下，Internet Explorer启用了安全选项，当试图从本地文件系统运行JavaScript时，这些选项会导致用户提示。可以在options菜单中禁用此功能，但是请注意，从本地文件系统运行不是mxGraph的部署场景，这只会在开发期间发生
您的应用程序可以在HTML文件中编写并链接到应用程序中，也可以在单独的JavaScript源代码中编写并链接到HTML中，就像示例中的mxClient.js文件一样

2 mxGraph Deployment and Debugging

有两个版本的mxclient.js文件，一个用于生产使用，另一个用于开发/调试。javascript/src/js/mxClient.js是产品版本，javascript/debug/js/mxClient.js是开发版本。第一个版本删除了所有换行，以确保文件尽可能小。这有破坏大多数JavaScript调试器的副作用。在开发过程中，建议您使用包含换行符的调试版本，以便在支持的浏览器中进行调试

两个mxClient.js文件都是mxGraph的整个JavaScript源文件，为了减小文件大小，删除了所有的空格和注释。在调试时，如果需要调试到mxGraph库本身，则使用单独的源文件更容易。mxGraph的源代码版本包含javascript/devel目录中的source.zip文件中的完整源代码。将其解压缩到mxBasePath并删除完整的mxClient.js文件的负载，可以更容易地调试mxGraph。注意，源zip中的mxclient.js文件是一个引导文件，它加载所有其他JavaScript源代码

通过压缩代码，可以进一步提高客户机源代码的下载速度。所有现代浏览器都支持接收和解压服务器端压缩的传输，所有优秀的web服务器都支持检测那些不支持它的浏览器，并将未压缩的版本作为回退发送。

例如，在Apache web服务器上有一个mod_deflate模块，它的使用细节可以通过标准搜索找到。jgraph.com服务器使用这个模块，在任何受支持的浏览器中都没有出现任何问题的报告。
压缩的使用将mxClient.js文件大小从大约600KB减小到大约130KB。在大多数现代网络中，用户不会注意到这种差异，但是在某些情况下，更小的版本可能更好。