资讯专栏INFORMATION COLUMN

GoJS 绘图 (一) :入门

X_AirDu / 2848人阅读

摘要:是一个库,让你轻松创建现代浏览器的交互图。支持图形化的模板和图形对象属性数据模型的数据绑定。许多预定义的工具和命令执行,大部分的图表所需要的标准的行为。外观和行为的定制是大多设置属性的问题。

GoJS是一个JavaScript库,让你轻松创建现代Web浏览器的交互图。 GoJS支持图形化的模板和图形对象属性数据模型的数据绑定。你只需要保存和恢复模型,包括持有任何性质的应用需求,简单的JavaScript对象。许多预定义的工具和命令执行,大部分的图表所需要的标准的行为。外观和行为的定制是大多设置属性的问题。

创建一个图 HTML
javascript
   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, in an Array
    );

这样就完成了的“Hello World!”

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79531.html

相关文章

  • GoJS 绘图 (十) :链接(完结)

    摘要:非定向链接最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素,因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。可以很容易地建立方向,只需添加一个形状并设置其属性。目前也就只能先写这么多吧入门的话问题不大了 非定向链接 最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素,因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。 diag...

    Rocko 评论0 收藏0
  • 绘图框架技术选型: jsPlumb VS mxGraph

    摘要:公司项目需要用到绘图框架,绘图部分以前是另一位同事负责,用的是框架。基于以上提及到的种种原因,上年年末我做起了技术调研,希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松,浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

    longmon 评论0 收藏0
  • 绘图框架技术选型: jsPlumb VS mxGraph

    摘要:公司项目需要用到绘图框架,绘图部分以前是另一位同事负责,用的是框架。基于以上提及到的种种原因,上年年末我做起了技术调研,希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松,浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

    channg 评论0 收藏0
  • GoJS 绘图 (四) :构建节点与GraphObjects

    摘要:你可以构建一个节点或其类型的代码。以下将讨论基本类型,你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的示意图。一个非常简单的节点由一个与构成。虽然以这种方式构建的节点将工作变得更加复杂的代码将变得更加难以阅读和维护。 你可以构建一个节点或其类型的JavaScript代码。以下将讨论基本类型,你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的...

    jokester 评论0 收藏0
  • GoJS 绘图 (六) :横向面板(panel)

    摘要:横向面板属性和纵向面板基本相同只是排列顺序不同默认对齐和拉伸垂直和水平两个面板的支持的和属性。这是一种便捷的方式使您不必设置每个元件的或 横向面板 属性和纵向面板基本相同只是排列顺序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

    Hancock_Xu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<