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: 新闻自动采集脚本
93 lines
3.3 KiB
HTML
Executable File
93 lines
3.3 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Donut Charts</title>
|
|
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
|
|
<meta name="description" content="A donut chart in each node." />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<script id="code">
|
|
function init() {
|
|
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
|
|
var $ = go.GraphObject.make;
|
|
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv");
|
|
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Spot",
|
|
$(go.Panel,
|
|
$(go.Shape, "Circle", // provide a whole-circle background for the chart
|
|
{ width: 100, height: 100, strokeWidth: 0, fill: "transparent" }),
|
|
$(go.Shape, { fill: "transparent", stroke: "cyan", strokeWidth: 8 },
|
|
new go.Binding("geometry", "value", makeArc),
|
|
new go.Binding("stroke", "color1")),
|
|
$(go.Shape, { fill: "transparent", stroke: "gray", strokeWidth: 8 },
|
|
new go.Binding("geometry", "value", makeArcRest),
|
|
new go.Binding("stroke", "color2"))
|
|
),
|
|
$(go.TextBlock,
|
|
new go.Binding("text"))
|
|
);
|
|
|
|
// These arcs assume the angle starts at 270 degrees, at the top of the circle.
|
|
// They all assume the circle is 100x100 in size.
|
|
function makeArc(sweep) {
|
|
return new go.Geometry()
|
|
.add(new go.PathFigure(50, 0)
|
|
.add(new go.PathSegment(go.PathSegment.Arc, -90, sweep, 50, 50, 50, 50)));
|
|
}
|
|
|
|
function makeArcRest(sweep) {
|
|
var p = new go.Point(50, 0).rotate(-90+sweep).offset(50, 50);
|
|
return new go.Geometry()
|
|
.add(new go.PathFigure(p.x, p.y)
|
|
.add(new go.PathSegment(go.PathSegment.Arc, sweep-90, 360-sweep, 50, 50, 50, 50)));
|
|
}
|
|
|
|
myDiagram.model = new go.GraphLinksModel(
|
|
[
|
|
{ key: 1, text: "Alpha", value: 0 },
|
|
{ key: 2, text: "Beta", value: 90 },
|
|
{ key: 3, text: "Gamma", value: 135 },
|
|
{ key: 4, text: "Delta", value: 330, color1: "red", color2: "green" }
|
|
],
|
|
[
|
|
{ from: 1, to: 2 },
|
|
{ from: 1, to: 3 },
|
|
{ from: 3, to: 4 },
|
|
{ from: 4, to: 1 }
|
|
]);
|
|
}
|
|
|
|
function changeValue() {
|
|
var node = myDiagram.selection.first();
|
|
if (node instanceof go.Node) {
|
|
myDiagram.model.commit(function(m) {
|
|
var val = node.data.value;
|
|
val += Math.random() * 40 - 20;
|
|
if (val < 0) val = 20;
|
|
else if (val >= 360) val = 340;
|
|
m.set(node.data, "value", val);
|
|
}, "changed data value");
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="sample">
|
|
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
|
|
<button onclick="changeValue()">Change Selected Value</button>
|
|
<p>
|
|
Each node contains a Position Panel containing two Shape elements that get Geometry values
|
|
that show a data value as an annular bar in a circle. One can also specify the colors of
|
|
the two bars -- the bar showing the value and the rest of the circle.
|
|
</p>
|
|
<p>
|
|
For more sophisticated charts within nodes, see the <a href="canvases.html">Canvas Charts</a> sample.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |