Chart.js 的缩放功能

Question

我有一个图表，我想在此处使用 github 缩放功能。

我已经编写了下面的代码，该代码可以无错误地运行，但是当我尝试在鼠标滚轮上放大和缩小时，它不起作用。

需要更改哪些代码才能使用鼠标滚轮放大和缩小？

看下面的片段

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/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.3"></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>

Answer 1

请参阅此插件及其示例。

默认情况下，您可以绘制视图框或使用鼠标滚轮进行放大或缩小。双击使图表适合画布。

Answer 2

检查这个例子。这是 JavaScript

var timeFormat = "MM/DD/YYYY HH:mm";
function randomScalingFactor() {
  return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
}
function randomColorFactor() {
  return Math.round(Math.random() * 255);
}
function randomColor(opacity) {
  return (
    "rgba(" +
    randomColorFactor() +
    "," +
    randomColorFactor() +
    "," +
    randomColorFactor() +
    "," +
    (opacity || ".3") +
    ")"
  );
}
function newDate(days) {
  return moment()
    .add(days, "d")
    .toDate();
}
function newDateString(days) {
  return moment()
    .add(days, "d")
    .format(timeFormat);
}
function newTimestamp(days) {
  return moment()
    .add(days, "d")
    .unix();
}
function resetZoom() {
  window.myLine.resetZoom();
}
var arr = Array.from({length: 3000}, () => Math.floor(Math.random() * 40));
var config = {
  type: "line",
  data: {
    labels: _.range(0,3000,1),
    datasets: [
      {
        label: "My dataset",
        data: arr,
        fill: false,
        borderDash: [5, 5]
      },
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js HUGE data set"
    },
    scales: { 
      xAxes: [
        {
          scaleLabel: {
            display: true,
            labelString: "x"
          },
          ticks: {
            maxRotation: 0,
            autoSkip:true,
          }
        }
      ],
      yAxes: [
        {
          scaleLabel: {
            display: true,
            labelString: "value"
          }
        }
      ]
    },
    pan: {
      enabled: true,
      mode: "x",
      speed: 10,
      threshold: 10
    },
    zoom: {
      enabled: true,
      drag: false,
      mode: "xy",
     speed: 0.01,
     // sensitivity: 0.1,
      limits: {
        max: 10,
        min: 0.5
      }
    }
  }
};
config.data.datasets.forEach(function(dataset) {
  dataset.borderColor = randomColor(0.4);
  dataset.backgroundColor = randomColor(0.5);
  dataset.pointBorderColor = randomColor(0.7);
  dataset.pointBackgroundColor = randomColor(0.5);
  dataset.pointBorderWidth = 1;
});
window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myLine = new Chart(ctx, config);
};

检查codepen中的工作示例

在这里检查另一个例子

JavaScript 如下

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        // Container for pan options
        pan: {
            // Boolean to enable panning
            enabled: true,

            // Panning directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow panning in the y direction
            mode: 'x',

            speed: 1
        },

        // Container for zoom options
        zoom: {
            // Boolean to enable zooming
            enabled: true,                      
            // Zooming directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'x',
        }
    }
});

$('#reset_zoom').click(function(){
    myChart.resetZoom();
    console.log(myChart);
});

$('#disable_zoom').click(function(){
    myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);
});

$('#enable_zoom').click(function(){
    myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);
});

检查jsfiddle中的工作示例