Chart.js 如何添加滚动效果以适合所有值

Question

我有一个应该显示 24 小时预测参数数据的图表，问题是 X 轴中的日期被压缩得太紧。我想添加滚动效果并在滚动之前只显示大约 10 个值。

日期也将图表向右推，使其不在 div 的中心。

我尝试添加“overflow-x: scroll”并更改图形容器的宽度。 试图为画布本身增加宽度，但似乎没有任何效果。

$(document).ready(function() {
      // Chart.js configuration
      var ctx = document.getElementById('energyGraph').getContext('2d');
      var chart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: [],
          datasets: [{
            label: 'Voltage',
            position: 'right',
            data: [],
            borderColor: '#1D67B1',
            backgroundColor: '#fff',
            borderWidth: 2,
            pointRadius: 0,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: 20,
              stepSize: 1
            }
          }

        }
      });

      // Function to update energy data
      function updateEnergyData() {
        $.get("/dashboard/get_voltage/", function(data) {
          console.log(data); // Debug statement
          var rows = data;
          var lastTenRows = rows.slice(-10);
          var voltageData = lastTenRows.map(row => parseFloat(row.Voltage));
          var dateLabels = lastTenRows.map(row => new Date(row.Date).toLocaleTimeString('en-US', {
            hour12: false
          }));
          chart.data.labels = dateLabels.reverse();
          chart.data.datasets[0].data = voltageData.reverse();
          chart.data.datasets[0].pointStyle = 'circle';
          chart.data.datasets[0].pointRadius = 3;
          chart.data.datasets[0].pointBackgroundColor = 'blue';
          chart.options.plugins.legend.align = 'end';
          chart.update();
        });
      }

.prediction {
  background-color: #fff;
  width: 73%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.predicted-container {
  width: 98%;
  height: 100%;
}

.predicted-graph-container {
  height: 95%;
  width: 100%;
}

<div class="prediction">
  <div class="predicted-container">
    <p>Predicted Energy Production</p>
    <div class="predicted-graph-container">
      <canvas id="predictedGraph"></canvas>
    </div>
  </div>