Chart.js折线图：仅在数据点位置显示X轴时间标签的实现

问题背景 #

• 当前基于Chart.js开发时间维度X轴的折线图，业务要求仅在存在对应数据点的位置展示X轴标签，无数据点的位置不显示任何标签
• 客户预期效果：
  
• 当前原生时间轴配置效果：
  
• 现有配置代码：

options={{
    scales: {
        xAxes: [
            {
                distribution: 'linear',
                type: "time",
                time: {
                    min: range_min.toDateString(),
                    max: range_max.toDateString(),
                    unit: "day",
                    stepSize: "1",
                },
                id: 'xAxis',
                ticks: {
                    autoSkip: true,
                    callback: function (value, index, values) {
                        return formatDate(new Date(value))
                    },
                }
            },
        ],
    },
    pan: {
        enabled: true,
        mode: "x",
        speed: 1,
        threshold: 1,
    },
    zoom: {
        enabled: true,
        drag: true,
        sensitivity: 0.5,
        mode: "x",
    },
    annotation: {
        annotations: [{
            type: 'line',
            mode: 'vertical',
            scaleID: 'xAxis',
            value: 1582229218219,
            endValue: 1582229218219,
            borderColor: 'rgb(75, 0, 0)',
            borderWidth: 4
        }]
    },
    onClick: (event, item) => {
        console.log(item)
    }
}}

配置修改方案 #

核心逻辑：通过调整时间轴刻度的生成规则，让刻度仅关联实际数据点，同时通过回调函数隐藏无数据的标签。

1. 前置数据处理 #

图表渲染前，先提取所有数据集的时间戳，去重后生成可查询的数组：

// 替换成你的实际数据集变量名
const chartDatasets = [
  { data: [{ x: 1704067200000, y: 12 }, { x: 1704240000000, y: 25 }] }
]
// 提取所有数据点的时间戳，去重
const existingDataTimestamps = [...new Set(
  chartDatasets.flatMap(ds => ds.data.map(point => new Date(point.x).getTime()))
)]

2. 核心X轴配置修改 #

替换原有xAxes的配置项如下：

xAxes: [
    {
        distribution: 'linear',
        type: "time",
        time: {
            min: range_min, // 直接传Date对象或时间戳，避免字符串时区偏差
            max: range_max,
            unit: "day",
        },
        id: 'xAxis',
        ticks: {
            // 关闭自动跳过，避免有效标签被系统自动隐藏
            autoSkip: false,
            // 核心：刻度从实际数据中提取，而非按步长自动生成全量时间刻度
            source: 'data',
            callback: function (value) {
                const currentTimestamp = new Date(value).getTime()
                // 匹配当前刻度是否存在对应数据，存在则返回格式化日期，否则返回空字符串隐藏
                return existingDataTimestamps.includes(currentTimestamp) 
                    ? formatDate(new Date(value)) 
                    : ''
            }
        },
        // 可选：让垂直网格线仅在有数据的位置显示
        gridLines: {
            display: true,
            callback: function(value) {
                return existingDataTimestamps.includes(new Date(value).getTime())
            }
        }
    },
]

3. 兼容性说明 #

• 现有的平移、缩放、自定义标注线功能不受影响
• 缩放或平移后，新显示范围内的有效数据点标签会自动展示
• 若出现标签和数据点偏移问题，统一将数据点的x值存储为时间戳格式，避免时区转换偏差

内容的提问来源于stack exchange，提问作者The Lost JavaScripter