未加星标

Learn GoJS From Beginning - Part One

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

In this article, we will explore the basics of GoJS. We will learn the basics because I have written this article focusing on beginners. Also, we will discuss how we use GoJS with ASP.NET.

Learn GoJS From Beginning - Part One Learn GoJS From Beginning - Part Two Learn GoJS From Beginning - Part Three Learn GoJS From Beginning - Part Four Learn GoJS From Beginning - Part Five Prerequisites

We should have a basic knowledge of HTML and javascript.

Any version of Visual Studio should be installed. I recommend you use Visual Studio 2015.

Introduction

GoJS is a JavaScript library for creating custom diagrams, flowcharts, trees, and complex visualizations across all modern web browsers and technology platforms. GoJS provides many advanced features for users. GoJS is completely written in Javascript, so it's easy for developers to Understand and Implement in projects.

We can integrate GoJS in any JavaScript Framework like jQuery, AngularJS, or any other JavaScript Framework.

GoJS provides a powerful solution to develop a diagram, modeling, and visualization application. Byusing GoJS, it’s possible to create user-friendly web applications allowing end-users to construct complex diagrams.

GoJS is used to create your inherent diagrams. It's created and maintained by Northwoods Software . Northwoods Software was founded in 1994 with a vision to provide graphical user interfaces(GUI) to the Companies and customers. Northwoods launched GoJS IN 2012.

GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.

It runs completely in the web browsers. There is no need to contact the server.

GoJS is not depended on any third party library

Using GoJS, we can create flowcharts, trees, organizational diagrams, industry specified visualizations etc.

GoJSClasess Diagram Classes Model Classes Collection Classes Layout Classes Geometry Classes Diagram Classes Model Classes Collection Classes Geometry Classes Diagram Binding Map Size Link Model List Spot Node Transaction Set Rect Shape ChangedEvent Iterator Margin TextBlock TreeModel Iterable Geometry

Step 1

First, we need to include GoJS Library in our project. For this, we can download the library from the GoJS official website or download from here .

Or we can add using NPM (Node Package Manager) using this command: $ npm install gojs --save

We also include this library using Nuget: PM>install-package Northwoods.GoJS

We can also add it from GibHub Repository from GitHub .

Step 2

Add a new item to the project.
Learn GoJS From Beginning - Part One

Step 3

Add new web form and rename it as GojsDemo1.
Learn GoJS From Beginning - Part One

Step 4

Now, add GoJS library in the Head section by simply dragging from script folder and dropping it on the page.
Learn GoJS From Beginning - Part One
Step 5

Now, add a div and rename it as divdemodiagram.


Learn GoJS From Beginning - Part One

Code Snippet

<divid="Divdemodiagram"style="background-color:white;border:solid1pxblue;width:100%;height:500px"></div>

Step 6

Add the Function and write the following code.
Learn GoJS From Beginning - Part One
Code Snippet <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="GoJsDemo1.aspx.cs"Inherits="SimpleGoJsDemo.GoJdDemo1"%> <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title></title> <scriptsrc="Scripts/jquery-1.10.2.min.js"></script> <scriptsrc="Scripts/go.js"></script> <script> functioninit(){ var$=go.GraphObject.make; myDiagram=$(go.Diagram,"Divdemodiagram", { initialContentAlignment:go.Spot.Center, "undoManager.isEnabled":true }); myDiagram.nodeTemplate= $(go.Node,"Auto", $(go.Shape,"Ellipse",{strokeWidth:1}, newgo.Binding("fill","color")), $(go.TextBlock, {margin:10}, newgo.Binding("text","key")) ); myDiagram.model=newgo.GraphLinksModel( [ {key:"A",color:"Red"}, {key:"B",color:"Blue"}, {key:"G",color:"green"}, {key:"D",color:"pink"} ], [ {from:"A",to:"B"}, {from:"A",to:"c"}, {from:"B",to:"B"}, {from:"D",to:"A"} ]); } </script> </head> <body> <formid="form1"runat="server"> <divid="Demo"> <divid="Divdemodiagram"style="background-color:white;border:solid1pxblue;width:100%;height:500px"></div> </div> </form> </body> </html>

Summary

In this article, I have explained a very simple example of GoJS. In my next article, we will learn GoJS classes in detail to better understand the concept of GoJS.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: GoJS,gt,lt,Classes,color,go,Beginning,From,Part
分页:12
转载请注明
本文标题:Learn GoJS From Beginning - Part One
本站链接:https://www.codesec.net/view/586943.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(38)