如何使用date-fn适配器为Chart.js动态设置时间轴min/max日期

完全支持动态设置，不需要硬编码固定值，以下是两种适配不同场景的实现方式，适配你当前使用的Chart.js 3.x+版本配置规范。

初始化时动态生成时间范围 #

适合首次加载就按固定规则展示时间范围的场景，比如默认展示近12个月数据，只需要提前计算好起止日期替换硬编码值即可：

// 生成近N个月的时间范围工具函数
const getRecentMonthRange = (rangeMonth = 12) => {
  const now = new Date();
  // 范围结束时间：当月最后一天
  const rangeEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  // 范围开始时间：N个月前的当月第一天
  const rangeStart = new Date(now.getFullYear(), now.getMonth() - (rangeMonth - 1), 1);
  // 格式化为Chart.js时间轴兼容的YYYY-MM-DD字符串
  const format = (date) => date.toISOString().split('T')[0];
  return { min: format(rangeStart), max: format(rangeEnd) }
}

// 替换原配置里的硬编码部分
const { min: xAxisMin, max: xAxisMax } = getRecentMonthRange(12);
const config = {
  type: "bar",
  data: {
    datasets: [
      {
        label: "base",
        data: monthly_data,
        backgroundColor: ["rgba(255, 99, 132, 0.2)"],
        borderColor: ["rgba(255, 99, 132, 1)"],
        borderWidth: 1,
        minBarLength: 7,
        parsing: {
          xAxisKey: "x",
          yAxisKey: "base",
        },
      },
      {
        label: "Case",
        data: monthly_data,
        backgroundColor: ["rgba(54, 162, 235, 0.2)"],
        borderColor: ["rgba(54, 162, 235, 1)"],
        borderWidth: 1,
        minBarLength: 7,
        parsing: {
          xAxisKey: "x",
          yAxisKey: "case",
        },
      },
      {
        label: "Standard",
        data: monthly_data,
        backgroundColor: ["rgba(255, 206, 86, 0.2)"],
        borderColor: ["rgba(255, 206, 86, 1)"],
        borderWidth: 1,
        minBarLength: 7,
        parsing: {
          xAxisKey: "x",
          yAxisKey: "standard",
        },
      },
    ],
  },
  options: {
    scales: {
      x: {
        type: "time",
        min: xAxisMin,
        max: xAxisMax,
        time: {
          unit: "month",
        },
      },
    },
  },
};

图表渲染后动态更新时间范围 #

如果需要在视图切换、时间筛选等交互场景下调整时间轴范围，不需要销毁重建图表，直接修改实例配置后调用更新方法即可：

// 传入图表实例和要展示的月数即可更新范围
function updateXAxisRange(chartInstance, showMonth = 12) {
  const { min, max } = getRecentMonthRange(showMonth);
  chartInstance.options.scales.x.min = min;
  chartInstance.options.scales.x.max = max;
  // 调用update触发重绘，传'none'可关闭更新动画
  chartInstance.update();
}

// 调用示例：切换到近12个月视图
// updateXAxisRange(myChart, 12)
// 切换到近6个月视图
// updateXAxisRange(myChart, 6)

注意事项：

• 传入min/max的值支持YYYY-MM-DD格式字符串、时间戳、Date对象三类格式，Chart.js时间轴均可正常解析
• 如果需要取消固定范围，让图表自动根据数据集的时间值适配边界，只需要把min/max设为undefined后调用update即可
• 确保项目已经正确引入Chart.js的时间适配器（比如chartjs-adapter-date-fns），否则时间轴无法正常渲染

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