Chart.js与Moment.js时间格式解析问题:新版本库无法生成时间轴条形图
基于时分秒格式的横向浮动条形图Chart.js适配问题
我需要制作基于HH:mm:ss时间格式的横向浮动条形图,参考旧版本示例代码后,改用Chart.js 3.7.1、Moment.js 2.29.2及对应适配器后无法正常工作。以下是当前代码,期望实现每行对应一个分类、条形展示该分类时间区间、X轴为00:00:00到23:59:59时分秒轴的效果,恳请技术帮助。
<!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>
期望实现的效果:每行对应一个分类(如"Parado"、"A pé"),每个分类的横向条形展示对应的时间区间(从x值的时间到y值的时间),X轴为时分秒格式的时间轴,范围覆盖00:00:00至23:59:59。
内容的提问来源于stack exchange,提问作者Rod
相关产品推荐
相关产品推荐

