手机上的Chart Js滚动页面

Question

我们在 VueJs 中有一个应用程序，在主页上一切正常。当我们在移动设备上加载页面时，滚动时几乎没有问题，如果我们触摸图表并尝试向下滚动页面，触摸就像从图表中截获并使滚动变得不可能。因此，为了滚动页面，我们必须从图表外部开始滚动。

我尝试在图表选项中添加以下内容 events: ['mousemove', 'mouseout', 'click',], 认为这样会排除触摸选项，但它也不起作用。

我也试过以下但没有成功。

tooltips: {
    enabled: false
},
 events: [],

有什么建议吗？非常感谢。

Answer 1

几个小时后我找到了解决方案。似乎在图表的 canvas 中有一个 css 属性 touch-action: none; 设置那个 touch-action: unset 解决了我的问题。

<template>
  <canvas class="chart-mobile" ref="canvas"/>
</template>

<style scoped>
  .chart-mobile {
    touch-action: unset !important;
  }
</style>

手机上的Chart Js滚动页面

CharJs scrolling page on mobile

mobile

vue.js

chart.js