问如何在dhtmlx甘特图中添加自定义div
EN

Stack Overflow用户

提问于 2020-12-16 02:45:54

回答 1查看 397关注 0票数 1

我正在使用DHTMLX甘特图，我必须在日期上面的第二列(图表部分)内再创建一行，并通过与日期匹配将该行划分为7列。目前，我已经在独立行中创建了自定义div。我尝试使用在第二个列对象中添加行，但它不起作用。下面是代码

html

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
  <script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
  <style>
    .gantt_custom_button {
      background-color: rgb(206, 206, 206);
      position: absolute;
      right: -10px;
      top: 5px;
      width: 20px;
      height: 26px;
      border-radius: 0;
    }
  </style>


</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>

<body>
  <script>
    var task1 = {
      'data': [{
          'id': 1,
          'text': 'Project #1',
          'start_date': '01-04-2019',
          'duration': 2,
          'order': 10,
          'progress': 0.4,
          'open': true
        },
        {
          'id': 2,
          'text': 'Task #1',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 3,
          'text': 'Task #2',
          'start_date': '03-04-2019',
          'duration': 2,
          'order': 20,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 4,
          'text': 'Task #3',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        }

      ],
      'links': [{
          'id': 1,
          'source': 1,
          'target': 2,
          'type': '1'
        },
        {
          'id': 2,
          'source': 2,
          'target': 3,
          'type': '0'
        },
        {
          'id': 3,
          'source': 3,
          'target': 4,
          'type': '0'
        },
        {
          'id': 4,
          'source': 2,
          'target': 5,
          'type': '2'
        }
      ]
    };
    gantt.config.layout = {
      css: 'gantt_container',
      cols: [{

          rows: [{
              height: 80
            },
            {
              view: 'grid',
              scrollX: 'gridScroll',
              scrollable: true,
              scrollY: 'scrollVer'
            },
            {
              view: 'scrollbar',
              id: 'gridScroll',
              group: 'horizontal'
            }
          ]
        },
        {
          resizer: true,
          width: 1
        },
        {
          rows: [{
              html: '<div class=\'custom-content\'>custom content 1</div>',
              css: 'custom-content'
            },

            {
              view: 'timeline',
              scrollX: 'scrollHor',
              scrollY: 'scrollVer'
            }
            // { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },
          ]
        },
        {
          view: 'scrollbar',
          id: 'scrollVer'
        },
        {
          resizer: false,
          width: 1
        }
      ]
    };
    gantt.init('gantt_here');
    gantt.parse(task1);
  </script>

</html>

javascript

dhtmlx

回答 1

Stack Overflow用户

发布于 2020-12-18 19:53:47

您需要添加一个布局单元格，该单元格的列位于时间轴布局单元格的上方。这里有一个简单的想法：

cols:[
  //grid and scrollbar
  {
    rows: [
      cols:[
        //html content layout cells
      ],
      //timeline
    ]
  }
]

默认情况下，HTML单元格的大小与时间轴单元格的大小相同，因为它们将拉伸以适合可用宽度。但是有一个gantt.config.min_column_width参数告诉甘特图最小时间线单元格宽度应该是多少：

https://docs.dhtmlx.com/gantt/api__gantt_min_column_width_config.html

您可以将其更改为1，这样即使宽度较小，时间线单元格也应该与HTML布局单元格的大小相匹配。

下面是一个如何实现它的示例：

http://snippet.dhtmlx.com/5/3f3d94281

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65311874

复制

相似问题

问如何在dhtmlx甘特图中添加自定义div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在dhtmlx甘特图中添加自定义divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在dhtmlx甘特图中添加自定义div
EN