在我的项目中，我使用Chart.js实现了一个条形图。该图表允许用户滚动查看过去两年中前几个月的金额。为了启用x轴平移并实现此功能，我合并了Chart.js缩放插件。然而，我遇到了一个问题，y轴上的默认滚动没有按预期运行。这个问题是由于添加了一个CSS属性，“touch-action: none”，由画布的缩放插件提供。此属性可防止默认的滚动行为。
为了解决这个问题，我尝试将' touch-action '属性更改为' auto'，这将启用默认的滚动行为。但是，这种调整会破坏条形图中x轴上的平移功能。
我在项目中面临一个挑战，我需要区分使用Chart.js实现的条形图中用户在x轴和y轴上的滚动。具体来说，当用户沿x轴沿着时，我希望显示前几个月的数据，利用Chart.js缩放插件提供的平移功能。另一方面，当用户沿y轴沿着时，我打算让默认的滚动行为生效，允许他们浏览其他内容。
我目前正在寻求如何实现一种解决方案的指导，该解决方案可以准确检测用户是沿x轴还是y轴沿着，并随后触发相应的操作，例如显示前几个月或启用默认的y轴滚动行为。如果您对如何实现这种微妙的功能有任何见解或建议，我将不胜感激。
对于条形图的画布，如果应用了缩放插件并启用了pan. touch-action : none，则会自动添加它，以防止默认的滚动行为

display: block;
box-sizing: border-box;
height: 300px;
width: 343px;
touch-action: none;
user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

字符集
在ts文件中chartjs选项

plugins: {
zoom: {
          pan: {
            sensitivity: 6,
            enabled: true,
            mode: 'x',
            speed: 0.2,
            threshold: 8,
          },
        },
}

型

的数据