使用Chartjs zoom插件后，默认行为滚动不会发生

rqdpfwrv 于 2024-01-07 发布在 Chart.js

关注(0)|答案(1)|浏览(236)

我在我的项目中使用条形图。
有一个滚动条形图的任务，这样用户就可以看到前几个月的余额。要做到这一点，我使用chartjs缩放插件。
但是在实现之后，默认的垂直滚动行为不起作用。也就是说，当我们点击滚动离开条形图时，我们看不到下面的内容或页面的其他部分。
下面是我在项目中使用的代码。

plugins: {
        legend: {
          display: false,
        },
        title: {
          display: false,
        },
        tooltip: {
          enabled: false,
        },
        zoom: {
          pan: {
            enabled: true,
            mode: 'x',
          },
          }
        },

字符串
我只能从左到右或从右到左滚动条形图。但是，由于默认的垂直滚动没有发生，我看不到条形图以外的以下内容。

chart.js

来源：https://stackoverflow.com/questions/77487604/default-behaviour-scroll-not-happening-after-using-chartjs-zoom-plugin

1条答案

按热度按时间

raogr8fs1#

这是一个有点难以理解你到底是什么意思，但如果我理解你“默认的垂直滚动行为不发生”，因为缩放功能捕获滚动事件。
要解决此问题，请在缩放选项中添加modifierKey，以便仅在按住特定键时才激活滚动功能。
例如，因此图表滚动仅在按下Shift键时起作用。

zoom: {
  pan: {
    enabled: true,
    mode: 'x',
  },
  zoom: {
    pinch: {
       enabled: true
    },
    wheel: {
      enabled: true,
      modifierKey: 'shift'
    },
    mode: 'xy',
  }
}

字符串
选项为'ctrl'|'alt'|'shift'|'meta'
参见https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html

编辑-要使用移动的捏合等，您只需启用该设置。默认情况下，通过捏合启用缩放是禁用的。请参见上面的代码和https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#pinch-options

同时确保你在使用chartjs-plugin-zoom的页面中加载了hammerjs，例如。
<script src="https://cdn.jsdelivr.net/npm/ [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) "></script>个

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

使用Chartjs zoom插件后，默认行为滚动不会发生

1条答案

相关问题

热门标签

最新问答