dhtmlxgantt一行展示上下两条甘特图
时间: 2023-09-30 10:03:23 浏览: 110
dhtmlxGantt可以通过使用split mode来实现一行展示上下两条甘特图。在split mode下,dhtmlxGantt会把甘特图分成两个部分,上部分和下部分。你可以在上部分显示一个甘特图,下部分显示另一个甘特图。
下面是一个示例代码:
```javascript
gantt.config.grid_width = 500;
gantt.config.grid_height = 100;
gantt.config.subscales = [
{unit:"day", step:1, date:"%d %M %Y"}
];
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
gantt.config.step = 1;
gantt.config.min_column_width = 50;
gantt.config.layout = {
css: "gantt_container",
rows:[
{
cols: [
{view: "grid", scrollX: "gridScroll", scrollY: "scrollVer"},
{view: "scrollbar", id: "gridScroll", group:"horizontal"}
]
},
{
cols: [
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollHor", group:"horizontal"}
]
},
{view: "scrollbar", id: "scrollVer"}
]
};
gantt.init("gantt_here");
gantt.load("https://dhtmlx.com/docs/products/dhtmlxGantt/data/data.json");
```
在这个示例中,我们使用了dhtmlxGantt的layout配置来定义甘特图的布局。我们创建了一个包含三个行的布局。第一行是一个包含grid和grid scrollbar的列,第二行是一个包含timeline和timeline scrollbar的列,第三行是一个包含vertical scrollbar的列。
这样,我们就可以在上部分显示grid和scrollbar,下部分显示timeline和scrollbar,从而实现一行展示上下两条甘特图的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)