Chartjs v7.0具有插件缩放功能，使用“拖动”模式时会产生奇怪的效果。

Question

我尝试在api的版本7中使用chartjs中的插件缩放。我希望能够在拖拽区域的选择完成时进行缩放。缩放后，我希望能够移动图表以达到其他值。

我已经尝试了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

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

第一次更改:缩放：{敏感度:0.5，拖动:真，启用:真，模式：'xy‘}

本文中的第二个更改插件：pan on chart.js also zoom on line charts

我的插件版本是5。