Highcharts 是一个用于构建交互式图表的 JavaScript 库,非常适合用来创建包括甘特图在内的多种图表。甘特图是一种常用于项目管理的工具,它可以展示项目的进度和时间线。下面是一个使用 Highcharts 创建甘特图的基本例子。
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Gantt Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/gantt.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px;"></div>
<script>
Highcharts.ganttChart('container', {
title: {
text: '项目进度甘特图'
},
yAxis: {
uniqueNames: true
},
navigator: {
enabled: true
},
series: [{
name: '项目任务',
data: [{
name: '任务 1',
id: 'task1',
start: Date.UTC(2024, 1, 1),
end: Date.UTC(2024, 2, 1)
}, {
name: '任务 2',
id: 'task2',
start: Date.UTC(2024, 2, 2),
end: Date.UTC(2024, 3, 2),
dependency: 'task1'
}]
}]
});
</script>
</body>
</html>