轻量级流程图控件GoJS甘特图示例
GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和 HTML5 Canvas程序中创建流程图，且极大地简化你的JavaScript / Canvas 程序。本文主要演示安排座次表。
此示例演示如何将“Person（人）”节点放到“Table（桌子）”节点上，您可以拖动人物名字移动至指定座位，当一个人被拖入到图表中后，此人不会再被分配座位。在图表之间拖动的人会自动从图表中删除。例如将Arya Stark拖至Head 1中的位置1，Arya Stark会显示在此座位上，并且MyGuests图表已经自动删除Arya Stark。
“Table”节点由单独的模板定义，允许最大程度地定制桌椅的形状和大小和位置。
MyGuests图表中的“Person”节点也可以表示一组人，例如您的朋友带上他/她的朋友（不知道名字）或者一家人。将这样一组人放到桌子上时，会在myDiagram中创建其他节点。如果有空间，那些人就会坐在桌旁并坐在一起。
可以移动或旋转桌子。移动或旋转桌子会自动重新定位坐在该桌子上的人。
UndoManager在两个Diagrams之间共享，因此可以在任一图表中撤消/重做，并让它自动处理图表之间的拖动，以及图表中的更改。
在页面中查看此示例页面的部分源代码，点击这里查看完整源代码。
function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; // Initialize the main Diagram myDiagram = $(go.Diagram, "myDiagramDiv", { allowDragOut: true, // to myGuests allowDrop: true, // from myGuests allowClipboard: false, initialContentAlignment: go.Spot.Center, draggingTool: $(SpecialDraggingTool), rotatingTool: $(HorizontalTextRotatingTool), // For this sample, automatically show the state of the diagram's model on the page "ModelChanged": function(e) { if (e.isTransactionFinished) { document.getElementById("savedModel").textContent = myDiagram.model.toJson(); } }, "undoManager.isEnabled": true }); myDiagram.nodeTemplateMap.add("", // default template, for people $(go.Node, "Auto", { background: "transparent" }, // in front of all Tables // when selected is in foreground layer new go.Binding("layerName", "isSelected", function(s) { return s "Foreground" : ""; }).ofObject(), { locationSpot: go.Spot.Center }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding("text", "key"), { // what to do when a drag-over or a drag-drop occurs on a Node representing a table mouseDragEnter: function(e, node, prev) { var dragCopy = node.diagram.toolManager.draggingTool.copiedParts; // could be copied from palette highlightSeats(node, dragCopy dragCopy : node.diagram.selection, true); }, mouseDragLeave: function(e, node, next) { var dragCopy = node.diagram.toolManager.draggingTool.copiedParts; highlightSeats(node, dragCopy dragCopy : node.diagram.selection, false); }, mouseDrop: function(e, node) { assignPeopleToSeats(node, node.diagram.selection, e.documentPoint); } }, $(go.Shape, "Rectangle", { fill: "blanchedalmond", stroke: null }), $(go.Panel, "Viewbox", { desiredSize: new go.Size(50, 38) }, $(go.TextBlock,{ margin: 2, desiredSize: new go.Size(55, NaN), font: "8pt Verdana, sans-serif", textAlign: "center", stroke: "darkblue" }, new go.Binding("text", "", function(data) { var s = data.key; if (data.plus) s += " +" + data.plus.toString(); return s; })) ) )); // Create a seat element at a particular alignment relative to the table. function Seat(number, align, focus) { if (typeof align === 'string') align = go.Spot.parse(align); if (!align || !align.isSpot()) align = go.Spot.Right; if (typeof focus === 'string') focus = go.Spot.parse(focus); if (!focus || !focus.isSpot()) focus = align.opposite(); return $(go.Panel, "Spot", { name: number.toString(), alignment: align, alignmentFocus: focus }, $(go.Shape, "Circle", { name: "SEATSHAPE", desiredSize: new go.Size(40, 40), fill: "burlywood", stroke: "white", strokeWidth: 2 }, new go.Binding("fill")), $(go.TextBlock, number.toString(), { font: "10pt Verdana, sans-serif" }, new go.Binding("angle", "angle", function(n) { return -n; })) ); } function tableStyle() { return [ { background: "transparent" }, { layerName: "Background" }, // behind all Persons { locationSpot: go.Spot.Center, locationObjectName: "TABLESHAPE" }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), { rotatable: true }, new go.Binding("angle").makeTwoWay(), { // what to do when a drag-over or a drag-drop occurs on a Node representing a table mouseDragEnter: function(e, node, prev) { var dragCopy = node.diagram.toolManager.draggingTool.copiedParts; // could be copied from palette highlightSeats(node, dragCopy dragCopy : node.diagram.selection, true); }, mouseDragLeave: function(e, node, next) { var dragCopy = node.diagram.toolManager.draggingTool.copiedParts; highlightSeats(node, dragCopy dragCopy : node.diagram.selection, false); }, mouseDrop: function(e, node) { assignPeopleToSeats(node, node.diagram.selection, e.documentPoint); } } ]; } // various kinds of tables: myDiagram.nodeTemplateMap.add("TableR8", // rectangular with 8 seats $(go.Node, "Spot", tableStyle(), $(go.Panel, "Spot", $(go.Shape, "Rectangle", { name: "TABLESHAPE", desiredSize: new go.Size(160, 80), fill: "burlywood", stroke: null }, new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), new go.Binding("fill")), $(go.TextBlock, { editable: true, font: "bold 11pt Verdana, sans-serif" }, new go.Binding("text", "name").makeTwoWay(), new go.Binding("angle", "angle", function(n) { return -n; })) ), Seat(1, "0.2 0", "0.5 1"), Seat(2, "0.5 0", "0.5 1"), Seat(3, "0.8 0", "0.5 1"), Seat(4, "1 0.5", "0 0.5"), Seat(5, "0.8 1", "0.5 0"), Seat(6, "0.5 1", "0.5 0"), Seat(7, "0.2 1", "0.5 0"), Seat(8, "0 0.5", "1 0.5") )); myDiagram.nodeTemplateMap.add("TableR3", // rectangular with 3 seats in a line $(go.Node, "Spot", tableStyle(), $(go.Panel, "Spot", $(go.Shape, "Rectangle", { name: "TABLESHAPE", desiredSize: new go.Size(160, 60), fill: "burlywood", stroke: null }, new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), new go.Binding("fill")), $(go.TextBlock, { editable: true, font: "bold 11pt Verdana, sans-serif" }, new go.Binding("text", "name").makeTwoWay(), new go.Binding("angle", "angle", function(n) { return -n; })) ), Seat(1, "0.2 0", "0.5 1"), Seat(2, "0.5 0", "0.5 1"), Seat(3, "0.8 0", "0.5 1") ));
在GitHub上查看此示例页面的源代码
想查看在线操作示例，点击此处。
想要购买GoJS正版授权，或者获取更多该产品相关信息的朋友可以点击” 咨询在线客服 “~
标签：JavaScript HTML5图表图表控件流程图
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！