Chart.js 中带有时间 y 轴的水平浮动条答案

【问题标题】：Horizontal floating bars with a time y-axis in Chart.jsChart.js 中带有时间 y 轴的水平浮动条
【发布时间】：2021-11-25 16:56:51
【问题描述】：

我正在尝试调整https://www.chartjs.org/docs/latest/samples/bar/floating.html 以创建一种时间线图表，其中横轴（范围数据）是时间戳。不幸的是，我似乎无法显示数据，也没有看到任何错误消息等。

<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","c","d","fff","g","h"]
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")]]
      // This works fine (without 'yAxes' below):
      //data: labels.map(() => {
        //return [Math.random(), Math.random()];
      //}),
      //backgroundColor: Utils.CHART_COLORS.red,
    },

  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
      yAxes: [{
        type: 'time',
      }],
      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>

编辑：JSFiddle：https://jsfiddle.net/r5ypuvks/

【问题讨论】：

标签： chart.js momentjs

【解决方案1】：

嗯，看来我的问题是：

没有为 chart.js 3 使用正确的轴格式
需要自己缩放图表
需要将水平轴称为x

<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","c","d","fff","g","h"]
const labels = ["a","b"]
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: [[("2021-11-23T00:24:14Z"),("2021-11-23T00:34:03Z")],
          [("2021-11-23T00:25:14Z"),("2021-11-23T00:26:35Z")]]
      // This works fine (without 'yAxes' below):
      //data: labels.map(() => {
        //return [Math.random(), Math.random()];
      //}),
      //backgroundColor: Utils.CHART_COLORS.red,
    },

  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
      scales: {
          x: {
              min: ("2021-11-23T00:20:14Z"), 
              max: ("2021-11-23T00:44:14Z") ,
            type: 'time',
          },
      },
      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>

【讨论】：