![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端可视化MXgraph
七月是我的生日
人生太苦,但你要甜!
展开
-
Mxgraph 实战教程(12):使用mxgraph实现一个流程图
前面我们讲解了mxgraph的基础操作和进阶操作,从这一节其,我们将开始两个实战项目。第一个mxgraph实现流程图实现效果:如果对大家有用的话,记得帮我github点个star,谢谢大家!git地址:小康的流程图...原创 2020-08-08 00:17:38 · 2090 阅读 · 0 评论 -
Mxgraph 使用教程(11):mxgraph手动添加节点和边(节点和边点击事件),并按照要求格式导出数据
上文我们介绍了,mxgraph如何在页面不刷新的情况下,通过请求不同文件生成不同的mxgraph图,本文我们将讲述mxgraph手动添加节点和边,并且按照原本数据格式导出数据。1.准备工作准备工作代码<template> <div> <div class="Oinput"> <input type="text" placeholder="请输入对应的城市名称......" /> <button>生.原创 2020-08-08 00:17:25 · 5712 阅读 · 0 评论 -
Mxgraph 使用教程(10):mxgraph单页面请求数据实现图形热更新
上文我们讲解了如何根据数据生成对应的mxgraph图,本文我们讲解单页面请求多个文件,生成mxgraph图。这也是我的项目需求之一。1.准备工作:原始数据:mxgraphData: [ { nodesList: [ [0, "Hello"], [1, "Mxgraph"], ], edgesList: [[0, "label", 1]], }, .原创 2020-08-07 20:43:30 · 1914 阅读 · 0 评论 -
Mxgraph 使用教程(9):mxgraph根据需求数据生成对应mxgraph图
本文将讲解如何按照对应的数据生成mxgraph图形1.准备工作2.模拟数据 mxgraphData: [ { nodesList: [ [0, "宝鸡市"], [1, "渭南市"], [2, "西安市"], [3, "汉中市"], [4, "安康市"], ], edgesList: [ .原创 2020-08-07 20:43:21 · 3059 阅读 · 0 评论 -
Mxgraph 使用教程(8):mxgraph进行查看xml 和 xml回显
上文我们讲述了mxgraph布局算法,本文讲述mxgraph进行xml回显和图片保存1.xml回显 准备工作还是上文的教程查看mxgraph图形的xml //查看图形的xml document.body.appendChild(mxUtils.button('View XML', function() { var encoder = new mxCodec(); var node = encoder.enco.原创 2020-08-07 20:43:12 · 4497 阅读 · 1 评论 -
Mxgraph 使用教程(7):给mxgraph图添加默认布局
上文我们讲解了添加工具操作,这一节我们讲解给生成图形添加默认布局1.准备工作多添加几个几点:生成如下所示的图形代码: try { var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, 'nodeStyle' ); .原创 2020-08-07 20:42:54 · 2788 阅读 · 1 评论 -
Mxgraph 使用教程(6):给mxgraph图添加操作工具按钮
上文我们讲解了mxgraph图如何设置样式,接下来我们给我们的mxgraph图添加一些操作工具吧1.准备工作2.添加操作按钮 <!-- 创建操作按钮放置容器 --> <div id="methods"> <div ref="buttons"></div> </div>refs选中的元素为生成的button所在的父级//定义操作按钮 //放大节点 this.$refs.原创 2020-08-07 20:42:36 · 2223 阅读 · 2 评论 -
Mxgraph 使用教程(5):mxgraph图设置样式的两种方式
上文我们了解了基本的mxgraph内容,这节我们来给节点和边设置样式1.第一种方式(行内式)上文的图形最终效果:添加样式: var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, "fillColor=#3CAEA3;strokeColor=white.原创 2020-08-07 20:42:21 · 4608 阅读 · 2 评论 -
Mxgraph 使用教程(4):详解mxgraph示例demo - Hello World
提示:接下来所有演示均以vue为主1.在vue中实现一个hello -world<template> <div> <div id="graphContainer" ></div> </div></template><script>import mxgraph from "./mxgraph";const { mxGraph, mxClient, .原创 2020-08-07 20:42:12 · 3236 阅读 · 2 评论 -
Mxgraph 使用教程(3):本地引入mxgraph和 vue中引入mxgraph
1.本地引入mxgraph第一步:下载mxgraph库github地址:https://github.com/jgraph/mxgraph第二步:clone项目打开项目-》进入javascript第三步:本地使用mxgraph一个官方示例demo:<html><head> <title>Hello, World! example for mxGraph</title> <!-- Sets the basepath for the原创 2020-08-07 20:42:00 · 5683 阅读 · 4 评论 -
Mxgraph 使用教程(2):mxgraph常用方法介绍
1.mxgraph常用包(这个js类库被分成了8个包。)1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa原创 2020-08-07 20:41:43 · 6912 阅读 · 1 评论 -
Mxgraph 使用教程(1):介绍mxgraph
1.mxgraph邂逅(×) 折磨(√)楼主暑假实习,项目组需要开发一款标注系统,mentor要求使用nuxt+mxgraph来实现标注系统,所以就开始学习mxgraph,然而百度一下,我就蒙蔽了,这个框架国内确实很少用,并且查询了许多人的摆弄可,感觉都是一些基本的教学,自己摸索了很久,大概花了一个多月把项目搞定了,现在将自己的遇到的问题以及解放方法分享给大家。2.mxgraphs介绍官方文档:mxGraph是一系列以不同技术开发的工具库,旨在提供显示交互式的 图表和图形的应用程序的功能。 请原创 2020-08-07 20:40:59 · 10518 阅读 · 0 评论