【Javascript】js图形编辑器库介绍

10个JavaScript库绘制自己的图表

jopen 2015-04-06 18:18:38 • 发布

摘要：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

10个JavaScript库绘制自己的图表

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 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.

10个JavaScript库绘制自己的图表

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.

10个JavaScript库绘制自己的图表

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.

10个JavaScript库绘制自己的图表

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.

10个JavaScript库绘制自己的图表

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.

10个JavaScript库绘制自己的图表

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