0717-7821348
欢乐彩官网下载

欢乐彩官网下载

您现在的位置: 首页 > 欢乐彩官网下载
欢乐彩官网下载-GoJS图表组件简介
2019-05-31 22:31:20

GoJS是一个JavaScript库,可让您在现代Web浏览器中轻松创立交互式图表。 GoJS支撑图形模板和图形目标特点的数据绑定以模仿数据。您只需求保存和康复模型,该模型由包括应用程序所需特点的简略JavaScript目标组成。许多预界说的东西和指令完成了大多数图表所需的规范行为。外观和行为的定制主要是设置特点的问题。

一个简略的GoJS图

以下代码界说了一个节点模板和模型数据,它生成了一个包括少数节点和链接的小图。

 // For conciseness. See the "Building Parts" intro page for more
var $ = go.GraphObject.make;
// the node template describes how each Node should be constructed
diagram.nodeTemplate =
$(go.Node, "Auto", // the Shape automatically fits around the TextBlock
$(go.Shape, "RoundedRectangle", // use this kind of figure for the Shape
// bind Shape.fill to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// bind TextBlock.text to Node.data.key
new go.Binding("text", "key"))
);
// the Model holds only the essential information describing the diagram
diagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node;
// the "color" property is added specifically for this app
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[ // a JavaScript Array of JavaScript objects, one per link
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
// enable Ctrl-Z to und欢乐彩官网下载-GoJS图表组件简介o and Ctrl-Y to redo
diagram.undoManager.isEnabled = true;

这将创立以下图表:

您能够经过多种方法与此图表进行交互:

  • 您能够经过单击挑选零件。选定的节点用Adornment杰出显现,Adornment是环绕节点的蓝色矩形。所选链接在链接途径后边以蓝线杰出显现。
  • 能够一次挑选多个部件。单击以增加到挑选时按住Shift键。单击以切换是否选中该部件时按住Control键。
  • 多选的另一种方法是在布景中的某个点(而不是在某个部分上)进行鼠标按下,稍等片刻,然后拖动一个框。挑选鼠标向上时框中的部件。S欢乐彩官网下载-GoJS图表组件简介hift和Control修饰符也适用。
  • Ctrl-A挑选图中的一切部分。
  • 经过挑选并拖动来移动一个或多个节点。
  • 仿制选定的部件能够运用仿制/张贴(Ctrl-C / Ctrl-V)或Ctrl-鼠标拖动。
  • 运用Delete键删去所选部件。
  • 假如翻滚条可见或整个零件调集小于图表的可视区域(“视口”),则能够在布景中运用鼠标按下平移图表(而不是在零件上)等候。
  • 运用鼠标滚轮向上和向下翻滚,运用Shift鼠标滚轮向左和向右翻滚。Ctrl-mouse-wheel扩大和缩小。

您还能够用手指在接触设备上平移,捏扩大,挑选,仿制,移动,删去,吊销和重做。大多数能够从键盘调用的指令都能够从默许的上下文菜单调用,您能够经过按下手指并坚持停止一瞬间来取得该指令。

文档中一切示例的共同之处在于它们都是“实时” - 没有屏幕截图!它们是由显现的源代码完成的实践Diagram。您能够与它们进行交互 - 有些乃至能够显现动画。

假如您想了解更多关于GoJS能够做什么的示例,请参阅GoJS Samples目录。为了便于查找JavaScript代码和文档或经过修正示例进行试验,您能够经过各种方法装置GoJS东西包:

  • 从下载中下载ZIP文件。
  • 从GITHub上的GoJS下载咱们。
  • 运用装置GoJS npm install gojs。

GoJS Concepts

图表 s由部分 s组成:节点能够经过链路衔接,而且能够组合在一起成为组 s。一切这些部分都在图层中集合在一起,并按布局摆放。

每个图都有一个模型,用于保存和解说您的应用程序数据,以确认节点到节点的链接联系和组成员联系。大多数部件都是数据绑定到您的应用程序数据。该图主动为模型的Model.nodeDataArray中的每个数据项创立一个Node或Group, 并为模型的GraphLinksModel.li欢乐彩官网下载-GoJS图表组件简介nkDataArray中的每个数据项创立一个Link。您能够向每个数据目标增加所需的任何特点,但每种模型只需求几个特点。

每个节点或链接一般由声明其外观和行为的模板界说。每个模板由面板号第GraphObject S,然后如TextBlock的 S或形状秒。一切部件都有默许模板,但简直一切应用程序都会指定自界说模板,以完成所需的外观和行为。GraphObject特点与模型数据特点的数据绑定使每个节点或链接对数据仅有。

该节点能够被手动地定位(交互方法或编程),或许能够由主动摆放 Diagram.layout以及由每个Group.layout。节点坐落其左上角点(GraphObject.position)或节点中的程序员界说点(Part.location好湿和Part.locationSpot)。

东西处理鼠标和键盘事情。每个图都有许多东西能够履行交互式使命,例如挑选零件或拖动它们或在两个节点之间制作新链接。该ToolManager确认哪些东西应该运转,依据鼠标事情和现在的状况。

每个图还有一个CommandHandler,它完成了各种指令,例如Delete或Copy。当ToolManager运转时,CommandHandler解说键盘事情,例如control-Z。

该图供给了翻滚图表部分以及扩大或缩小的功用。该图还包括一切层,而这些层又包括一切部分(节点和链接)。这些部件又由或许嵌套的文本,形状和图画组成。内存中JavaScript目标的这种层次结构形成了图表或许制作的一切内容的“可视树”。

在概述类答应用户看到整个模型和操控一下它的一部分,该图显现。的调色板类以为,用户能够拖动和放下到的图的部分。

您能够在图表中挑选一个或多个部件。模板完成能够在挑选节点或链接时更改其外观。该图还能够增加装修以指示挑选并支撑比如调整节点巨细或从头衔接链接之类的东西。装修品也是东西提示和上下文菜单的完成方法。

应该在欢乐彩官网下载-GoJS图表组件简介每个用户操作的单个业务中履行 对Diagram,GraphObject,Model或model数据状况的一切编程更改,以保证正确更新并支撑undo / redo。一切预界说的东西和指令都履行业务,因而假如启用了UndoManager,则每个用户操作都能够主动吊销。 图表上的DiagramEvent以及Diagrams和GraphObjects上的事情处理程序都会记载它们是否在业务中引发,或许是否需求履行业务以更改模型或图表。

创立图表

GoJS不依赖于任何JavaScript库或结构,因而您应该能够在任何环境中运用它。可是它的确需求环境支撑现代HTML和JavaScript。

加载GoJS

在您能够履行任何JavaScript代码来构建Diagram之前,您需求加载GoJS库。当您包括库时,“ go”JavaScript目标将包括一切GoJS类型。在开发过程中,咱们建议您加载“go-debug.js”而不是“go.js”,以取得额定的运转时过错查看和调试功用。

建议您声明您的网页支撑现代HTML:

 


. . .


假如您运用的是RequireJS,GoJS支撑UMD模块界说。有关示例,请参阅Require示例。此外,现在能够运用扩展类的模块化版别../extensionsTS/,其间扩展类已被转换为TypeScript并编译为.js可import修改的文件。或required。

在ES6(ECMAScript 2015)或TypeScript代码中,只需导入“go.js”库:

import * as go from "./path/to/gojs/release/go";

取决于您的npm环境:

import * as go from "gojs";

在Div元素中保管GoJS

每个图必须由HTML Div元素保管。 GoJS将管理该Div元素的内容,但您能够像对待任何HTML元素相同定位和调整Div的款式。该图将向该图将制作的Div元素增加Canvas元素 - 这是用户实践看到的内容。Canvas元素的巨细主动调整为与Div元素巨细相同。


. . .


然后,您能够运用对该Div元素的引证在JavaScript中创立Diagram。经过结构纯JavaScript目标并将其增加到图的模型来构建图。请注意,JavaScript代码中对GoJS类型(如Diagram)的一切引证都以“ go.” 为前缀。欢乐彩官网下载-GoJS图表组件简介

 



点击“了解更多”下载产品最新试用版

↓↓↓