-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
303 lines (277 loc) · 16.4 KB
/
Copy pathindex.html
File metadata and controls
303 lines (277 loc) · 16.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="GoJS is a JavaScript library for building interactive diagrams and graphs on the web. Build apps with flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and many node and link concepts are built-in to GoJS." />
<meta name="keywords" content="JavaScript diagram graph chart drawing visualization modeling component library flowchart orgchart network BPMN UML ER editor">
<title>GoJS Diagram and Graph Library for JavaScript and TypeScript</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- custom CSS after bootstrap -->
<link href="assets/css/main.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.flex-container {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-item {
width: 220px;
margin: 5px;
}
</style>
<link rel="prerender" href="samples/flowchart.html">
<link rel="prerender" href="samples/index.html">
</head>
<body id="frontpage">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="learn/index.html">Learn</a></li>
<li><a href="samples/index.html">Samples</a></li>
<li><a href="intro/index.html">Intro</a></li>
<li><a href="api/index.html">API</a></li>
<li><a href="download.html">Download</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div id="bannertop" class="jumbotron banner">
<div class="container-fluid plr15">
<h1><span id="bannerlogo">GoJS</span></h1>
<h2><span>Web的交互式JavaScript图表</span></h2>
<p><a class="btn btn-primary btn-lg" href="samples/index.html" role="button">查看实例 »</a></p>
</div>
</div>
<div class="container-fluid plr15">
<div class="row" style="border: 10px solid #dff0d8; padding: 10px;">
<h3 class="text-center">GoJS 2.1 发布: 阅读所有 <a href="changelog.html">新功能和更改</a></h3>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/animation.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/changelog/2.1linkAnimation.gif"></a>
<a style="margin: 2px;" href="intro/animation.html"><img style="box-shadow: none; width: 60px; height: 80px;" src="assets/images/changelog/2.1nodeAnimation.gif"></a>
<p style="flex-grow: 1; margin: 4px;">
新的动画功能，包括指定自定义动画的功能，详情请参见 <a href="intro/animation.html">动画介绍页</a>.
</p>
</div>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/react.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/react-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
新增:一个用于简化React集成的React组件, <strong><a href="https://github.com/NorthwoodsSoftware/gojs-react">gojs-react</a></strong>和一个使用该组件的React示例
<a href="https://github.com/NorthwoodsSoftware/gojs-react-basic"><strong>gojs-react-basic</strong></a>.
更多有关信息，请参见<a href="intro/react.html">React中使用GoJS简介页面</a>
</p>
</div>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/angular.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/angular-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
新增:一个用于简化Angular集成的Angular组件 <strong><a href="https://github.com/NorthwoodsSoftware/gojs-angular">gojs-angular</a></strong>,以及一个使用该组件的Angular示例
<a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic"><strong>gojs-angular-basic</strong></a>.
更多有关信息，请参见 <a href="intro/angular.html">Angular中使用GoJs简介页面</a>
</p>
</div>
</div>
<div class="mt30">
<h2><strong>GoJS</strong>是一个JavaScript和Typescript库，用于构建交互式的图</h2>
<p>
从简单的流程图和组织结构图到高度特定的工业图，SCADA和BPMN图，基因图和爆发型模型等医学图，等等。GoJS使用可自定义的模板和布局使构建复杂节点，链接和组的图变得容易。
</p>
<p>
GoJS提供了用于用户交互的高级功能，例如拖放，复制和粘贴，就地文本编辑，工具提示，上下文菜单，自动布局，模板，数据绑定和模型，事务状态和撤消管理，调色板，概述，事件处理程序，命令，用于自定义操作的可扩展工具以及可自定义的动画。
</p>
<p>
我们维护着数百个 <a href="samples/index.html">示例图</a>, 为您详细介绍了交互性，模板和用户逻辑的不同示例。在评估期间，我们提供免费的开发人员对开发人员支持
</p>
</div>
<div class="flex-container">
<div class="flex-item">
<a class="imagelink" href="samples/flowchart.html"><img src="assets/images/site1.png" alt="Flowchart" class="image img-thumbnail">
<h3>流程图</h3></a>
<div>建立交互式流程图或流程图。让您的用户使用JSON模型输出来构建，修改和保存图。</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/stateChart.html"><img src="assets/images/site6.png" class="img-thumbnail" alt="State Chart" />
<h3>状态图</h3></a>
<div>可视化状态图和其他行为图。创建具有实时更新的图表以监视状态，或创建交互式图表以进行计划。</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/sankey.html"><img src="assets/images/site2.png" class="img-thumbnail" alt="Sankey Diagram" />
<h3>桑基图</h3></a>
<div>GoJS允许对链接和节点进行大量自定义，以构建各种图。可视化流量或连接管道</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/genogram.html"><img src="assets/images/site5.png" class="img-thumbnail" alt="Leaflet Map" />
<h3>Genogram 图</h3></a>
<div>创建Genogram和Medical图，或创建具有可折叠级别的可编辑族谱。</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/orgChartEditor.html"><img src="assets/images/site3.png" class="img-thumbnail" alt="Org Chart" />
<h3>组织图</h3></a>
<div>创建经典的组织结构图以进行查看或编辑。自动布局使不同的可视化选项变得容易。</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/dynamicPorts.html"><img src="assets/images/site7.png" class="img-thumbnail" alt="Dynamic Ports Demo" />
<h3>动态端口</h3></a>
<div>动态添加端口和自定义链接路由。使用数据绑定在Model JSON中保存和加载路由。</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/productionProcess.html"><img src="assets/images/site4.png" class="img-thumbnail" alt="Data Visualization" />
<h3>工业流程图</h3></a>
<div>为工业流程，工作流，SCADA图等建模。权限和验证使您在客户构建图时轻松添加规则和约束。</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/regrouping.html"><img src="assets/images/site8.png" class="img-thumbnail" alt="Regrouping Demo" />
<h3>动态分组</h3></a>
<div>将组用作容器和子图，组成员受其自己的规则和布局限制。</div>
</div>
</div>
</div>
<div class="container-fluid plr15">
<div class="row mt30 center-block">
<p>
<strong>GoJS</strong> is implemented in TypeScript and can be used as a JavaScript library or built into your project from TypeScript sources.
GoJS normally runs completely in the browser, rendering to an HTML Canvas element or SVG without any server-side requirements.
It can also run in headless or server environments, like Node.
GoJS does not depend on any libraries or frameworks, and can work alongside Angular, React, within Electron, or with no framework at all.
<p>
Build custom modeling environments and domain-specific visual languages using the powerful features of GoJS.
Provide both a system editor and a read-only status monitor using shared code and templates.
Simultaneously show alternative visualizations of the same data in different diagrams.
Implement drill-down using expansion of subtrees and subgraphs or a detailed view in another diagram.
<p>
Our thorough documentation introduces the basic concepts and demonstrates typical features that most apps want to offer.
Nodes and links can be arbitrarily detailed according to the needs of the application.
There are many properties that permit simple permissions and customizations, and some methods may be overridden for more complicated customizations.
</div>
<div class="row mt30 center-block">
<h2>将GoJS与您喜欢的框架一起使用</h2>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/react.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/react-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
We publish a react component, <strong><a href="https://github.com/NorthwoodsSoftware/gojs-react">gojs-react</a></strong> to simplify React integration,
and host a <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic">React sample using GoJS called <strong>gojs-react-basic</strong></a>.
See the <a href="intro/react.html">GoJS with React introduction page</a> for more information.
</p>
</div>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/angular.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/angular-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
We publish an Angular component, <strong><a href="https://github.com/NorthwoodsSoftware/gojs-angular">gojs-angular</a></strong> to simplify Angular integration,
and host a <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic">Angular sample using GoJS called <strong>gojs-angular-basic</strong></a>.
See the <a href="intro/angular.html">GoJS with Angular introduction page</a> for more information.
</p>
</div>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="samples/vue.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/vue-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
我们有一个<a href="samples/vue.html">Vue.js与GoJS结合使用的示例</a>.
</p>
</div>
</div>
<div class="row mt30 center-block">
<div class="col-md-6">
<h2>探索</h2>
<p>
运行200多个示例应用程序，这些应用程序演示了流程图，组织结构图，思维导图，UML图，BPMN图，图形编辑器，数据可视化，自定义工具和布局等。
</p>
<p>
<a class="btn btn-primary" href="samples/index.html" role="button">查看交互性例子</a>
</p>
</div>
<div class="col-md-6">
<h2>学习</h2>
<p>
开始逐步介绍如何使用GoJS和一些模型数据在HTML中构建JavaScript图。
</p>
<p>
<a class="btn btn-primary" href="learn/index.html" role="button">GoJs快速入门教程</a>
<a class="btn btn-primary" href="https://www.nwoods.com/videos.html" role="button">观看视频教程</a>
</p>
</div>
</div>
<div class="row center-block">
<div class="col-md-6">
<h2>下载</h2>
<p>
获取该库以及所有示例，扩展和文档的副本。搜索JavaScript代码并修改示例以启动您的应用。
</p>
<p>
<a class="btn btn-primary" href="download.html" role="button">下载资源包</a>
<a class="btn btn-primary" href="https://github.com/NorthwoodsSoftware/GoJS" role="button">克隆GitHub仓库</a>
<a class="btn btn-primary" href="https://www.npmjs.com/package/gojs" role="button">通过NPM安装</a>
</p>
</div>
<div class="col-md-6">
<h2>技术文档</h2>
<p>
阅读我们的简介以获取GoJS概念和功能的概述，其中包括每页中直接嵌入的数百个实时交互式示例。
</p>
<p>
<a class="btn btn-primary" href="intro/index.html" role="button">阅读介绍页面</a>
</p>
</div>
</div>
<div class="row center-block">
<div class="col-md-6">
<h2>API 文档</h2>
<p>
阅读我们的综合文档，以深入了解所有JavaScript类的属性和方法。
</p>
<p>
<a class="btn btn-primary" href="api/index.html" role="button">查看API文档</a>
</p>
</div>
</div>
<div class="row mt30 center-block">
<p>
详细的版本发布记录请参阅<strong><a href="changelog.html" target="_blank">更新日志</a></strong>.
</p>
</div>
</div> <!-- /container -->
<footer id="footer" class="row">
<div class="col-sm-4">
<h3>GoJS</h3>
<p>by Northwoods Software</p>
<p>Copyright 1998-2020 <a href="https://www.nwoods.com" target="_blank" rel="noopener">Northwoods Software</a></p>
</div>
<div class="col-sm-4">
<ul>
<li><a href="samples/index.html">在线实例</a></li>
<li><a href="learn/index.html">快速入门</a></li>
<li><a href="intro/index.html">使用教程</a></li>
<li><a href="api/index.html">API文档</a></li>
<li><a href="changelog.html">更新日志</a></li>
<li><a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a></li>
</ul>
</div>
<div class="col-sm-4">
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>