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

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

首先更改：zoom：{ 灵敏度：0.5，拖：真的，启用：true，模式：＆＃39; xy＆＃39; }

第二次更改了插件，如下文所示： pan on chart.js also zoom on line charts

我的插件版本为5。

Chartjs v7.0带插件缩放，使用“拖动”模式时效果奇怪。

1 个答案: