Chart.js中如何在时间笛卡尔轴主刻度间添加短网格线

针对你使用Chart.js@4.2.1和chartjs-adapter-date-fns@3.0.0的场景，要在时间X轴的主刻度间添加9条次网格线，需要通过启用次刻度（minor ticks）和次网格线来实现，同时修正原代码中的语法错误：

关键配置说明 #

1. 时间轴步长：在x.time中设置stepSize: 1（配合unit: 'day'，主刻度按天间隔）
2. 启用次刻度：开启ticks.minor.enabled: true，次刻度默认不显示标签，正好符合需求
3. 次网格线样式：开启grid.minor.enabled: true，可自定义颜色、线型等样式区分主次网格

修正后的完整代码 #

scales: {
  x: {
    type: 'time',
    time: {
      displayFormats: {
        month: 'dd MMM yy'
      },
      unit: 'day',
      stepSize: 1 // 主刻度间隔1天
    },
    ticks: {
      color: "black",
      minor: {
        enabled: true // 启用次刻度
      }
    },
    grid: {
      drawOnChartArea: false, // 修正驼峰命名和语法
      minor: {
        enabled: true, // 启用次网格线
        color: '#e0e0e0', // 次网格线颜色（可选，比主网格浅）
        borderDash: [2, 2] // 次网格线用虚线（可选）
      }
    },
  },
  y: {
    type: 'linear',
    position: 'left', // 补充缺失逗号
    ticks: {
      color: "black"
    },
    grid: {
      display: false // 修正等号为冒号
    }
  },
  y1: {
    type: 'linear',
    display: true,
    position: 'right',
    ticks: {
      color: "black"
    },
    grid: {
      display: false // 修正等号为冒号
    }
  }
}

补充说明 #

• 主刻度间添加9条次网格线，意味着将主刻度间隔分成10等份（1主+9次），Chart.js会自动根据stepSize和时间单位计算次刻度的位置
• 如果需要调整次网格线的长度，可以在grid.minor中添加drawTicks: true并配合ticks.minor.padding，或者通过borderWidth控制粗细

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