推荐开源项目：Timeline Canvas - 基于HTML5的可交互时间线图表库
Timeline Canvas 是一个基于HTML5的开源库，用于创建交互式的时间线图表。以下是如何使用Timeline Canvas创建一个简单的时间线的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Timeline Canvas Example</title>
<script src="https://cdn.jsdelivr.net/npm/timeline-chart@1.0.2/dist/timeline-chart.min.js"></script>
<style>
#my-timeline-chart {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="my-timeline-chart"></div>
<script>
var chart = new timelineChart.TimelineChart('#my-timeline-chart');
chart.setGroups([
{
id: 'group1',
content: 'Group 1',
nestedGroups: []
}
]);
chart.setItems([
{
id: 'item1',
group: 'group1',
content: 'Item 1',
start: new Date('2023-01-01T08:00:00Z'),
end: new Date('2023-01-01T09:00:00Z'),
type: 'point'
},
{
id: 'item2',
group: 'group1',
content: 'Item 2',
start: new Date('2023-01-01T09:00:00Z'),
end: new Date('2023-01-01T10:00:00Z'),
type: 'range'
}
]);
</script>
</body>
</html>这段代码创建了一个简单的时间线，其中包含了两个事件：Item 1 是一个点事件，Item 2 是一个时间范围。代码中使用了timelineChart.TimelineChart来初始化时间线图表，并通过setGroups和setItems方法添加了分组和项目。
评论已关闭