如何使 Chart.js 散点图 x 轴图表恰好在最小/最大数据集值处开始和结束

Question

我有一个用 node-red 创建的 chart.js 散点图模板，用于显示 10 个样本的实时滑动窗口图表。下面是随机生成数据的代码，其中x轴是时间戳。

<canvas id="line-chart3" width="800" height="450"></canvas>
<script>
  
new Chart(document.getElementById("line-chart3"), {
  type: 'scatter',
  data: {
    
    datasets: [{label:"ds1",data:[{x:1677246631553,y:31},{x:1677246631840,y:17},{x:1677246632077,y:31},{x:1677246632329,y:42},{x:1677246632552,y:38},{x:1677246632792,y:7},{x:1677246633017,y:13},{x:1677246633237,y:17},{x:1677246633472,y:35},{x:1677246633705,y:4}],backgroundColor:"#009900",borderColor:"#009900",steppedLine:false,fill:false,borderWidth:1}] 
      
  },
  options: {
    animation: false,
    scales: {
      x: {
        offset: false,
        ticks: {
          major: {
            enabled: false,
          },

        },
      }
    },

     
    
    title: { 
      display: true,
      text: 'Teste de grafico',
      
    }
  }
});
</script>

但是图表显示如下图：

我希望使 x 轴恰好在

{x:1677246631553,y:31}

处开始并恰好在

{x:1677246633472,y:35}

（数据数组的最小值和最大值）处结束，并且不在网格主要刻度处。

我使用从 node-red msg.payload 生成的动态数据，因此不可能将最小值和最大值硬编码到 x 轴。

我试过偏移量、禁用主要刻度和各种其他选项。它们似乎都不起作用。

在此先感谢您的帮助

珍