首先，您應該在圖表配置參數中定義垂直軸的值data.yLabels。

然后將 定義yAxis為類別笛卡爾軸。

此外，您需要將 定義xAxis為時間笛卡爾軸。還要確保通過包含和屬性的對象data將數據集定義為單個點。xy

請注意，Chart.js 在內部使用Moment.js來實現時間軸的功能。因此，您應該使用在單個文件中包含 Moment.js 的 Chart.js捆綁版本。

請查看下面的可運行代碼示例。

new Chart(document.getElementById('myChart'), {

  type: 'line',  

  data: {

    yLabels: ['Suspended',  'Faulty', 'At-risk', 'Unknown', 'Healthy'],

    datasets: [{

      label: 'My Dataset',

      data: [

        { x: '20:28', y: 'Healthy' },

        { x: '20:47', y: 'Healthy' }

      ],

      backgroundColor: 'lightblue',

      borderColor: 'blue',

      fill: false

    }]

  },

  options: {

    responsive: true,

    title: {

      display: false

    },

    legend: {

      display: false

    },

    scales: {

      yAxes: [{

        type: 'category',

        ticks: {

          reverse: true,

            },

        gridLines: {

          zeroLineColor: 'rgba(0, 0, 0, 0.1)'

        }

      }],

      xAxes: [{

        type: 'time',

        time: {

          parser: 'HH:mm',

          unit: 'minute',

          stepSize: 5,

          tooltipFormat: 'HH:mm'

        },

        ticks: {

          min: '20:25',

          max: '20:50',

          padding: 10

            },

        gridLines: {

          display: false

        }

      }],

    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

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