javascript - Chart.js的缩放功能

我有一个图表，我想使用github缩放功能查找here。
我已经编写了下面的代码，该代码运行无错误，但是当我尝试在鼠标滚轮上放大和缩小时，它将无法正常工作。
需要更改什么代码，以便可以使用鼠标滚轮放大和缩小？
请参见下面的代码段

var ctx = document.getElementById('doughnut-chart').getContext('2d');

new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Day One", "Day Two", "Day Three", "Day Four", "Day Five"],
      datasets: [
        {
          label: "Agi",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#6bcd3e"],
          data: ["100", "200", "300", "400", "500" ]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: "Title"
      }
    },
    pan: {
        enabled: true,
        mode: 'xy'
    },
    zoom: {
        enabled: true,
        mode: 'xy',
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<canvas id="doughnut-chart" width="800" height="450"></canvas>

编辑
如评论中所建议，我添加了一个插件类别，并且代码现在如下所示-但缩放功能仍然无法正常工作。

   <script type="text/javascript">
   var ctx = document.getElementById('doughnut-chart').getContext('2d');

   new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Day One", "Day Two", "Day Three", "Day Four", "Day Five"],
      datasets: [
        {
          label: "Test",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#6bcd3e"],
          data:  ["100", "200", "300", "400", "500" ] ,
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: "Test"
      },
      plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x',
                    speed: 10,
                    threshold: 10
                },
                zoom: {
                    enabled: true,
                    mode: 'y'
                }
             }
          }
       }
    });
  </script>

最佳答案

请查看此plugin及其example。
默认情况下，您可以绘制 View 框或使用鼠标滚轮放大或缩小。双击以使图表适合 Canvas 。