Gojs Drawing Flowchart

Reference: Http://www.tuicool.com/articles/eEruaqu

Http://www.open-open.com/lib/view/open1435023502544.html

Gojs is a JavaScript framework that makes it easy for us to draw interactive graphical diagrams based on HTML5 Browsers. The GOJS uses an object-oriented programming model. Represents a drawing template as a graphical object. To store data as a data model with ordinary JS objects, and then assign values to the properties of the graphical object as a data-bound pattern. GOJS also provides a number of tool classes to represent our interaction Behavior. All we need to do is create graphical objects, build the data model, set properties, bind the data model, and use the tool class to add behaviors to create a variety of graphs with rich interaction performance.

A simple flowchart

1.HTML

<div id="myDiagram" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

2.$ is a global variable, the global variable is equivalent to a brush, we first define a brush Tool. We can then $ invoke some of its own methods, properties, enumeration objects, etc. by means of symbols.

var $ = go. graphobject.make;//

3. With a paintbrush, we need a canvas, so we need to define a canvas for loading specific content

 var mydiagram =$ (go.  Diagram,//a defined Canvas
"mydiagram",//ID Name of the div to render, ID in HTML 1
{ initialautoscale: go. Diagram. Uniform,     contentalignment: go. Spot. Center,//    Alignmentlayout://     How elements are laid out in the canvas　　　　
$ (go. forcedirectedlayout, { defaultspringlength:      　　 defaultelectricalcharge:       　　}) });

This brush can draw nodes, links, regions, patterns, shapes, text, etc.

4. The brush draws a text object go.TextBlock and fills it with properties text, stroke, font, margin

$ (go. TextBlock,{    text:"www.peng8.net",        "red",    "bold 10pt helvetica, Bold arial, sans-serif",     4}   )

The 5.GOJS chart (Diagram) has two most basic elements, namely dots and lines (node and link), and they can be freely combined to form a group. All elements are on layers and can be laid out (layout).

5.1Node

mydiagram.nodetemplate = $ (go.  Node, "Auto", $ (go.  Shape, "roundedrectangle",//       Shape: a rounded rectangle with a default fill color of white and a red border color               { fill: "white",                    stroke: "red"                                   }, New go. Binding ("fill", "color")                      ), $ (go.  TextBlock,//       Text             { font: "bold 10pt helvetica, Bold arial, sans-serif",                   margin: 4                                 }, New go. Binding ("text", "text")) //           Declares the dynamic binding of the text property, assigning the value of the text field in the data source to the current Text property);

5.2Link
 mydiagram.linktemplate =  $ (go. Link, {adjusting:go. link.stretch, reshapable: true },new go. Binding ("points"). maketwoway (),               $ (go. Shape,// Used to draw a line {  ispanelmain: true,  Stroke: "black"   }),  $ (go. Shape,//     to draw arrows     {  Toarro W:   ,   stroke:  null    }),   $ (go. TextBlock,//   to display labels on the line   {  textAlign:   "center"  ,   segmentoffset:  ne W   Go. Point (0 ,-10 ),   font:  Span class= "string" "10pt helvetica, arial, sans-serif"  ,   stroke:  "#555555"  ,   margin: 4   },    new   go.b Inding (  ,   )  )  );  

6. Each diagram is populated and determined by the data model to determine Node's information and Link's Affiliation. And we just need to create a template for node and link and a data model, and everything else is left to Gojs to Handle. It automatically loads the model and constructs the elements through the Model.nodedataarray method and the Graphlinksmodel.linkdataarray Method.

Jsonlist is my front end. defines an object to receive AJAX return data

 var jsonlist = {nodekeyproperty: "key",//The associated primary keynodedataarray: [{key:1, Text:' node 1 '},
{key:2, text:"node 2"},
{key:3, text:"node 3"},
{key:4, text:"node 4"},
 {key:5, text:"node 5"},
 {key:6, text:"node 6"}],//node Datalinkdataarray: [{from:1, to:2},
{from:2, to:3},
{from:2, to:5},
     {from:3, to:6},
{from:5, to:4}]//Point Correspondence relational data, the primary key of the start node that points to the end node is the primary key of the From and to};

7.Finally is how to fill the flow chart dynamic data, Here I use the JSON way, flow chart Assignment is a sentence is enough
Mydiagram.model = go. Model.fromjson (jsonlist);

8.: a very rough picture

Gojs is a JavaScript library that lets you easily create interactive diagrams of modern web Browsers. GOJS supports the data binding of graphical templates and graphical object property data Models. You only need to save and restore the model, including the simple JavaScript object that holds the application requirements of any Nature. Many of the predefined tools and commands perform the standard behavior required by most Charts. Customization of appearance and behavior is a problem with most set properties

Gojs Drawing Flowchart