【Javascript】js图形编辑器库介绍
10个JavaScript库绘制自己的图表
摘要:10个JavaScript库绘制自己的图表
JointJS
JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders.
Here are some of its features:
- basic diagram elements (rectangle, circle, ellipse, text, image, path)
- ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, …)
- custom diagram elements based on SVG or programmatically rendered
- interactive elements and links
- connecting diagram elements with links
- customizable links, their arrowheads and labels
- magnets (link connection points) can be placed basically anywhere
- hierarchical diagrams
- serialization/deserialization to/from JSON format
- zoom in/out
- touch support
Rappid
Rappid is the commercial extension of JointJS. It’s a set of JointJS plugins and other components that gives more possibilities and ready to use features when creating a diagramming tool.
Here are some of its features:
- Real-time collaboration
- Copy, cat and past with HTML 5 loacalStorage support
- Manipulate more elements in one go.
- validate your documents
- local storage
- Undo and Redo
- Modal and non-modal dialog boxes
- Inline Text editor for any SVG text
- Auto-layout of directed graphs
- Svg export
- A set of ready to use shapes for ERD, UML, ORG, BPMN
Mxgraph
MxGraph is an interactive JavaScript HTML 5 diagramming library. You include it as a JavaScript link in your HTML file and you instantly have access to the most functional native browser diagramming component available. This library is used in Draw.io. The library is developed since 2005 and supports even IE 6.
The mxGraph package contains a client software, written in JavaScript, and a series of backends for various languages. The client software is a graph component with an optional application wrapper that is integrated into an existing web interface. The client requires a webserver to deliver the required files to the client or can be run from the local filesystem without a webserver. The backends may be used as is, or they may be embedded into an existing server application in one of the supported languages.
GoJS
GoJS is a feature-rich JavaScript library for implementing interactive diagrams across modern browsers and platforms. GoJS makes constructing diagrams of complex Nodes, Links, and Groups easy with customizable templates and layouts.
GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, transactional state and undo management, palettes, overviews, data-bound models, event handlers, and an extensible tool system for custom operations.
Raphael
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Draw2D
Create Visio like drawings, diagrams or an workflow editor with the Draw2D Javascript library. The User interface allows interactive drawing by using your standard browser. Draw2D uses Raphael.
D3
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Fabricjs
Fabric is a javascript HTML canvas library. You can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of several paths. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.
Paperjs
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
JsPlumb
jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG in modern browsers, and VML on IE 8 and below.
Comparative table of JavaScript drawing libraries
To finish here is a basic comparative table between the presented libraries.
Library | License | Language / infrastructure | high/low level | built-in editor | Github (04/02/2015) |
JointJS | MPL | HTML Javascript SVG |
high | No | 1388 stars 265 forks |
Rappid | Commercial 1 500,00 € |
HTML Javascript SVG |
high | Yes | |
Mxgraph | Commercial 4300.00 € |
HTML Javascript SVG |
high | Yes | |
GoJS | Commercial $1,350.00 |
HTML Canvas Javascript |
High | Yes | |
Raphael | MIT | HTML Javascript SVG |
low | No | 7105 stars 1078 forks |
Draw2D | GPL2 commercial |
HTML Javascript SVG |
medium | No | |
D3 | BSD | HTML Javascript SVG |
low | No | 36218 stars 9142 forks |
FabricJS | MIT | HTML Canvas javasript |
low | No | 4127 stars 705 forks |
paperJS | MIT | HTML Canvas javascript |
low | No | 4887 stars 496 forks |
JsPlumb | MIT/GPL2 | HTML Javascript |
medium | No | 2161 stars 563 forks |
参考资料:
10 Javascript Flowcharting Libraries:https://www.erp5.com/officejs/javascript-10.Flow.Chart#modile.qq.com
10个JavaScript库绘制自己的图表:http://www.open-open.com/news/view/1fa1055#modile.qq.com
mxGraph官网:https://www.jgraph.com/
JS library for displaying direct acyclic graphs (DAGs):http://stackoverflow.com/questions/16647456/js-library-for-displaying-direct-acyclic-graphs-dags
GoJS使用:http://www.cnblogs.com/liqipeng/p/4592801.html
GoJS学习笔记:http://www.peng8.net/2015/07/20/gojs-notes-one/
GoJS 使用文档:http://lanfei.github.io/GoJS/docs/index.html
http://gojs.net/latest/doc/download.html
http://gojs.net/latest/index.html
https://github.com/NorthwoodsSoftware/GoJS
http://gojs.net/latest/samples/minimal.html
【Javascript】js图形编辑器库介绍的更多相关文章
- 推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
- 介绍 14 个 JavaScript 的框架和库
Javascript 得到了众多的技术领导者的拥护和支持,其中一位就是 WordPress 的作者 Matt Mullenweg , 他表示 WordPress 开发者 应该学习 JavaScript ...
- 推荐轻量高效无依赖的开源JS插件和库
目录 图片 布局 音频视频 编辑器 轮播图 弹出层 表单 存储 动画 时间 其它 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本.demo Lightgalle ...
- Javascript触屏手势库-JTouch(更新V1.1)
作者:痞子|时间:2013-05-21|分类目录:js,javascript,jquery教程|Tag标签: javascript.jTouch|阅读(857) 7 条评论 Javascript触屏手 ...
- 10 款强大的JavaScript图表图形插件推荐
转自:http://www.iteye.com/news/24535 网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器 ...
- Android开发中用到的框架、库介绍
Android开发中用到的框架介绍,主要记录一些比较生僻的不常用的框架,不断更新中...... 网路资源:http://www.kuqin.com/shuoit/20140907/341967.htm ...
- 开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!
作者:编辑部的故事 < 开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐! > 开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐! Tutoria ...
- MFC图形编辑器
前言 vs2015竟然可以完美打开工程,哈哈可以直接生成类图了.由于内容较多,所以根据内容的重要性会安排详略. https://github.com/bajdcc/GraphEditor/releas ...
- CodeMirror:基于JavaScript的代码编辑器
官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...
随机推荐
- 树莓派使用opencv
安装 reference1 reference2 注意 安装顺利,但是使用的时候提示 you need install libgtk2.0-dev xxx ,这时候说明你安装的库的顺序不对,你应该先安 ...
- 查看linux版本及lsb_release安装及一些想法
https://blog.csdn.net/darkdragonking/article/details/61194308
- 51nod 1295 XOR key-区间异或最大值-可持久化01Trie树(模板)
1295 XOR key 2 秒 262,144 KB 160 分 6 级题 给出一个长度为N的正整数数组A,再给出Q个查询,每个查询包括3个数,L, R, X (L <= R).求A[L] ...
- vim的保存文件和退出命令
文章来源:http://blog.sina.com.cn/s/blog_5e357d2d0100zmth.html 命令 简单说明 :w 保存编辑后的文件内容,但不退出vim编辑器.这个命令的作用是把 ...
- asp.net mvc 中使用NPOI导出excel
版本信息:NPOI1.2.5(2.0以上的版本很多方法不清楚) 明确三点: path: mvc 部署网站的时候,我们肯定要拷贝的一个文件夹就mvc的UI层,有点可以肯定的是,你部署网站的路径不一定都是 ...
- 牛刀小试之Django二
model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...
- Word Ladder(LintCode)
Word Ladder Given two words (start and end), and a dictionary, find the length of shortest transform ...
- 51nod 1052 (dp)
最大M子段和 N个整数组成的序列a[1],a[2],a[3],…,a[n],将这N个数划分为互不相交的M个子段,并且这M个子段的和是最大的.如果M >= N个数中正数的个数,那么输出所有正数的和 ...
- 「LGR-049」洛谷7月月赛 D.Beautiful Pair
「LGR-049」洛谷7月月赛 D.Beautiful Pair 题目大意 : 给出长度为 \(n\) 的序列,求满足 \(i \leq j\) 且 $a_i \times a_j \leq \max ...
- 【计算几何】【二分】【随机增量法】hdu6167 Missile Interception
n个半径为R的圆是否有公共部分,等价于询问是否存在一个半径小于R的圆,能覆盖所有n个圆的圆心. 对这n个点求最小圆覆盖即可.从网上扒了个随机增量法的代码. 这样算上二分,复杂度就是nlogn了. #i ...