li
1b24994e74
- Contract.php: 返回合约账户余额(balance_contract) - My.php: 地址管理增加BTC/ETH - AppContract.php: 一键平仓(closeall) - AppProxy.php: 代理专属注册链接 + 分级权限(L1/L2) - site.php: 手续费减半(0.018→0.009) - agent_permission_setup.sql: 代理权限SQL - crypto_news_crawler.py: 新闻自动采集脚本
83 lines
2.8 KiB
HTML
Executable File
83 lines
2.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS Overview -- Northwoods Software</title>
|
|
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
|
|
<script src="../release/go.js"></script>
|
|
<script src="goIntro.js"></script>
|
|
</head>
|
|
<body onload="goIntro()">
|
|
<div id="container" class="container-fluid">
|
|
<div id="content">
|
|
|
|
<h1>Overview Diagrams</h1>
|
|
<p>
|
|
An <a>Overview</a> is a subclass of <a>Diagram</a> that is used to display all of the <a>Part</a>s
|
|
of another diagram and to show where that diagram's viewport is relative to all of those parts.
|
|
The user can also scroll the overviewed diagram by clicking or dragging within the overview.
|
|
</p>
|
|
<p>
|
|
The initialization of an <a>Overview</a> is just a matter of setting <a>Overview.observed</a>
|
|
to refer to the <a>Diagram</a> that you want it to show. So there needs to be a DIV for your main diagram,
|
|
for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you
|
|
create the Overview in a very simple manner.
|
|
</p>
|
|
<p>
|
|
See samples that make use of <a>Overview</a>s in the <a href="../samples/index.html#overview">samples index</a>.
|
|
</p>
|
|
<p>
|
|
The code below first creates a Diagram that we want to view.
|
|
It initializes the diagram with 1000 nodes of random colors.
|
|
</p>
|
|
<p>
|
|
It then creates an <a>Overview</a> and sets <a>Overview.observed</a> to the above Diagram.
|
|
The DIV for the overview is named "myOverviewDiv".
|
|
You can, if you wish, set <a>Overview.observed</a> at a later time.
|
|
You can also set it to null in order to have the Overview stop showing any Diagram.
|
|
</p>
|
|
<pre class="lang-js" id="diagramPre">
|
|
// initialize the main Diagram
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "Rectangle",
|
|
{ fill: "white" },
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock, { margin: 5 },
|
|
new go.Binding("text", "key"))
|
|
);
|
|
|
|
// start off with a lot of nodes
|
|
var nodeDataArray = [];
|
|
for (var i = 0; i < 1000; i++) {
|
|
nodeDataArray.push({ color: go.Brush.randomColor() });
|
|
}
|
|
diagram.model.nodeDataArray = nodeDataArray;
|
|
|
|
// create the Overview and initialize it to show the main Diagram
|
|
var myOverview =
|
|
$(go.Overview, "myOverviewDiv",
|
|
{ observed: diagram });
|
|
</pre>
|
|
<div style="width:100%">
|
|
<span id="overviewSpan" style="display: inline-block; vertical-align: top;">
|
|
<b>Overview:</b><br />
|
|
<div id="myOverviewDiv" style="width:150px; height: 150px" class="diagramStyling"></div>
|
|
</span>
|
|
<span id="diagramSpan" style="display: inline-block; vertical-align: top">
|
|
<b>Diagram:</b><br />
|
|
</span>
|
|
</div>
|
|
<script>goCode("diagramPre", 500, 300, go.Diagram, "diagramSpan");</script>
|
|
|
|
<p>
|
|
Animations are not shown in Overviews.
|
|
Rendering images or SVG does not work for Overviews.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|