(1) GoJS入门

GoJS的官方下载,若下载失败,可尝试通过我的个人网盘分享下载。
GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。在网上并没有找到比较全面的中文文档,官方英文版写的还是很容易理解的。

1.Gojs入门

GoJS是一个javascript,利用GoJS可以轻松在页面上创建交互式的图表。GoJS支持图形模板,以及图形属性与模型对象之间的数据绑定。

GoJS基本概念

GoJS不依赖于任何JavaScript库或框架,应该可以在任何的HTML\JS环境中加载go.js并使用。

  <html>
    <head>
    . . .
    <!-- Include the GoJS library. -->
    <script src="go.js"></script>
    </head>

在ES6或TS代码中,引入gojs:

import * as go from "go";

npm环境:

import * as go from "gojs";

创建一个简单的仅包含node和link的图表:

index.html (创建一个DIV作为diagramd的画布,300px*300px)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.7/go-debug.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="myDiagramDiv" style="width:300px; height:300px; background-color: #DAE4E4;"></div>
</body>
</html>

script.js

  <script>
    var diagram = new go.Diagram("myDiagramDiv");
    diagram.model = new go.GraphLinksModel(
      [{ key: "Hello" },   // 两个node对象
       { key: "World!" }],
      [{ from: "Hello", to: "World!"}]  // 一条link的数据
    );
  </script>

posted @ 2017-04-10 09:40  coder_Jenny  阅读(717)  评论(0编辑  收藏  举报