Chart.js的缩放功能

Question

我有一个图表，我想使用github缩放功能在[这里] [1]找到

我已经编写了下面的代码，该代码没有错误，但是当我尝试在鼠标滚轮上放大和缩小时，它将无法正常工作。

需要更改什么代码，以便可以使用鼠标滚轮放大和缩小？

请参见下面的代码段

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>```

  [1]: https://github.com/chartjs/chartjs-plugin-zoom

Answer 1

检查此示例。这是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中查看此处的工作示例