You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 07:51:34