文档章节

GoJS图表组件简介

x
 xiaochuachua
发布于 05/28 15:10
字数 2352
阅读 99
收藏 0

下载GoJS最新版本

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 undo and Ctrl-Y to redo
      diagram.undoManager.isEnabled = true;

这将创建以下图表:

GoJS

您可以通过多种方式与此图表进行交互:

  • 您可以通过单击选择零件。选定的节点用Adornment突出显示,Adornment是围绕节点的蓝色矩形。所选链接在链接路径后面以蓝线突出显示。
  • 可以一次选择多个部件。单击以添加到选择时按住Shift键。单击以切换是否选中该部件时按住Control键。
  • 多选的另一种方法是在背景中的某个点(而不是在某个部分上)进行鼠标按下,稍等片刻,然后拖动一个框。选择鼠标向上时框中的部件。Shift和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.linkDataArray中的每个数据项创建一个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对象的这种层次结构形成了图表可能绘制的所有内容的“可视树”。

在概述类允许用户看到整个模型和控制一下它的一部分,该图显示。的调色板类认为,用户可以拖动和放下到的图的部分。

您可以在图表中选择一个或多个部件。模板实现可以在选择节点或链接时更改其外观。该图还可以添加装饰以指示选择并支持诸如调整节点大小或重新连接链接之类的工具。装饰品也是工具提示和上下文菜单的实现方式。

应该在每个用户操作的单个事务中执行 对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:

<!DOCTYPE html>  <!-- Declare standards mode. -->
  <html>
    <head>
    . . .
    <!-- Include the GoJS library. -->
    <script src="go-debug.js"></script>

如果您使用的是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元素大小相同。

<body>
    . . .
    <!-- The DIV for a Diagram needs an explicit size or else we won't see anything.
         In this case we also add a border to help see the edges. -->
    <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>

然后,您可以使用对该Div元素的引用在JavaScript中创建Diagram。通过构造纯JavaScript对象并将其添加到图的模型来构建图。请注意,JavaScript代码中对GoJS类型(如Diagram)的所有引用都以“ go.” 为前缀。

<!-- Create the Diagram in the DIV element using JavaScript. -->
  <!-- The "go" object is the "namespace" that holds all of the GoJS types. -->
  <script>
    var diagram = new go.Diagram("myDiagramDiv");
    diagram.model = new go.GraphLinksModel(
      [{ key: "Hello" },   // two node data, in an Array
       { key: "World!" }],
      [{ from: "Hello", to: "World!"}]  // one link data, in an Array
    );
  </script>

GoJS

本文转载自:https://gojs.net/latest/intro/index.html#HostingGoJSinaDivElement

x
粉丝 0
博文 225
码字总数 49214
作品 0
私信 提问
GoJS教程[2019]:使用GraphObjects构建零件

下载GoJS最新版本 您可以在传统的JavaScript代码中构造Node或其他类型的Part。 GoJS还提供了一种更具声明性的构建部件方式,与代码相比具有多个优势。 本文将讨论可用于构建节点的基本对象类...

xiaochuachua
06/03
26
0
html5在线画图工具与angular结合

需求描述: 想找一个熟悉gojs库或者愿意学习使用这个库的工程师,来和我们一起开发在线画图的功能。我们现在已经实现了大部分功能,demo在这里www.365trtd.net.有些功能需要找人帮忙一起实现...

zhenyuan2015
2016/05/04
48
0
在线画图工具功能重构和优化

需求描述: 想找一个熟悉gojs库或者愿意学习使用这个库的工程师,来和我们一起开发在线画图的功能。我们现在已经实现了大部分功能,demo在这里www.365trtd.net.有些功能需要找人帮忙一起实现...

zhenyuan2015
2016/04/26
48
1
前端页面 gojs

gojs类似于Extjs,使用gojs实现卡片的拆分流程。可就是卡在添加panel这一步了。求各位gojs高手指点

lixia_1
2014/02/28
753
0
gojs 流程图框架-基础绘图(一)

gojs 是一款非常优秀的流程图绘制 js 框架, 该框架没有中文版 api, 并且网上可查阅的资料非常少, 本文旨在带领读者了解整个框架结构, 以及基本的绘制方法. 本文对技术细节不作过多描述, 并会...

木子七
2018/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【Go专家编程】defer这里有个坑

前言 项目中,有时为了让程序更健壮,也即不panic,我们或许会使用recover()来接收异常并处理。 比如以下代码: func NoPanic() {if err := recover(); err != nil {fmt.Println("Recov...

恋恋美食
34分钟前
2
0
20190920笔记

扩展: bashrc和bash_profile http://ask.apelearn.com/question/7719 http://www.joshstaiger.org/archives/2005/07/bash_profile_vs.html echo 颜色 http://www.cnblogs.com/lr-ting/archi......

徐-锐
49分钟前
1
0
Shiro整合Redis代码解读

1. shiro默认使用的MemoryConstrainedCacheManager创建MapCache来保存缓存数据。manager和cache对象之间的关系可以参考笔者的另一篇文章,Springboot Redis详解。 2. shiro整合Redis的关键就...

sunranhou
今天
4
0
关闭服务

题目要求 在centos6系统里,我们可以使用ntsysv关闭不需要开机启动的服务,当然也可以使用chkconfig工具来实现。 写一个shell脚本,用chkconfig工具把不常用的服务关闭。脚本需要写成交互式的...

wzb88
今天
6
0
面试官:兄弟,说说 Spring Cloud 的核心架构原理吧

最近在补一些分布式系列的面试内容,提前几个月做做准备吧,你们懂的,也跟大家分享分享。现在分布式系统基本上都是标配了,如果你现在还在玩儿单机,没有接触过这些东西的话,权当是为你打开...

咪咪家的汪汪
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部