Chart.JS - 在时间图中设置固定的 X 和 Y 轴值？

Question

我目前正在尝试使用 Chart.JS 创建折线图，显示 LED 在 24 小时内的亮度百分比 (0-100%)。

我正在尝试将图表配置为设置 X 和 Y 轴刻度。

我需要 X 轴每小时显示一次 (0,1,2,3... 21,22,23,24)，Y 轴显示最大为 100 的值，增加 10 (0, 10,20... 90,100）。我不确定如何让它工作。到目前为止，我已经尝试了“unitStepSize：1”和“min：00:00”+“max：24:00”，如下所示，但这些都没有按我希望的方式工作。我怎样才能让这个图表正确显示？这是我的代码：

var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);

var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'White',
         data: data,
         borderWidth: 1
      }]
   },
   options: {
      scales: {
         xAxes: [{
            type: 'time',
            time: {
               format: "H:mm",
           unit: 'hour',
           unitStepSize: '1',
           tooltipFormat: "H:mm A",
               displayFormats: {
                  hour: 'H',
                  min: '00:00',
                  max: '24:00',
               }
            }
         }]
      },
   }
});```

Answer 1

在 options / scale 下尝试如下操作：--> 查看 yAxes

 options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 100
                            }


                           }]


 ...
    }