gojs

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gantt chart</title> <meta name="description" content="A Gantt chart that supports zooming into the timeline." /> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="../release/go.js"></script> <script src="../assets/js/goSamples.js"></script>  <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagramDiv", // Diagram refers to its DIV HTML element by id { _widthFactor: 1, // a scale for the nodes' positions and widths isReadOnly: true, // deny the user permission to alter the diagram or zoom in or out allowZoom: false, "grid.visible": true, // display a grid in the background of the diagram "grid.gridCellSize": new go.Size(30, 150) }); // create the template for the standard nodes myDiagram.nodeTemplateMap.add("", $(go.Node, "Auto", // links come from the right and go to the left side of the top of the node { fromSpot: go.Spot.Right, toSpot: new go.Spot(0.001, 0, 11, 0) }, $(go.Shape, "Rectangle", { height: 15 }, new go.Binding("fill", "color"), new go.Binding("width", "width", function(w) { return scaleWidth(w); })), $(go.TextBlock, { margin: 2, alignment: go.Spot.Left }, new go.Binding("text", "key")), // using a function in the Binding allows the value to // change when Diagram.updateAllTargetBindings is called new go.Binding("location", "loc", function(l) { return new go.Point(scaleWidth(l.x), l.y); }) )); // create the template for the start node myDiagram.nodeTemplateMap.add("start", $(go.Node, { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false }, $(go.Shape, "Diamond", { height: 15, width: 15 }), // make the location of the start node is not scalable new go.Binding("location", "loc") )); // create the template for the end node myDiagram.nodeTemplateMap.add("end", $(go.Node, { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false }, $(go.Shape, "Diamond", { height: 15, width: 15 }), // make the location of the end node (with location.x < 0) scalable new go.Binding("location", "loc", function(l) { if (l.x >= 0) return new go.Point(scaleWidth(l.x), l.y); else return l; }) )); // create the link template myDiagram.linkTemplate = $(go.Link, { routing: go.Link.Orthogonal, corner: 3, toShortLength: 2, selectable: false }, $(go.Shape, { strokeWidth: 2 }), $(go.Shape, { toArrow: "OpenTriangle" }) ); // add the nodes and links to the model myDiagram.model = new go.GraphLinksModel( [ // node data { key: "a", color: "coral", width: 120, loc: new go.Point(scaleWidth(0), 40) }, { key: "b", color: "turquoise", width: 160, loc: new go.Point(scaleWidth(0), 60) }, { key: "c", color: "coral", width: 150, loc: new go.Point(scaleWidth(120), 80) }, { key: "d", color: "turquoise", width: 190, loc: new go.Point(scaleWidth(120), 100) }, { key: "e", color: "coral", width: 150, loc: new go.Point(scaleWidth(270), 120) }, { key: "f", color: "turquoise", width: 130, loc: new go.Point(scaleWidth(310), 140) }, { key: "g", color: "coral", width: 155, loc: new go.Point(scaleWidth(420), 160) }, { key: "begin", category: "start", loc: new go.Point(-15, 20) }, { key: "end", category: "end", loc: new go.Point(scaleWidth(575), 180) } ], [ // link data { from: "begin", to: "a" }, { from: "begin", to: "b" }, { from: "a", to: "c" }, { from: "a", to: "d" }, { from: "b", to: "e" }, { from: "c", to: "e" }, { from: "d", to: "f" }, { from: "e", to: "g" }, { from: "f", to: "end" }, { from: "g", to: "end" } ]); // add a Graduated panel to show the dates, globally scoped dateScale = $(go.Part, "Graduated", { graduatedTickUnit: 1, graduatedMin: 0, graduatedMax: 3, pickable: false, location: new go.Point(0, 0) }, $(go.Shape, { name: "line", strokeWidth: 0, geometryString: "M0 0 H" + scaleWidth(450) } ), $(go.TextBlock, { name: "labels", font: "10pt sans-serif", alignmentFocus: new go.Spot(0, 0, -3, -3), graduatedFunction: function(v) { var d = new Date(2017, 6, 23); d.setDate(d.getDate() + v * 7); // format date output to string var options = { month: "short", day: "2-digit" }; return d.toLocaleDateString("en-US", options); } } ) ); myDiagram.add(dateScale); } // scale the number according to the current widthFactor function scaleWidth(num) { return num * myDiagram._widthFactor; } // change the grid's cell size and the widthFactor, // then update Bindings to scale the widths and positions of nodes, // as well as the width of the date scale function rescale() { var val = parseFloat(document.getElementById("widthSlider").value); myDiagram.startTransaction("rescale"); myDiagram.grid.gridCellSize = new go.Size(val, 150); myDiagram._widthFactor = val / 30; myDiagram.updateAllTargetBindings(); // update width of date scale and maybe change interval of labels if too small var width = scaleWidth(450); dateScale.findObject("line").geometryString = "M0 0 H" + width; if (width >= 140) dateScale.findObject("labels").interval = 1; if (width < 140) dateScale.findObject("labels").interval = 2; if (width < 70) dateScale.findObject("labels").interval = 4; myDiagram.commitTransaction("rescale"); } </script> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div> <div id="slider"> <label>Spacing:</label> <input id="widthSlider" type="range" min="2" max="90" value="30" onchange="rescale()"/> </div> <p> This sample demonstrates a simple Gantt chart. Gantt charts are used to illustrate project schedules, denoting the start and end dates for terminal and summary elements of the project. </p> <p> You can zoom in on the diagram by changing the "Spacing" value, which scales the diagram using a data binding function for nodes' widths and locations. This is in place of changing the <a>Diagram.scale</a>. </p> </div> </body> </html>