LightningChart.js中如何覆盖日期格式化刻度层级？

LightningChart支持手动指定日期时间轴的刻度层级，无需依赖自动的FormattingDay策略，以下是具体实现方案：

1. 自定义刻度层级配置 #

直接定义great、major、minor三个层级的刻度类型与格式，比如你需要的great: Month, major: DayOfMonth, minor: Hour：

const customTickStrategy = DateTimeTickStrategy({
    tickLevelConfiguration: {
        great: {
            tickType: DateTimeTickType.Month,
            formatter: (date) => date.toLocaleDateString('zh-CN', { month: 'short' })
        },
        major: {
            tickType: DateTimeTickType.DayOfMonth,
            formatter: (date) => date.getDate().toString()
        },
        minor: {
            tickType: DateTimeTickType.Hour,
            formatter: (date) => `${date.getHours()}:00`
        }
    },
    // 配置刻度间隔，匹配你的数据区间
    tickSpacing: {
        minor: 3600000,  // 1小时（毫秒）
        major: 86400000, // 1天（毫秒）
        great: 2592000000 // 约1个月（30天，毫秒）
    }
})

2. 将自定义策略应用到轴 #

创建图表时，把自定义策略绑定到时间轴（通常是X轴）：

const chart = LightningChart().HeatMap()
const xAxis = chart.getDefaultAxisX()
xAxis.setTickStrategy(customTickStrategy)

3. 适配24¼小时数据区间 #

如果需要确保刻度贴合你的24¼小时区间，可手动设置轴的可见范围：

// 替换为你的实际起始、结束时间戳
xAxis.setInterval(startDate.getTime(), endDate.getTime())

备选方案：great: DayOfMonth, major: Hour, minor: Minute #

若需要另一套刻度层级，只需修改tickLevelConfiguration的参数：

const customTickStrategy2 = DateTimeTickStrategy({
    tickLevelConfiguration: {
        great: {
            tickType: DateTimeTickType.DayOfMonth,
            formatter: (date) => `${date.getMonth()+1}/${date.getDate()}`
        },
        major: {
            tickType: DateTimeTickType.Hour,
            formatter: (date) => `${date.getHours()}h`
        },
        minor: {
            tickType: DateTimeTickType.Minute,
            formatter: (date) => `${date.getMinutes()}m`,
            tickSpacing: 900000 // 15分钟间隔（毫秒）
        }
    }
})

核心是通过DateTimeTickStrategy的tickLevelConfiguration完全自定义刻度层级，彻底替换默认的ISO周刻度，解决可读性问题。

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