gojs实现工作任务甘蔗图图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：gojs实现工作任务甘蔗图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
  
  <div id="allSampleContent" class="p-4 w-full">
<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between; border: solid 1px black">
    <div id="myTasksDiv" style="width: 150px; margin-right: 2px; border-right: 1px solid black; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);"><canvas tabindex="0" width="186" height="500" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 149px; height: 400px;">This text is displayed if your browser does not support the Canvas HTML element.</canvas><div style="position: absolute; overflow: auto; width: 149px; height: 400px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
    <div id="myGanttDiv" style="flex-grow: 1; height: 400px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);"><canvas tabindex="0" width="1106" height="478" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 885px; height: 383px;">This text is displayed if your browser does not support the Canvas HTML element.</canvas><div style="position: absolute; overflow: auto; width: 902px; height: 400px; z-index: 1;"><div style="position: absolute; width: 1104px; height: 484px;"></div></div></div>
  </div>
  <div id="slider">
    <label>间距:</label>
    <input id="widthSlider" type="range" min="8" max="24" value="12" oninput="rescale()">
  </div>
  <p>
   此示例演示了一个简单的甘特图。甘特图用于说明项目进度表，表示项目终端和摘要元素的开始和结束日期。

您可以通过更改“间距”值来放大图表，该值使用节点宽度和位置的数据绑定函数来缩放图表。这代替了更改Diagram.scale。
  </p>

  <p>
    The current model in JSON format:
  </p>
  <textarea id="mySavedModel" style="width:100%;height:250px">{ "class": "GraphLinksModel",
  "modelData": {"origin":1531540800000},
  "nodeDataArray": [
{"key":0,"text":"Project X","start":0,"duration":85},
{"key":1,"text":"Task 1","color":"darkgreen","start":0,"duration":22},
{"key":11,"text":"Task 1.1","color":"green","duration":10,"start":0},
{"key":12,"text":"Task 1.2","color":"green","start":10,"duration":12},
{"key":121,"text":"Task 1.2.1","color":"lightgreen","duration":3,"start":10},
{"key":122,"text":"Task 1.2.2","color":"lightgreen","duration":5,"start":13},
{"key":123,"text":"Task 1.2.3","color":"lightgreen","duration":4,"start":18},
{"key":2,"text":"Task 2","color":"darkblue","start":10,"duration":40},
{"key":21,"text":"Task 2.1","color":"blue","duration":15,"start":10},
{"key":22,"text":"Task 2.2","color":"goldenrod","start":25,"duration":14},
{"key":221,"text":"Task 2.2.1","color":"yellow","duration":8,"start":25},
{"key":222,"text":"Task 2.2.2","color":"yellow","duration":6,"start":33},
{"key":23,"text":"Task 2.3","color":"darkorange","start":39,"duration":11},
{"key":231,"text":"Task 2.3.1","color":"orange","duration":11,"start":39},
{"key":3,"text":"Task 3","color":"maroon","start":50,"duration":35},
{"key":31,"text":"Task 3.1","color":"brown","duration":10,"start":50},
{"key":32,"text":"Task 3.2","color":"brown","start":60,"duration":25},
{"key":321,"text":"Task 3.2.1","color":"lightsalmon","duration":8,"start":60},
{"key":322,"text":"Task 3.2.2","color":"lightsalmon","duration":3,"start":68},
{"key":323,"text":"Task 3.2.3","color":"lightsalmon","duration":7,"start":71},
{"key":324,"text":"Task 3.2.4","color":"lightsalmon","duration":5,"start":71},
{"key":325,"text":"Task 3.2.5","color":"lightsalmon","duration":4,"start":76},
{"key":326,"text":"Task 3.2.6","color":"lightsalmon","duration":5,"start":80}
],
  "linkDataArray": [
{"from":0,"to":1},
{"from":1,"to":11},
{"from":1,"to":12},
{"from":12,"to":121},
{"from":12,"to":122},
{"from":12,"to":123},
{"from":0,"to":2},
{"from":2,"to":21},
{"from":2,"to":22},
{"from":22,"to":221},
{"from":22,"to":222},
{"from":2,"to":23},
{"from":23,"to":231},
{"from":0,"to":3},
{"from":3,"to":31},
{"from":3,"to":32},
{"from":32,"to":321},
{"from":32,"to":322},
{"from":32,"to":323},
{"from":32,"to":324},
{"from":32,"to":325},
{"from":32,"to":326},
{"from":11,"to":2,"category":"Dep"}
]}</textarea>
<p class="text-xs">GoJS version 2.2.10. Copyright 1998-2022 by Northwoods Software.</p></div>
<script id="code">

// Custom Layout for myGantt Diagram
class GanttLayout extends go.Layout {
  constructor() {
    super();
    this.cellHeight = GridCellHeight;
  }

  doLayout(coll) {
    coll = this.collectParts(coll);
    const diagram = this.diagram;
    diagram.startTransaction("Gantt Layout");
    const bars = [];
    this.assignTimes(diagram, bars);
    this.arrangementOrigin = this.initialOrigin(this.arrangementOrigin);
    let y = this.arrangementOrigin.y;
    bars.forEach(node => {
      const tasknode = myTasks.findNodeForData(node.data);
      node.visible = tasknode.isVisible();
      node.position = new go.Point(convertStartToX(node.data.start), y);
      if (node.visible) y += this.cellHeight;
    });
    diagram.commitTransaction("Gantt Layout");
  }

  // Update node data, to make sure each node has a start and a duration
  assignTimes(diagram, bars) {
    const roots = diagram.findTreeRoots();
    roots.each(root => this.walkTree(root, 0, bars));
  }

  walkTree(node, start, bars) {
    bars.push(node);
    const model = node.diagram.model;
    if (node.isTreeLeaf) {
      let dur = node.data.duration;
      if (dur === undefined || isNaN(dur)) {
        dur = convertDaysToUnits(1);  // default task length?
        model.set(node.data, "duration", dur);
      }
      let st = node.data.start;
      if (st === undefined || isNaN(st)) {
        st = start;  // use given START
        model.set(node.data, "start", st);
      }
      return st + dur;
    } else {
      // first recurse to fill in any missing data
      node.findTreeChildren.........完整代码请登录后点击上方下载按钮下载查看