如何在Chart.js时间笛卡尔图中设置固定15分钟间距的竖线？

你的核心问题是time轴的stepSize配置位置错误，导致15分钟间隔的设置没有生效。以下是修正后的配置方案：

修正后的配置代码 #

scales: {
    x: {
        type: 'time',
        time: {
            unit: 'minute',
            stepSize: 15, // 将stepSize从ticks移到time对象下
            displayFormats: {
                minute: 'HH:mm',
                hour: 'HH:mm',
            },
            // 可选：强制刻度对齐到15分钟的整数倍（比如00、15、30、45分）
            round: 'minute'
        },
        min: '{{ tour.chart_min }}',
        max: '{{ tour.chart_max }}',
        // 可选：确保网格线与刻度完全对齐
        grid: {
            drawOnChartArea: true,
            tickMarkLength: 0 // 隐藏刻度标记，只保留竖线
        },
        ticks: {
            // 这里可添加刻度样式、颜色等其他配置
        }
    },
    y: { beginAtZero: false }
}

关键说明 #

• stepSize的正确位置：对于type: 'time'的坐标轴，控制刻度/网格线间隔的stepSize必须放在time配置对象内，而非ticks对象里——你之前的配置把它放错了位置，导致设置不生效。
• round配置（可选）：添加round: 'minute'可以强制刻度对齐到15分钟的整数节点（比如09:00、09:15），避免出现偏移的刻度值。
• 网格线对齐逻辑：默认情况下网格线会和刻度一一对应，只要刻度间隔设为15分钟，竖线就会保持固定15分钟的间距。

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