Javascript 如何在第二列内的dhtmlx甘特图中添加自定义div

Javascript 如何在第二列内的dhtmlx甘特图中添加自定义div,javascript,dhtmlx,Javascript,Dhtmlx,我使用的是DHTMLX甘特图,我必须在日期上方的第二列(图表部分)中再创建一行,并通过匹配日期将该行划分为7列。目前,我已经在独立行中创建了自定义div。我尝试在第二个column对象中使用添加行,但不起作用。下面是代码 html .甘特图\自定义\按钮{ 背景色:rgb(206206206); 位置:绝对位置; 右:-10px; 顶部:5px; 宽度:20px; 高度:26px; 边界半径:0; } 变量task1={ “数据”:[{ “id”:1, “文本”:“项目1”, “开工日期”:2

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

html

.甘特图\自定义\按钮{
背景色:rgb(206206206);
位置:绝对位置;
右:-10px;
顶部:5px;
宽度:20px;
高度:26px;
边界半径:0;
}
变量task1={
“数据”:[{
“id”:1,
“文本”:“项目1”,
“开工日期”:2019年4月1日,
“持续时间”:2,
“顺序”:10,
“进度”:0.4,
“开放”:正确
},
{
“id”:2,
“文本”:“任务1”,
“开工日期”:2019年4月2日,
“持续时间”:1,
“顺序”:10,
“进度”:0.6,
“父”:1
},
{
"id":3,,
“文本”:“任务2”,
“开工日期”:2019年4月3日,
“持续时间”:2,
"命令":20,,
“进度”:0.6,
“父”:1
},
{
“id”:4,
“文本”:“任务3”,
“开工日期”:2019年4月2日,
“持续时间”:1,
“顺序”:10,
“进度”:0.6,
“父”:1
}
],
“链接”:[{
“id”:1,
“来源”:1,
"目标":2,,
“类型”:“1”
},
{
“id”:2,
"来源":2,,
"目标":3,,
“类型”:“0”
},
{
"id":3,,
"来源":3,,
“目标”:4,
“类型”:“0”
},
{
“id”:4,
"来源":2,,
"目标":5,,
“类型”:“2”
}
]
};
甘特图.config.layout={
css:“甘特图容器”,
科尔斯:[{
行:[{
身高:80
},
{
视图:“网格”,
scrollX:'gridScroll',
可滚动:对,
scrollY:“scrollVer”
},
{
视图:“滚动条”,
id:'gridScroll',
组:'水平'
}
]
},
{
resizer:是的,
宽度:1
},
{
行:[{
html:“自定义内容1”,
css:“自定义内容”
},
{
查看:“时间线”,
scrollX:“scrollHor”,
scrollY:“scrollVer”
}
//{视图:'scrollbar',id:'scrollHor',组:'horizontal'},
]
},
{
视图:“滚动条”,
id:'滚动器'
},
{
调整器:错误,
宽度:1
}
]
};
init('gantt_here');
甘特图解析(task1);

您需要添加一个布局单元,其中列位于时间线布局单元上方。这里有一个简单的想法:

cols:[
  //grid and scrollbar
  {
    rows: [
      cols:[
        //html content layout cells
      ],
      //timeline
    ]
  }
]
默认情况下,HTML单元格的大小与时间线单元格的大小相同,因为它们会拉伸以适应可用的宽度。但是有一个参数
gantt.config.min\u column\u width
告诉甘特图最小时间线单元格宽度应该是多少:

您可以将其更改为
1
,那么时间线单元格应该与HTML布局单元格的大小相匹配,即使宽度很小

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


您需要添加一个布局单元,其中列位于时间线布局单元上方。这里有一个简单的想法:

cols:[
  //grid and scrollbar
  {
    rows: [
      cols:[
        //html content layout cells
      ],
      //timeline
    ]
  }
]
默认情况下,HTML单元格的大小与时间线单元格的大小相同,因为它们会拉伸以适应可用的宽度。但是有一个参数
gantt.config.min\u column\u width
告诉甘特图最小时间线单元格宽度应该是多少:

您可以将其更改为
1
,那么时间线单元格应该与HTML布局单元格的大小相匹配,即使宽度很小

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