![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
MxGraph
祈晴小义
good good study, day day up.
展开
-
MxGraph从入门到精通之5:在Vue项目中使用MxGraph
第一步:安装npm包npm install mxgraph第二步:在mxgraph.vue中使用mxgraph<template> <div> <div ref="graphContainer"> </div> </div></template><script>import mx from 'mxgraph'export default { name: 'Application原创 2020-07-03 16:26:00 · 3179 阅读 · 2 评论 -
MxGraph从入门到精通之4:布局
文章目录mxCircleLayout-圆形布局mxCompactTreeLayout-树状布局mxFastOrganicLayout-组织状布局本文介绍MxGraph支持的几种常用布局方式。mxCircleLayout-圆形布局圆形布局不关注节点之间的连线,节点之间有没有连线不影响最终效果。核心代码:for(let i=1; i< 10; i++){ graph.insertVertex(parent, null, 'Hello' + i, 0, 0, 80, 30);}let lay原创 2020-06-28 16:49:05 · 2745 阅读 · 0 评论 -
MxGraph从入门到精通之3:设置图形样式
文章目录设置节点样式创建指定样式的节点更新已有节点样式常用样式汇总shapefillColor通过上一节 MxGraph从入门到精通之2:HelloWorld程序解析,我们已经知道通过MxGraph绘制图形的核心步骤,绘制出来的图形默认的样式如下:我们可以在创建节点的时候通过参数来创建指定样式的节点或者调用graph的setCellStyle来更新节点的样式。设置节点样式创建指定样式的节点在上一节中helloworld示例程序插入顶点的方法可以传入第八个参数,来指定创建出来的顶点的样式,如下:原创 2020-06-19 17:45:17 · 4947 阅读 · 0 评论 -
MxGraph从入门到精通之1:运行HelloWorld示例程序
前言相信很多人和我一样,使用mxgraph是为了在浏览器上根据后端数据生成有向图,来实现数据可视化的效果,甚至在浏览器上添加一些暂停快进的按钮,来控制后端程序的执行过程。但是千里之行,始于足下,这个mxgraph到底要怎么跑起来看看效果先呢?官方文档虽然有写,但是官方文档写的东西太多了,很多同学可能根本找不着!还有一些同学可能跟我一样对前端项目是一脸懵逼,要让我把一个前端项目跑起来?领导,请给我几个月时间好好学一学前端吧,一个全栈工程师即将诞生!然鹅,就这,都要搞几个月,领导还不把你开了。好在,经过我的原创 2020-06-11 16:21:55 · 1311 阅读 · 0 评论 -
MxGraph从入门到精通之2:HelloWorld程序解析
文章目录通过上一篇文章MxGraph从入门到精通之1:运行HelloWorld示例程序,我们已经把MxGraph运行起来,通过查看hellloworld.html可以总结该程序运行的核心步骤主要有以下几步:创建一个div元素,作为MxGraph渲染图形的容器在div元素上创建一块画布(graph)在画布上绘制顶点(Vertex)和边(Edge)把画布及其顶点和边更新渲染出来整个示例代码分析如下:<html><head> <title>Hello, W原创 2020-06-19 15:44:22 · 680 阅读 · 0 评论