از ابتدا GoJS  را یاد بگیرید
1397/06/22 15:28 , بهزاد ناظمی

از ابتدا GoJS را یاد بگیرید

در این مقاله، ما مبانی GoJS را بررسی خواهیم کرد. ما اصول را یاد می گیریم زیرا این مقاله را با تمرکز بر مبتدیان نوشته ایم. همچنین ما در مورد چگونگی استفاده از GoJS با ASP.NET خواهیم گفت.

پیش نیازها

ما باید دانش پایه ای از HTML و جاوا اسکریپت داشته باشیم.

هر نسخه ای از ویژوال استودیو قابل نصب است. من توصیه می کنم از ویژوال استودیو 2015 استفاده کنید.

 معرفی

GoJS یک کتابخانه جاوا اسکریپت برای ایجاد نمودارهای سفارشی، نمودار جریان و تجربیات پیچیده در تمام مرورگرهای مدرن وب و فن آوری سیستم عامل ها است. GoJS بسیاری از ویژگی های پیشرفته را برای کاربران فراهم می کند. GoJS به طور کامل در جاوا اسکریپت نوشته شده است، بنابراین درک آن برای توسعه دهندگان و اجراکنندگان پروژه ها آسان است.

ما می توانیم GoJS را در هر چارچوب جاوا اسکریپت مانند jQuery، AngularJS یا هر چارچوب جاوا اسکریپت دیگر هماهنگ کنیم.

GoJS برای ایجاد نمودارهای وراثتی استفاده می شود. این نرم افزار توسط Northwoods Software ایجاد و نگهداری می شود. Northwoods Software در سال 1994 با چشم انداز ارائه رابط کاربری گرافیکی GUI  به شرکت ها و مشتریان تاسیس شد. Northwoods  ،GoJS را در سال 2012 راه اندازی کرد.

GoJS نمودارهای جاوا اسکریپت را از گره ها، لینک ها و گروه های پیچیده را با قالب ها و پوسته های قابل تنظیم آسان تولید میکند.

این برنامه به طور کامل در مرورگرهای وب اجرا می شود. هیچ نیازی به ارتباط با سرور وجود ندارد.

 GoJS وابسته به کتابخانه شخص ثالث نیست

با استفاده از GoJS، ما می توانیم نمودار جریان، نمودار درختی، نمودارهای سازمانی، دیدگاه خاص صنعتی و غیره ایجاد کنیم.

 کلاس های GoJS

  1. Diagram Classes
  2. Model Classes
  3. Collection Classes
  4. Layout Classes
  5. Geometry Classes

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

 

گام 1

اول، ما باید کتابخانه GoJS را در پروژه خود قرار دهیم. برای این کار، می توانید کتابخانه را از وب سایت رسمی GoJS دانلود کنید یا از اینجا دانلود کنید.

یا ما می توانیم با استفاده از این دستور NPM (Node Package Manager) را  اضافه کنیم: $ npm install gojs - save

 

ما همچنین این کتابخانه را با استفاده از کد زیر قرار می دهیم:

PM>install-package Northwoods.GoJS

 

ما همچنین می توانیم آن را از مخزن GibHub اضافه کنیم.

گام 2

یک آیتم جدید به پروژه اضافه کنید.

گام 3

فرم جدید وب را اضافه کنید و آن را به نام GojsDemo1 تغییر نام دهید.

گام 4 :

حالا، کتابخانه GoJS را در بخش به سادگی با کشیدن از پوشه اسکریپت و رها کردن آن در صفحه Head اضافه کنید.

گام 5 :

حالا، div را اضافه کنید و آن را به نام divdemodiagram تغییر دهید.

قطعه کد:

<div id="Divdemodiagram" style="background-color: white; border: solid 1px blue; width: 100%; height: 500px"></div>  
گام 6:

تابع را اضافه کنید و کد زیر را بنویسید.

قطعه کد :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoJsDemo1.aspx.cs" Inherits="SimpleGoJsDemo.GoJdDemo1" %>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
<title></title>  
<script src="Scripts/jquery-1.10.2.min.js"></script>  
<script src="Scripts/go.js"></script>  
<script>  
function init() {  
var $ = go.GraphObject.make;    
myDiagram = $(go.Diagram, "Divdemodiagram",  
{  
initialContentAlignment: go.Spot.Center,    
"undoManager.isEnabled": true    
});  
nodeTemplate =  
$(go.Node, "Auto",   
$(go.Shape, "Ellipse", { strokeWidth: 1 },  
new go.Binding("fill", "color")),  
$(go.TextBlock,  
{ margin: 10 },    
new go.Binding("text", "key"))  
);  
model = new go.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>  
<form id="form1" runat="server">  
<div id="Demo">  
<div id="Divdemodiagram" style="background-color: white; border: solid 1px blue; width: 100%; height: 500px"></div>  
</div>  
        </form>  
</body>  
</html>  

خلاصه

در این مقاله، من یک مثال بسیار ساده از GoJS را توضیح دادم. در مقاله بعدی، ما کلاس های GoJS را به تفصیل بررسی خواهیم کرد تا مفهوم GoJS را بهتر درک کنیم.

   برگرفته از : https://www.c-sharpcorner.com

 

ES6 چیست و برنامه نویس های جاوا اسکریپت چه چیزهایی را باید بدانند؟

همه چیز درباره ی جاوا اسکریپت

دلایلی که نشان می دهد جاوا هنوز شماره 1 است!

Shell Scripting چیست و چرا باید از آن استفاده کرد؟

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات