js画图开发库--mxgraph--[swimlanes-泳道图.html]

最新推荐文章于 2021-06-29 01:46:47 发布

iteye_17920

最新推荐文章于 2021-06-29 01:46:47 发布

阅读量2.2k

点赞数

分类专栏： mxgraph 文章标签： js画图开发库 mxgraph swimlanes 泳道图

本文链接：https://blog.youkuaiyun.com/iteye_17920/article/details/82480442

版权

本文介绍如何利用JavaScript绘图库mxgraph来绘制 Swimlanes（泳道图），详细讲解了该库在创建此类图表时的关键特性和步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js画图开发库--mxgraph--[swimlanes-泳道图.html]

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
	<head>
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<title>泳道图</title>

	<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

	<!-- 引入支持库文件 -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>
	
	<!-- 示例代码 -->
	<script type="text/javascript">
		// 定义创建新的连接的图标。
		// 这将自动禁用高亮显示。
		mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
		
		//  程序在此方法中启动 
		function main(container)
		{
			// 检查浏览器支持
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 去锯齿效果
				mxSwimlane.prototype.crisp = true;
				
				// 根据给定的xml文件在容器中创建图形编辑器
				var config = mxUtils.load(
					'editors/config/keyhandler-commons.xml').
						getDocumentElement();
				var editor = new mxEditor(config);
				editor.setGraphContainer(container);
				var graph = editor.graph;
				var model = graph.getModel();

				//自动调整大小的容器
				graph.border = 80;
				graph.getView().translate = new mxPoint(graph.border/2, graph.border/2);
				graph.setResizeContainer(true);
				graph.graphHandler.setRemoveCellsFromParent(false);

				// 改变默认样式
				var style = graph.getStylesheet().getDefaultVertexStyle();
				style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
				style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
				style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
				style[mxConstants.STYLE_FONTSIZE] = 11;
				style[mxConstants.STYLE_STARTSIZE] = 22;
				style[mxConstants.STYLE_HORIZONTAL] = false;
				style[mxConstants.STYLE_FONTCOLOR] = 'black';
				style[mxConstants.STYLE_STROKECOLOR] = 'black';
				delete style[mxConstants.STYLE_FILLCOLOR];

				style = mxUtils.clone(style);
				style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
				style[mxConstants.STYLE_FONTSIZE] = 10;
				style[mxConstants.STYLE_ROUNDED] = true;
				style[mxConstants.STYLE_HORIZONTAL] = true;
				style[mxConstants.STYLE_VERTICAL_ALI

最低0.47元/天解锁文章