Chart.js时间轴横向浮动条形图实现时数据不显示无报错求助

问题原因 #

• Chart.js v3 已经废弃了 v2 版本中 yAxes/xAxes 数组形式的轴配置语法，所有轴配置需要统一放在 options.scales 下以键值对形式声明
• 你设置了 indexAxis: 'y'，代表分类标签对应的轴为Y轴，时间范围对应的数值轴为X轴，你之前错误将时间类型配置到了Y轴上

修正后代码 #

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
</head>
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
<script>
const labels = ["a","b"]
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: [
        [moment("2021-11-23T00:24:14Z"),moment("2021-11-23T00:34:03Z")],
        [moment("2021-11-23T00:24:14Z"),moment("2021-11-23T00:26:35Z")]
      ]
    },
  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
      scales: {
        x: {
          type: 'time',
          // 可选配置，指定时间显示单位为分钟，更符合你的数据场景
          time: {
            unit: 'minute'
          }
        }
      },
      indexAxis: 'y',
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Floating Bar Chart'
        }
      }
  }
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
</html>

内容的提问来源于stack exchange，提问作者jberryman