日期和时间图表 With Chart js

Question

如何创建一个 table 以使用 Chart js 显示日期和时间？

我可以将它与整数时间一起使用（60、50 等）但是当我想在 "12:00" 或 "08:00" 中使用字符串时间时=17=], 没用...

这是我的代码：

<canvas id="myChart"></canvas>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

           <script>

                let examChart = document.getElementById("myChart");
                const dates=[
                    '2022-11-06',
                    '2022-11-07',
                    '2022-11-08',
                ];
  

                let examLineChart = new Chart(myChart, {
                    type: "line",
                    data: {
                        labels:dates,
                        datasets: [{
                            data: [{
                                x: '2022-11-06',
                                y: '02:00'
                            },{
                                x: '2022-11-07',
                                y: '08:00'
                            },{
                                x: '2022-11-08',
                                y: '06:00'
                            },
                            ]
                        }],
                    },
                    options: {
                        label: "placeholder",
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    displayFormats: {
                                        quarter: 'MMM YYYY'
                                    }
                                }
                            },
                            y: [{
                                type: 'time',
                                time: {
                                    parser: 'HH:mm',
                                    unit: 'hour',
                                    stepSize: 1,
                                    displayFormats: {
                                        hour: 'HH:mm'
                                    },
                                    tooltipFormat: 'HH:mm'
                                },
                                ticks: {
                                    min: '00:00',
                                    max: '08:00'
                                }
                            }]
                        },
                    }
                });
            </script>

Answer 1

您的代码几乎没问题，但是我注意到了一些问题。

您还必须包含 chartjs-adapter-moment 库。
您可以使用 'scatter' 图表并定义 showLine: true.

'line'

labels 在提供 data 作为点数组（具有 x 和 y 属性搜索的对象）时必须省略。
scales.x 必须定义为对象而不是数组。
等等

请查看您的可运行、修改后的代码，看看它是如何工作的。

new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: '2022-11-06', y: '02:00' }, 
        { x: '2022-11-07', y: '08:00' }, 
        { x: '2022-11-08', y: '06:00' }
      ],
      showLine: true,
      lineTension: 0.3,
      borderColor: 'rgb(100, 100, 255)'
    }],
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM yyyy'
          }
        }
      },
      y: {
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'HH:mm'
          },
          tooltipFormat: 'HH:mm'
        },
        ticks: {
          min: '00:00',
          max: '08:00'
        }
      }
    }
  }
});

<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>
<canvas id="myChart"></canvas>

日期和时间图表 With Chart js

date and time chart With Chart js

chart.js