如何在Dygraphs中自定义实现两年一次的时间轴刻度？

问题背景 #

Dygraphs默认通过内部算法生成时间序列X轴的最优刻度，但针对2000-2023的年度数据集，默认刻度间隔过疏（每10年显示一次），强制使用ANNUAL刻度又会导致标签密集重叠。需要实现**每隔一年（偶数年：2000、2002…2022）**显示刻度标签，而Dygraphs无内置双年度刻度选项，需自定义ticker函数。

当前X轴配置：

ticker: function(min, max, pixels, opts, dygraph, vals) {
        return Dygraph.getDateAxis(min, max, Dygraph.ANNUAL, opts, dygraph);
}

修改后的自定义Ticker函数 #

调用Dygraph.getDateAxis获取年度刻度后，过滤出仅偶数年的刻度项即可实现需求：

ticker: function(min, max, pixels, opts, dygraph, vals) {
    // 获取所有年度刻度的原始数据
    const annualTicks = Dygraph.getDateAxis(min, max, Dygraph.ANNUAL, opts, dygraph);
    // 筛选出年份为偶数的刻度
    const filteredTicks = {
        ticks: annualTicks.ticks.filter(date => date.getFullYear() % 2 === 0),
        tickFormatter: annualTicks.tickFormatter // 保留原有日期格式化逻辑
    };
    return filteredTicks;
}

代码说明 #

1. 先通过Dygraph.getDateAxis生成完整的年度刻度数组，和原逻辑保持一致；
2. 使用filter方法，通过getFullYear() % 2 === 0判断筛选出偶数年的日期对象；
3. 保留原有的tickFormatter，确保刻度标签的日期格式和原有配置一致；
4. 返回过滤后的刻度对象，Dygraphs会自动基于这些刻度渲染X轴。

可选优化：补全边界刻度 #

如果需要确保起始/结束年份（比如2023）也能显示在刻度上，可在过滤后手动补充边界项：

ticker: function(min, max, pixels, opts, dygraph, vals) {
    const annualTicks = Dygraph.getDateAxis(min, max, Dygraph.ANNUAL, opts, dygraph);
    const filteredTicks = annualTicks.ticks.filter(date => date.getFullYear() % 2 === 0);
    
    // 补充起始奇数年份
    const minYear = new Date(min).getFullYear();
    if (minYear % 2 !== 0 && !filteredTicks.some(date => date.getFullYear() === minYear)) {
        filteredTicks.unshift(new Date(minYear, 0, 1));
    }
    
    // 补充结束奇数年份
    const maxYear = new Date(max).getFullYear();
    if (maxYear % 2 !== 0 && !filteredTicks.some(date => date.getFullYear() === maxYear)) {
        filteredTicks.push(new Date(maxYear, 0, 1));
    }
    
    return {
        ticks: filteredTicks,
        tickFormatter: annualTicks.tickFormatter
    };
}

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