GoJS用于HTML图表的JavaScript库

GoJS是一个JavaScript和TypeScript库，用于创建和处理图，图表和图形。

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

GoJS最新版

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正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：