甘特图时刻表js 3
甘特图时刻表js 3
提问于 2022-03-12 23:45:29
Chart.js是一个制作图表的流行库，它可以制作各种图表，但它不能制作甘特图/时间线。我正试图破解chart.js 3，但文档并不好，我感到非常沮丧。如何使用chart.js 3制作甘特图时间线？
回答 1
Stack Overflow用户
发布于 2022-03-12 23:45:29
你这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timeline chart.js 3</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<main>
<canvas id="gantt-chart"></canvas>
<script>
data = [
{id: 2, name: "Season Apples", start_date: "2022-03-07 15:00:00.000", end_date: "2022-03-10 15:00:00.000"},
{id: 1, name: "Cut Apples", start_date: "2022-03-05 15:00:00.000", end_date: "2022-03-07 15:00:00.000"},
{id: 3, name: "Bake Apples", start_date: "2022-03-11 15:00:00.000", end_date: "2022-03-15 15:00:00.000"}
]
// sort objects by start_date
data.sort(function (a, b) {
return new Date(a.start_date) - new Date(b.start_date);
});
// chart js needs labels in separate array
const labels = data.map(x => {
return [x.name];
})
// transform the data from how the backend outputs it to how the chart js needs it
const newData = data.map(x => {
return [x.start_date.split(' ')[0], x.end_date.split(' ')[0]]
});
data = {
labels: labels,
datasets: [{
label: 'Make Apple Recipe',
data: newData,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
barPercentage: 0.3
}]
};
options = {
indexAxis: 'y',
responsive: true,
scales: {
x: {
min: newData[0][0],
type: 'time',
time: {
unit: 'day'
}
},
y: {
beginAtZero: true,
}
}
};
new Chart(document.getElementById('gantt-chart').getContext('2d'), {
type: 'bar', data: data, options: options
});
</script>
</main>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71453458
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号