GoJS用于HTML图表的JavaScript库

原创|行业资讯|编辑:杨鹏连|2020-12-15 11:24:36.577|阅读 95 次

概述:GoJS是一个JavaScript和TypeScript库,用于创建和处理图,图表和图形。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

相关链接:

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

GoJS入门

GoJS是一个灵活的库,可用于创建多种不同类型的交互式图,包括数据可视化,绘图工具和图形编辑器。有样品流程图,组织结构图,业务流程BPMN,泳道,时间表,状态图,看板,网络,思维导图,桑基,家谱和系图图,鱼骨图,平面图,UML,决策树,PERT图,甘特图,和数百人。GoJS包括许多内置布局,包括树形布局,力导向,径向和分层的有向图布局,以及许多自定义布局示例。

GoJS使用HTML Canvas元素渲染(导出为SVG或图像格式)。GoJS可以在Web浏览器中运行,也可以在Node或Puppeteer的服务器端运行。GoJS Diagrams由模型支持,通常通过JSON保存和加载。

在gojs.net上了解有关GoJS的更多信息

该存储库包含所有示例,扩展和文档的库和源。您可以使用GitHub存储库快速搜索所有源。

样本

通过创建一个或多个模板(具有所需属性数据绑定)并添加模型数据来构造图。

<script src="go.js"></script>

<script id="code">
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    var myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        { // enable undo & redo
          "undoManager.isEnabled": true
        });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle",
          { strokeWidth: 0, fill: "white" },  // default fill is white
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);
  }
</script>
上面的图和模型代码创建以下图。用户现在可以单击节点或链接以选择它们,复制并粘贴它们,拖动它们,删除它们,使用鼠标或手指滚动,平移和缩放。

支持

诺斯伍德软件为GoJS提供为期一个月的免费开发人员对开发人员支持,以帮助您开始进行项目。

阅读和搜索GoJS官方论坛以查找与您的问题有关的任何主题。

对于有关GoJS的任何非技术性问题,例如有关销售或许可的问题,请访问Northwoods Software的联系表。


想要购买GoJS正版授权,或了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:Northwoods

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat