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