移动端Hammer+Chart.js+chartjs-plugin-zoom拖拽缩放功能失效求助

我使用Chart.js搭配chartjs-plugin-zoom和Hammer.js构建图表时，遇到了移动端拖拽平移功能失效的问题：图表在桌面浏览器中运行完全正常，但在移动端设备上，仅捏合缩放可用，拖拽平移毫无响应。

复现步骤 #

• 在移动端设备上打开该图表
• 尝试拖拽以水平平移图表
• 观察到拖拽功能无任何响应

预期行为 #

移动端设备上能像桌面浏览器一样，通过拖拽实现图表的水平平移。

相关代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>
<div class="container">
   <h3>Chart Example</h3>
  <div class="chart">
    <canvas id="cumulativeChart"></canvas>
  </div>
</div>
<script>const ctx = document.getElementById('cumulativeChart');
  const labels = [
  'Jul 13', 'Jul 14', 'Jul 15', 'Jul 16', 'Jul 17', 'Jul 18',
  'Jul 19', 'Jul 20', 'Jul 21', 'Jul 22', 'Jul 23', 'Jul 24',
  'Jul 25', 'Jul 26', 'Jul 27', 'Jul 28', 'Jul 29', 'Jul 30',
  'Jul 31', 'Aug 01', 'Aug 02', 'Aug 03', 'Aug 04', 'Aug 05',
  'Aug 06', 'Aug 07', 'Aug 08', 'Aug 09', 'Aug 10', 'Aug 11',
  ];
  
  const data = {
  labels: labels,
  datasets: [{
      label: 'Cumulative Data',
      borderColor: '#3a96fd',
      borderWidth: 2,
      data: [
          0.13299527, 0.16131551, 0.18795605, 0.20597476, 0.22560615, 0.23797296,
          0.25541133, 0.28006363, 0.30473082, 0.32418763, 0.33880094, 0.35331442,
          0.36290294, 0.38035896, 0.40230393, 0.42181523, 0.43855241, 0.4481249,
          0.4696107, 0.48147319, 0.4958352, 0.52931651, 0.55098815, 0.56771866,
          0.58238203, 0.60083731, 0.61222939, 0.6262777, 0.64303029, 0.65866165,
      ],
      pointRadius: 4,
      pointBackgroundColor: '#3a96fd',
      fill: true
  }]};
  
  const config = {
  type: 'line',
  data: data,
  options: {
      responsive: true,
      scales: {
          y: {
              grid: {
                  color: 'rgba(128,151,177, 0.3)',
                  borderDash: [3, 3],
                  drawTicks: false,
                  borderColor: '#424b5f',
              },
              ticks: {
                  align: "center",
                  padding: 10,
              },
          },
          x: {
              grid: {
                  color: 'rgba(128,151,177, 0.3)',
                  borderDash: [3, 5],
                  drawTicks: false,
                  borderColor: '#424b5f'
              },
              ticks: {
                  align: "center",
                  padding: 10,
              }
          }
      },
      plugins: {
          legend: {
              display: false
          },
          tooltip: {
              usePointStyle: true,
          },
          zoom: {
              zoom: {
                  wheel: {
                      enabled: true,
                  },
                  pinch: {
                      enabled: true
                  },
                  drag: {
                      enabled: true
                  },
                  mode: 'x',
              },
              pan: {
                  enabled: true,
                  mode: 'x',
              },
              limits: {
                  x: {
                      minRange: 3
                  },
              },
          }
      }
  }
  };
  
  const myChart = new Chart(
  ctx,
  config
  );</script>

我已经查阅了Chart.js和chartjs-plugin-zoom的官方文档，但未能找到解决方案。求任何关于如何在移动端启用拖拽平移功能的见解或建议。

内容的提问来源于stack exchange，提问作者Santiago Santos isma