Chart.js如何设置坐标轴min/max边距及时间轴标签间距

优先推荐升级至Chart.js 3.x版本，你需要的三个功能均有原生支持，无需复杂自定义编码。以下是对应实现方案：

单个需求对应配置说明 #

1. 坐标轴自动添加5%边距 #

3.x版本直接在X轴配置中添加grace: '5%'即可，时间轴会自动对起止时间扩展5%的留白，无需手动计算时间最值。
2.x版本无内置该配置，可通过简易工具函数计算实现：

// 提取所有数据点的时间戳
const allTimestamps = data.datasets.flatMap(ds => ds.data.map(item => new Date(item.t).getTime()))
const minTime = Math.min(...allTimestamps)
const maxTime = Math.max(...allTimestamps)
// 计算5%边距对应的时间长度
const timePadding = (maxTime - minTime) * 0.05
// 赋值给刻度起止值
options.scales.xAxes[0].ticks.min = new Date(minTime - timePadding)
options.scales.xAxes[0].ticks.max = new Date(maxTime + timePadding)

2. 每个数据点对应X轴刻度标签 #

3.x版本配置X轴ticks.source: 'data'即可，会直接提取所有数据的时间点作为刻度，不会生成多余的中间刻度，完全匹配数据点位置。
2.x版本需要关闭自动跳过并手动指定刻度值：

xAxes: [{
  type: 'time',
  ticks: {
    autoSkip: false,
    // 传入所有数据的时间作为刻度值
    values: data.datasets[0].data.map(item => item.t)
  },
  // 其余time配置保持不变
}]

3. 调整X轴标签间距防止过密 #

3.x和2.x版本的配置逻辑一致，可通过以下参数控制：

• ticks.autoSkipPadding: 20：控制两个标签之间的最小像素间距，自动跳过过近的标签（非强制全显示场景适用）
• 若需要保留所有标签，设置ticks.minRotation: 45, ticks.maxRotation: 45让标签统一倾斜45度，避免重叠
• 可额外设置ticks.padding: 10调整标签和轴线的距离

完整3.x实现代码 #

HTML部分 #

<div id="chartDiv"><canvas id="chart"></canvas></div>
<!-- 3.x版本需要单独引入时间适配器 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

JS部分 #

var data = {
  datasets: [{
    label: "dataset1",
    lineTension: 0,
    fill: false,
    backgroundColor: '#43dea6',
    borderColor: '#43dea6',
    data: [{t:"2021-03-30T00:00:00",y:6},{t:"2021-04-01T00:00:00",y:3},{t:"2021-04-05T00:00:00",y:4},{t:"2021-04-12T00:00:00",y:7},{t:"2021-04-19T00:00:00",y:6},{t:"2021-04-26T00:00:00",y:8},{t:"2021-05-04T00:00:00",y:10},{t:"2021-05-11T00:00:00",y:10},{t:"2021-06-09T00:00:00",y:2},{t:"2021-06-16T00:00:00",y:3},{t:"2021-06-23T00:00:00",y:4}]
  },
  {
    label: "dataset2",
    lineTension: 0,
    fill: false,
    backgroundColor: '#e44269',
    borderColor: '#e44269',
    data: [{t:"2021-03-30T00:00:00",y:0},{t:"2021-04-01T00:00:00",y:3},{t:"2021-04-05T00:00:00",y:1},{t:"2021-04-12T00:00:00",y:1},{t:"2021-04-19T00:00:00",y:1},{t:"2021-04-26T00:00:00",y:0},{t:"2021-05-04T00:00:00",y:0},{t:"2021-05-11T00:00:00",y:0},{t:"2021-06-09T00:00:00",y:4},{t:"2021-06-16T00:00:00",y:3},{t:"2021-06-23T00:00:00",y:2}]
  }]
};

var options = {
  animation: false,
  scales: {
    x: {
      type: 'time',
      grace: '5%', // 5%边距配置
      time: {
        unit: 'day',
        tooltipFormat: 'dd.MM.yyyy',
        displayFormats: {
          day: 'dd.MM.yy'
        }
      },
      ticks: {
        source: 'data', // 用数据点作为刻度
        autoSkip: false, // 不自动跳过标签
        minRotation: 45, // 标签倾斜45度防重叠
        autoSkipPadding: 30 // 标签最小间距
      }
    }
  }
};

var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

效果对比 #

• 当前效果：
• 预期效果：

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