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

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

代码语言：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":"d.........完整代码请登录后点击上方下载按钮下载查看