在 HTML 中创建 Gantt 图表需要使用特定的 JavaScript 库,如 DHTMLX Gantt 或 jQuery Gantt。以下是使用 DHTMLX Gantt 的步骤:
<head>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
</head>
gantt_container
的 div
元素。<body>
<div id="gantt_container" style="width: 100%; height: 100%;"></div>
</body>
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init("gantt_container");
gantt.parse([
{id: 1, text: "Task #1", start_date: "2022-01-01 00:00", duration: 5},
{id: 2, text: "Task #2", start_date: "2022-01-03 00:00", duration: 3, parent: 1},
{id: 3, text: "Task #3", start_date: "2022-01-06 00:00", duration: 4, parent: 1},
{id: 4, text: "Task #4", start_date: "2022-01-10 00:00", duration: 2},
{id: 5, text: "Task #5", start_date: "2022-01-12 00:00", duration: 3, parent: 4},
]);
其中 xml_date
属性用于指定日期格式,parse
方法用于解析任务数据。可以通过配置 gantt.config.columns
属性来自定义列的显示和顺序,通过配置 gantt.templates
属性来自定义任务样式。
以上是在 HTML 中创建 Gantt 图表的基本步骤。需要注意的是,使用不同的 JavaScript 库可能会有不同的 API 和配置方式,需根据具体情况进行调整。