如何让AxisTickStrategies.Time显示日期并支持毫秒级缩放精度？

我的图表X轴为时间戳列表，Y轴为数值列表。我希望X轴同时显示日期和时间，此前通过AxisTickStrategies.DateTime实现了该效果，但缩放精度仅支持到秒级。

代码示例：

const originDate = new Date();

chart.getDefaultAxisX()
        .setTitle('Timestamp')
        .setTickStrategy(AxisTickStrategies.DateTime, ticks => ticks
        .setGreatTickStyle(emptyTick)
        .setFormattingSecond(
            undefined,
            { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true },
            (x) => 'minor'
        )
        .setDateOrigin(originDate)
    )

由于需要毫秒级缩放精度，我尝试使用AxisTickStrategies.Time，但无法同时显示日期和时间。请问是否存在方法，可在X轴同时显示日期和时间的同时，支持毫秒级缩放精度？

解决方案 #

可以通过自定义AxisTickStrategies.DateTime的格式化规则，配置毫秒级显示逻辑来实现需求，具体实现如下：

方法一：扩展DateTime刻度策略的格式化配置 #

直接为AxisTickStrategies.DateTime添加毫秒级刻度的格式配置，同时设置最小间隔为1毫秒，确保缩放时能触发毫秒级刻度：

const originDate = new Date();

chart.getDefaultAxisX()
    .setTitle('Timestamp')
    .setTickStrategy(AxisTickStrategies.DateTime, ticks => ticks
        .setGreatTickStyle(emptyTick)
        // 配置秒级及以上刻度：显示日期+时间
        .setFormattingSecond(
            undefined,
            { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true },
            (x) => 'minor'
        )
        // 添加毫秒级刻度配置：显示时间+毫秒
        .setFormattingMillisecond(
            undefined,
            { hour: 'numeric', minute: 'numeric', second: 'numeric', fractionalSecondDigits: 3, hour12: true },
            (x) => 'minor'
        )
        .setDateOrigin(originDate)
        // 设置最小刻度间隔为1毫秒，开启毫秒级缩放支持
        .setMinimumInterval(1)
    )

方法二：自定义刻度格式化函数 #

如果需要更灵活的格式切换逻辑，可以使用setCustomFormatter完全控制每个刻度的显示内容，根据刻度间隔动态切换日期+时间或时间+毫秒的格式：

const originDate = new Date();

chart.getDefaultAxisX()
    .setTitle('Timestamp')
    .setTickStrategy(AxisTickStrategies.DateTime, ticks => ticks
        .setGreatTickStyle(emptyTick)
        .setCustomFormatter((tickValue, tickInterval, tickLevel) => {
            const date = new Date(tickValue);
            // 根据刻度间隔判断显示格式：间隔小于1000毫秒则显示毫秒
            if (tickInterval < 1000) {
                return date.toLocaleString('en-US', { 
                    hour: 'numeric', 
                    minute: 'numeric', 
                    second: 'numeric', 
                    fractionalSecondDigits: 3, 
                    hour12: true 
                });
            } else {
                return date.toLocaleString('en-US', { 
                    year: 'numeric', 
                    month: 'short', 
                    day: 'numeric', 
                    hour: 'numeric', 
                    minute: 'numeric', 
                    second: 'numeric', 
                    hour12: true 
                });
            }
        })
        .setDateOrigin(originDate)
        .setMinimumInterval(1)
    )

核心说明 #

• AxisTickStrategies.DateTime本身支持毫秒级精度，之前未触发是因为未配置对应的毫秒格式化规则和最小间隔。
• 通过setFormattingMillisecond或自定义格式化函数，既能保留日期+时间的显示，又能在缩放至足够小时触发毫秒级刻度。

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