Chart.js如何跳过X轴上无对应数值的日期？

你当前配置中X轴使用了type: 'time'类型，该类型默认会按照时间的连续性自动生成连续的时间刻度，即便对应时间点没有匹配的数值也会展示，这是出现无值日期的核心原因。要实现仅展示有对应数值的日期，可按以下方案修改：

具体修改步骤 #

• 第一步：预处理你的图表数据集，提取所有存在对应Y轴数值的日期，整理为有序的数组作为X轴的类别数据源，可在预处理阶段直接用moment将日期格式化好，无需在ticks回调中重复处理。
• 第二步：调整X轴配置，将type: 'time'替换为type: 'category'，删除原有time配置块，修改后的X轴配置参考如下：

xAxes:[{
    ticks: {
        z: 0,
        autoSkip: false,
        // 预处理时已格式化日期的话直接返回即可
        callback: function(value, index, values){
            return value
        }
    },
    // 替换原time类型为category类型，避免生成连续空刻度
    type: 'category',
    scaleLabel: { 
        display: true,
        labelString: 'Date'
    }      
}]

注意事项 #

• 原配置中的autoskip属性名拼写错误，正确驼峰写法为autoSkip，修改后才能正常控制是否自动隐藏重叠刻度。
• 如果后续需要调整X轴刻度的展示密度，可将autoSkip改为true，Chart.js会自动根据画布宽度隐藏部分重叠的刻度。

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