Data visualization-gojs Plugin Usage Tips Summary

With the advent of the cloud computing era, with the rapid innovation of web technology and in order to provide high quality user experience, data visualization has become a major direction of front-end technology development. To solve this problem, a number of excellent third-party JavaScript graphics libraries have emerged today, such as highcharts.js,echarts.js,d3.js,go.js ...

Data visualization JavaScript plug-in comparison with the support of the HTML5 standard, the Web implementation graphics standard is mainly divided into canvas and SVG, the above-mentioned JavaScript graphics library is one of 2 people as the underlying library. Canvas is based on pixels, provides 2D drawing functions, is an HTML tag that relies on HTML, can only draw graphics through JavaScript, SVG is a vector, provides a series of graphical elements, animations, event mechanisms, can be used independently or embedded in HTML. Graphics Library Packaging degree is also differentiated, such as Highchart.js,echart.js belongs to the over-encapsulation, only exposes the data model interface, as a developer is difficult to modify the internal API implementation, not conducive to the enterprise to achieve customized requirements, and like d3.js,go.js more on the graph node, Wiring and tool encapsulation, and the interface is reserved for developers to customize the development. In addition, the graphic library of commercial copyright is different, like Highchart.js,go.js are charged, and echart.js,d3.js is free open source. Gojs profile and Features Gojs is a canvas-based graphics library, a commercial JavaScript plugin developed by Northwoods, that enables interactive diagrams based on the different needs of the project, such as flowcharts, tree diagrams, diagrams, force maps, and more. Gojs uses object-oriented thinking to represent drawing units as graphical objects, JSON objects as data models, and graphical objects to obtain related property values from the data model in the form of property bindings.
Graph objects and data model diagramsThe data Model GOJS the GOJS data model is divided into Graphlinksmodel and TreeModel two JSON objects for tree graphs, Graphlinksmodel contains Nodedataarray and Linkdataarray properties, The TreeModel contains only the Nodedataarray property. GOJS Drawing Unit Gojs Drawing unit well understood, than in a node, a line can be understood as a drawing unit, GOJS through different drawing templates to achieve different drawing units, such as node,group,line ... In addition, Gojs manages different styles of drawing units of the same type through template maps. Gojs Chart Practice The GOJS drawing process involves creating graphical objects, building data models, setting graphical object properties, binding data models, and adding interaction behaviors.

Gojs Creating a flowchart1. Create a graphical object to interpret $ as a brush and mydiagram as a canvas.

var $ = go.GraphObject.make;

When drawing, through the call Gojs own properties and methods, the completion of the node and line drawing, attrs as a graphical object properties.

var myDiagram = $( go.Diagram, "dom_id" , {attrs});myDiagram.nodeTemplate = $( go.Node, "Auto", {attrs});myDiagram.linkTemplate = $( go.link, {attrs});

2. Building a data Model
The data model is divided into 2 types, the following is an example of a graphical connection model, which includes Nodedataarray and Linkdataarray:

var dataModel = $(go.GraphLinksModel);dataModel.nodeDataArray = [{},{}];dataModel.linkDataArray = [{},{}];myDiagram.model = dataModel;

3. Graphic object property Binding
For example, bind the border width of a drawing object strokewidth and the width of the data model:

new go.binding("strokeWidth","width");

4. Add Interactive behavior
For example, add a mouse event to node and bind the event by adding the appropriate method to its properties:

{mouseEnter:onNodeMouseEnter}...function onNodeMouseEnter(){   //do something}

5. Local Commissioning
We recommend that you install node. js and install http-server after completion:

npm install http-server

Then start the local Web service in the Project home directory:
Gojs study and thinking at present, the official website is the best choice for learning Gojs. Learning Path: LEARN->INTRODUCTION->SAMPLES->API
Meta Data Map Practice
The GOJS deficiency is the lack of support for CSS animations, which leads to increased development costs due to commercial copyrights. The advantage is that the canvas library is well packaged and provides rich interactive events to meet the individual needs of the actual project. In project use, for common charts, the project actually uses Echartjs as an alternative, and the GOJS implementation is used for the customization requirements.

Data visualization-gojs Plugin Usage Tips Summary