Chart.js从v2迁移至v3/v4后，折线无法连接视图外数据点

架构老林

2026-7-25

解决Chart.js v3/v4 + chartjs-plugin-zoom中spanGaps无法连接视图外数据点的问题

问题根源

Chart.js v3+重构了数据渲染逻辑，配合chartjs-plugin-zoom使用时，插件默认会将当前视图范围外的数据点标记为不可见，而spanGaps默认仅处理可见数据点之间的间隙，导致跨视图外的折线无法连接，这和v2版本的行为不同。

解决方案

通过两个关键配置项修复：

折线数据集配置：添加includeInvisible: true
让spanGaps在计算间隙时，包含所有数据点（包括视图外被标记为不可见的点）。
zoom插件配置：设置limitScaleToDomain: false
避免缩放时自动将轴范围限制在数据域内，确保完整数据被保留用于折线连接计算。

完整配置示例

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    datasets: [{
      label: 'Sample Data',
      data: [10, null, null, 20, null, 30, 40],
      borderColor: 'rgb(75, 192, 192)',
      spanGaps: true,
      // 关键配置1：包含不可见数据点
      includeInvisible: true
    }]
  },
  options: {
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          enabled: true,
          mode: 'x'
        },
        // 关键配置2：不限制轴范围到数据域
        limitScaleToDomain: false
      }
    },
    scales: {
      x: {
        type: 'category'
      }
    }
  }
});