Chart.js缩放限制失效：仍可无限滚动问题排查

安全阿岳

2026-6-19

问题

我正在开发一个大型项目，制作了最小可复现示例，按照Chart.js zoom插件文档说明将缩放限制设置为'original'，但仍能无限滚动。尝试设置自定义限制及针对各轴的特定限制也无效果，请问缩放限制为何失效？如何阻止无限缩放？

最小可复现代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Zoom & Pan Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <canvas id="chartCanvas"></canvas>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
</body>
</html>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2c3e50;
}

.container {
  width: 80%;
  max-width: 800px;
}

canvas {
  background-color: #34495e;
  border-radius: 8px;
}

JS

document.addEventListener('DOMContentLoaded', function() {
  const ctx = document.getElementById('chartCanvas').getContext('2d');

  const data = {
    labels: Array.from({
      length: 50
    }, (_, i) => `Label ${i + 1}`),
    datasets: [{
        label: 'CPU Usage (%)',
        data: Array.from({
          length: 50
        }, () => Math.random() * 100),
        borderColor: 'rgba(255, 165, 0, 1)',
        backgroundColor: 'rgba(255, 165, 0, 0.2)',
        fill: false,
        yAxisID: 'y-axis-cpu',
      },
      {
        label: 'Memory Usage (MB)',
        data: Array.from({
          length: 50
        }, () => Math.random() * 500),
        borderColor: 'rgba(25, 153, 255, 1.0)',
        backgroundColor: 'rgba(25, 153, 255, 0.2)',
        fill: false,
        yAxisID: 'y-axis-memory',
      }
    ]
  };

  const options = {
    responsive: true,
    scales: {
      x: {
        type: 'category',
        title: {
          display: true,
          text: 'Time',
          color: '#ffffff'
        },
        ticks: {
          color: '#ffffff',
        },
        grid: {
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      'y-axis-cpu': {
        type: 'linear',
        position: 'left',
        beginAtZero: true,
        max: 100,
        title: {
          display: true,
          text: 'CPU Usage (%)',
          color: '#ffffff'
        },
        ticks: {
          color: '#ffffff',
        },
        grid: {
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      'y-axis-memory': {
        type: 'linear',
        position: 'right',
        beginAtZero: true,
        max: 500,
        title: {
          display: true,
          text: 'Memory Usage (MB)',
          color: '#ffffff'
        },
        ticks: {
          color: '#ffffff',
        },
        grid: {
          color: 'rgba(255, 255, 255, 0.2)',
        }
      }
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy',
        },
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true,
          },
          mode: 'xy',
          limits: {
            x: {
              min: 'original',
              max: 'original'
            },
            y: {
              min: 'original',
              max: 'original'
            }
          }
        }
      }
    }
  };

  const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
  });
});

回答

问题根源

分类轴不支持'original'快捷值：你使用的是category类型的x轴，zoom插件的'original'限制值仅对线性轴生效，对分类轴无效。
自定义y轴限制配置错误：你用通用的y键配置限制，但你的y轴是自定义ID（y-axis-cpu、y-axis-memory），插件无法识别这个通用键，导致限制不生效。
平移未设置限制：你只配置了缩放的限制，但平移的限制是独立的，未设置的话依然可以无限滚动。

修复方案

针对每个轴的类型和ID单独配置缩放、平移的限制：

1. 修改缩放限制配置

将plugins.zoom.zoom.limits改为：

limits: {
  // 分类x轴用索引范围限制（0到49对应50个标签）
  x: {
    min: 0,
    max: 49,
    minRange: 1 // 可选，限制最小缩放范围，防止缩得太小
  },
  // 自定义y轴用轴ID作为键
  'y-axis-cpu': {
    min: 0,
    max: 100,
    minRange: 10
  },
  'y-axis-memory': {
    min: 0,
    max: 500,
    minRange: 50
  }
}

2. 添加平移限制配置

在plugins.zoom.pan里添加limits：

pan: {
  enabled: true,
  mode: 'xy',
  limits: {
    x: {
      min: 0,
      max: 49
    },
    'y-axis-cpu': {
      min: 0,
      max: 100
    },
    'y-axis-memory': {
      min: 0,
      max: 500
    }
  }
},

完整修复后的JS代码

document.addEventListener('DOMContentLoaded', function() {
  const ctx = document.getElementById('chartCanvas').getContext('2d');

  const data = {
    labels: Array.from({
      length: 50
    }, (_, i) => `Label ${i + 1}`),
    datasets: [{
        label: 'CPU Usage (%)',
        data: Array.from({
          length: 50
        }, () => Math.random() * 100),
        borderColor: 'rgba(255, 165, 0, 1)',
        backgroundColor: 'rgba(255, 165, 0, 0.2)',
        fill: false,
        yAxisID: 'y-axis-cpu',
      },
      {
        label: 'Memory Usage (MB)',
        data: Array.from({
          length: 50
        }, () => Math.random() * 500),
        borderColor: 'rgba(25, 153, 255, 1.0)',
        backgroundColor: 'rgba(25, 153, 255, 0.2)',
        fill: false,
        yAxisID: 'y-axis-memory',
      }
    ]
  };

  const options = {
    responsive: true,
    scales: {
      x: {
        type: 'category',
        title: {
          display: true,
          text: 'Time',
          color: '#ffffff'
        },
        ticks: {
          color: '#ffffff',
        },
        grid: {
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      'y-axis-cpu': {
        type: 'linear',
        position: 'left',
        beginAtZero: true,
        max: 100,
        title: {
          display: true,
          text: 'CPU Usage (%)',
          color: '#ffffff'
        },
        ticks: {
          color: '#ffffff',
        },
        grid: {
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      'y-axis-memory': {
        type: 'linear',
        position: 'right',
        beginAtZero: true,
        max: 500,
        title: {
          display: true,
          text: 'Memory Usage (MB)',
          color: '#ffffff'
        },
        ticks: {
          color: '#ffffff',
        },
        grid: {
          color: 'rgba(255, 255, 255, 0.2)',
        }
      }
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy',
          limits: {
            x: {
              min: 0,
              max: 49
            },
            'y-axis-cpu': {
              min: 0,
              max: 100
            },
            'y-axis-memory': {
              min: 0,
              max: 500
            }
          }
        },
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true,
          },
          mode: 'xy',
          limits: {
            x: {
              min: 0,
              max: 49,
              minRange: 1
            },
            'y-axis-cpu': {
              min: 0,
              max: 100,
              minRange: 10
            },
            'y-axis-memory': {
              min: 0,
              max: 500,
              minRange: 50
            }
          }
        }
      }
    }
  };

  const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
  });
});

关键说明

分类轴的限制必须用索引值，因为插件无法通过标签文本或'original'识别分类轴的原始范围。
自定义轴的限制必须使用轴的ID作为键，不能用通用的x或y，否则插件找不到对应的轴。
缩放和平移的限制是分开配置的，两者都设置才能彻底阻止无限滚动和过度缩放。

内容的提问来源于stack exchange，提问作者Zipity

Chart.js缩放限制失效：仍可无限滚动问题排查

最小可复现代码 #

HTML

CSS

JS

问题根源 #

修复方案 #

1. 修改缩放限制配置 #

2. 添加平移限制配置 #

完整修复后的JS代码 #

关键说明 #