javascript - Chartjs v7.0 带插件缩放，使用 "drag"模式时效果奇怪。

Question

我尝试使用来自 ChartJS 的 Zoom 插件和 7 版 API。我希望能够在选择拖动区域完成后进行缩放。缩放后，我希望能够移动图表以达到其他值。

我尝试过带有缩放插件的 v4、v5、v6，但结果总是相同的:当我尝试选择拖动区域时，所有图表都会移动，它移动得非常快，并且开始很难使用它。

可能是我没有正确使用该插件，但我尝试了其他一些配置，结果仍然相同..

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
responsive: false,
  type: 'line',
  data: {
    labels: [0, 1, 3, 4, 5, 6],
    datasets: [{
      label: 'Test1',
      data: [12, 19, 3, 5, 2, 3]
    },{
      label: 'Test2',
      data: [14, 16, 4, 3, 1, 2]
    }
    ]
  },
   options: {
   pan: {
		enabled: true,
		mode: 'x',
	},
    zoom: {
     drag: true,
     enabled: true,
     mode: 'xy'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.5.0/chartjs-plugin-zoom.min.js"></script>


<canvas id="myChart" height=200/>

Answer 1

我在我的项目中解决了这个问题:

首先更改:zoom:{ 灵敏度:0.5， 拖动:真实， 启用:真， 模式:'xy' }

第二个更改的插件如本文所示: pan on chart.js also zoom on line charts

我的插件版本是5。