试图用堆叠的水平条形图来显示时间,我做了一个小提琴,可以得到至少一个时间跨度的图表,但我似乎不能得到第二个堆叠旁边?理想的情况下,我是有蓝色的堆叠旁边的橙子。
不知道我在这里做错了什么,如果它只是时间格式,我错了或其他东西。
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
</body>
const options = {
type: 'bar',
data: {
labels: [
"Sun 19th Feb 2023",
"Mon 20th Feb 2023",
"Tue 21st Feb 2023",
"Wed 22nd Feb 2023",
"Thu 23rd Feb 2023",
"Fri 24th Feb 2023",
"Sat 25th Feb 2023"
],
datasets: [{
label: '1st Data',
data: [["08:25", "08:39"]],
backgroundColor: 'orange',
},
{
label: '2nd Data',
data: [["08:39", "08:59"]],
backgroundColor: 'blue',
}
]
},
options: {
indexAxis: 'y',
scales: {
y: {
stacked: true,
},
x: {
parsing: false,
stacked: true,
position: 'top',
type: 'time',
time: {
unit: 'hour',
},
min: "07:00",
max: "19:00",
},
},
},
plugins: {
legend: {
display: false
},
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
1条答案
按热度按时间x0fgdtte1#
为了回答我自己的问题,我需要关闭x轴的堆叠