Chart.js 3.+如何通过Zoom和Pan功能展示日期选择器指定的图表数据范围

前提确认 #

首先确保你的X轴配置的是time类型，所有数据的x字段都是可被JS Date对象解析的标准时间格式（ISO字符串、时间戳都可），这是范围调整生效的基础。

实现步骤 #

• 首先把Chart实例存为全局可访问的变量，避免后续拿不到实例调用方法：

// 示例初始化代码
const ctx = document.getElementById('messageChart').getContext('2d')
const messageChart = new Chart(ctx, {
  type: 'line',
  data: {
    // 你原有3个月的数据集
  },
  options: {
    scales: {
      x: {
        type: 'time', // 必须是time类型
        // 其他x轴配置
      }
    },
    plugins: {
      zoom: {
        // 你原有zoom、pan的配置
      }
    }
  }
})

• 给两个日期选择器绑定变更事件，拿到起止时间后调用zoom插件提供的方法调整X轴范围：

// 假设两个选择器DOM的id为startPicker、endPicker
const startPicker = document.getElementById('startPicker')
const endPicker = document.getElementById('endPicker')

// 绑定事件，选完日期自动触发更新
startPicker.addEventListener('change', handleRangeUpdate)
endPicker.addEventListener('change', handleRangeUpdate)

function handleRangeUpdate() {
  const startStr = startPicker.value
  const endStr = endPicker.value
  // 两个日期都选中才执行更新
  if (!startStr || !endStr) return

  // 转换为时间戳，也可以用你日期组件自带的获取时间戳方法
  const startTimestamp = new Date(startStr).getTime()
  const endTimestamp = new Date(endStr).getTime()

  // 核心：调用zoom插件的scaleRange方法直接设置X轴范围，和手动缩放的逻辑完全兼容
  messageChart.zoom.scaleRange('x', {
    min: startTimestamp,
    max: endTimestamp
  })

  // 如果你用的是v1.x版本的chartjs-plugin-zoom，用下方兼容代码：
  // messageChart.scales.x.min = startTimestamp
  // messageChart.scales.x.max = endTimestamp
  // messageChart.update()
}

• 初始默认展示最近1个月的逻辑，在页面加载完成后调用即可：

window.addEventListener('load', () => {
  // 计算最近1个月的起止时间
  const endDate = new Date()
  const startDate = new Date()
  startDate.setMonth(startDate.getMonth() - 1)

  // 给日期选择器赋默认值
  startPicker.value = startDate.toISOString().slice(0, 10)
  endPicker.value = endDate.toISOString().slice(0, 10)

  // 触发一次范围更新
  handleRangeUpdate()
})

适配说明 #

如果你用的是第三方UI组件库的日期选择器，只需要把事件绑定换成组件提供的change/select事件即可，核心调整X轴范围的逻辑不需要改动，不会和你已配置的手动缩放、平移功能冲突。

内容的提问来源于stack exchange，提问作者Guilherme Roque de Souza