使用mxGraph制作干线图

最新推荐文章于 2024-10-10 08:45:59 发布

bubble_1001

最新推荐文章于 2024-10-10 08:45:59 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/bubble_1001/article/details/88867336

版权

本文介绍如何利用mxGraph库来实现一个功能完善的干线图。通过实例展示mxGraph的用法，帮助读者掌握在项目中创建复杂图表的技术。

摘要由CSDN通过智能技术生成

使用mxGraph制作干线图

<html>
<head>
	<meta charset="utf-8">
	<title>干线图</title>

	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

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

	<script type="text/javascript">
		
		function main(container)
		{
    
			// Checks if the browser is supported
			if (!mxClient.isBrowserSupported())
			{
    
				// Displays an error message if the browser is not supported.
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
    
				mxEvent.disableContextMenu(container);//禁用浏览器自带右键
				// Creates the graph inside the given container  在给定容器内创建图形
				var graph = new mxGraph(container);

				// Enables rubberband selection  鼠标框选
				new mxRubberband(graph);
				
				graph.setEnabled(false);//对图形进行拖拽拉伸等操作
				graph.setCellsMovable(false);//禁止拖拽流程图
				
				
				configureStylesheet(graph);
				
				graph.setTooltips(true);  //开启提示工具
				graph.setConnectable(true);
				// Installs a custom tooltip for cells
				graph.getTooltipForCell = function(cell)  //重写提示工具
				{
    
					if(this.model.isVertex(cell))
					{
    
						return 'rightclick';
					}
					
				}
				
				// Installs a