基于HTML5的拓扑图编辑器—Graph.Editor
程序员文章站
2022-04-28 14:09:44
...
Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示、编辑、导出、保存等功能,此外本项目也是学习HTML5开发,构建WebAPP项目的参考实例。
项目地址:https://github.com/samsha/graph.editor
在线演示:http://demo.qunee.com/editor/
数据可视化是一件有趣的工作,冰冷的数据变成美观的图形,如同命令行之于Mac OS X图形界面的,传统的图形组件以图表(Chart)居多,不少优秀的开源或者商业的作品,
比如d3js, echarts, highcharts,而拓扑图、流程图组件相对少一些,知名的有yfiles,本项目则基于Qunee图形组件,是Qunee的扩展项目,旨在为客户提供可供扩展的拓扑图编辑工具, 提供拓扑图展示、编辑、导出、保存等功能,此外本项目也是学习HTML5开发,构建WebAPP项目的参考实例。
在线演示:
请访问此地址查看效果:http://demo.qunee.com/editor/
入门示例
Hello Graph.Editor
编辑器的基本示例相比Hello Qunee要复杂些,除了Qunee类库外,还用到了一些第三方组件:jquery, bootstrap, layout.border,
此外就是Graph.Editor自身的类库,这里我们引用在线的js和css
实际代码部分,采用了jquery的写法,如下:
本例中,通过回调函数获取editor.graph对象,并创建了两个节点和一条连线。
项目地址:https://github.com/samsha/graph.editor
在线演示:http://demo.qunee.com/editor/
数据可视化是一件有趣的工作,冰冷的数据变成美观的图形,如同命令行之于Mac OS X图形界面的,传统的图形组件以图表(Chart)居多,不少优秀的开源或者商业的作品,
比如d3js, echarts, highcharts,而拓扑图、流程图组件相对少一些,知名的有yfiles,本项目则基于Qunee图形组件,是Qunee的扩展项目,旨在为客户提供可供扩展的拓扑图编辑工具, 提供拓扑图展示、编辑、导出、保存等功能,此外本项目也是学习HTML5开发,构建WebAPP项目的参考实例。
引用
注意:本项目内核使用Qunee for HTML5,Qunee本身是一个商业产品,默认仅限本机(localhost)使用,非商业用途可以申请免费授权,商业用途请购买相应授权,官网:qunee.com
在线演示:
请访问此地址查看效果:http://demo.qunee.com/editor/
入门示例
Hello Graph.Editor
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Qunee</title> <link rel=stylesheet href=http://demo.qunee.com/editor/libs/bootstrap/css/bootstrap.css> <link rel=stylesheet href=http://demo.qunee.com/editor/libs/graph.editor/graph.editor.css> </head> <body class="layout"> <div id="editor" data-options="region:'center'"></div> <script src="http://demo.qunee.com/editor/libs/js.js"></script> <script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script> <script src="http://demo.qunee.com/editor/libs/graph.editor/graph.editor.js"></script> <script> $('#editor').graphEditor({callback: function(editor){ var graph = editor.graph; var hello = graph.createNode("Hello", -100, -50); hello.image = Q.Graphs.server; var qunee = graph.createNode("Qunee", 100, 50); var edge = graph.createEdge("Hello\nQunee", hello, qunee); graph.moveToCenter(); }}); </script> </body> </html>
编辑器的基本示例相比Hello Qunee要复杂些,除了Qunee类库外,还用到了一些第三方组件:jquery, bootstrap, layout.border,
此外就是Graph.Editor自身的类库,这里我们引用在线的js和css
实际代码部分,采用了jquery的写法,如下:
$('#editor').graphEditor({ callback: 回调函数, data: json数据地址, images: 拖拽图标信息 })
本例中,通过回调函数获取editor.graph对象,并创建了两个节点和一条连线。