zoukankan      html  css  js  c++  java
  • (1) GoJS入门

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

    1.Gojs入门

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

    GoJS基本概念

    GoJS不依赖于任何JavaScript库或框架,应该可以在任何的HTMLJS环境中加载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="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>
    
    
  • 相关阅读:
    世界排名第二的web前端框架bulma与Bootstrap框架的选择
    Bootstrap5中文手册翻译完毕
    RabbitMQ 学习一 了解+点对点模式
    仿京东搜索
    ES集成SpringBoot
    ElasticSearch
    权限管理整合springsecurity代码执行过程
    权限管理
    Gateway网关
    canal数据同步 客户端代码实现
  • 原文地址:https://www.cnblogs.com/Nancy-wang/p/6556900.html
Copyright © 2011-2022 走看看