我需要使用时间格式制作条形图，我开始了这个one作为基础，但库版本很旧，我需要使用新版本，但它不起作用，有人可以帮助我吗？
值必须以小时:分钟:秒时间范围为单位。
这是到目前为止的代码 这是到目前为止的代码 这是到目前为止的代码 这是到目前为止的代码 这是到目前为止的代码
enter code here
<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
<canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>
</body>
</html>
<script>
var temp = '{ "EmpLst": {"0" : "Parado","1" : "A pé"},"dateData" : [{"x": "07:00:00", "y": "09:10:00"},{"x": "08:00:00", "y": "08:10:00"}]}';
var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData);
var dataSets = [];
for (var i1 = 0; i1 < dateData.length; i1++) {
dataSets.push({
label: 'data',
data: [
[moment(dateData[i1].x, 'h:mm:ss'), moment(dateData[i1].y, 'h:mm:ss')],
[moment(dateData[i1 + 1].x, 'h:mm:ss'), moment(dateData[i1 + 1].y, 'h:mm:ss')]
],
backgroundColor: 'lightblue'
});
i1++
}
console.log(Date.parse(dataSets[0].data[0][0]._d))
var data = {
type: 'bar',
data: {
labels: empNames,
datasets: dataSets
},
options: {
indexAxis: 'y',
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
},
scales: {
x: {
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm:ss'
},
tooltipFormat: 'HH:mm:ss',
ticks:{
min: moment('00:00:00', 'h:mm:ss'),
max: moment('23:59:59', 'h:mm:ss'),
},
}
}
}
}
};
var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);
</script>
这就是我想要的
最佳答案
当使用time axis时，无需自己解析日期。只需定义 time.parser 并让 Chart.js 完成它的工作。根据3.x Migration Guide ，还需要更改其他一些内容才能使其与 Chart.js v3 一起使用。
请查看下面修改后的可运行代码，看看它是如何工作的。
<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
<canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>
</body>
</html>
<script>
var temp = '{ "EmpLst": {"0" : "Parado","1" : "A pé"},"dateData" : [{"x": "07:00:00", "y": "09:10:00"},{"x": "08:00:00", "y": "08:10:00"}]}';
var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData).map(o => [o.x, o.y]);
var dataSets = [{
label: 'data',
data: dateData,
backgroundColor: 'lightblue'
}];
var data = {
type: 'bar',
data: {
labels: empNames,
datasets: dataSets
},
options: {
indexAxis: 'y',
responsive: true,
plugins: {
title: {
display: true,
text: 'Horizontal Floating Bars'
},
tooltip: {
callbacks: {
label: ctx => {
const v = ctx.dataset.data[ctx.dataIndex];
return v[0] + ' - ' + v[1];
}
}
}
},
scales: {
x: {
type: 'time',
time: {
parser: 'h:mm:ss',
unit: 'hour',
displayFormats: {
hour: 'HH:mm:ss'
}
},
min: '00:00:00',
max: '24:00:00'
}
}
}
};
var chart = new Chart('deviceOnChart', data);
</script>关于javascript - Chartjs : Moment and ChartJS Time Format Parsing，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73576685/