GoJS是一个用于实现交互式图表的JavaScript库。本页面将向您展示使用GoJS的基本要素。
下载GoJS最新版本
准备
GoJS是一个用于实现交互式图表的JavaScript库。本页面将向您展示使用GoJS的基本要素。
因为GoJS是一个依赖于HTML5功能的JavaScript库，所以您需要确保您的页面声明它是HTML5文档。当然，您需要加载库：
<!DOCTYPE html> <!-- HTML5 document type --><html><head> <!-- use go-debug.js when developing and go.js when deploying --> <script src="go-debug.js"></script> . . .
直接链接到GoJS library
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.36/go-debug.js"></script>
每个GoJS图都包含在<div>HTML页面中的HTML 元素中，您可以给出明确的大小：
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything. In this case we also add a background color so we can see that area. --><div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>
在JavaScript代码您传递< div >的id制作图表时：
var $ = go.GraphObject.make;var myDiagram = $(go.Diagram, "myDiagramDiv");
创建了一个空图：
图表和模型
这是一个模型和图表的示例，后面是它生成的实际图表：
var $ = go.GraphObject.make;var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo });var myModel = $(go.Model);// in the model data, each node is represented by a JavaScript object:myModel.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }];myDiagram.model = myModel;
该图显示了模型中的三个节点。一些互动已经成为可能：
- 单击并拖动上图中的背景以平移视图。
- 单击节点以选择它，或者按下并拖动节点以移动它。
- 要创建选择框，请单击并按住背景，然后开始拖动。
- 使用CTRL-C和CTRL-V或控制拖放来制作选择的副本。
- 按Delete键删除所选节点。
- 由于撤消管理器已启用，因此CTRL-Z和CTRL-Y将撤消并重做移动以及复制和删除。
购买GoJS正版授权，请点击“咨询在线客服”哟！
标签：JavaScript HTML5图表HTML图表控件流程图
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！