Lightweight Charts中Series Marker无法正常工作,报错'businessDay is undefined'
我帮你分析下这个问题的原因和修复方案:
错误原因
这个报错是因为Lightweight Charts尝试把你传入的Marker时间解析为BusinessDay类型,但你实际使用的是UTCTimestamp(秒级数值型时间戳),类型不匹配导致解析时找不到businessDay对象的year属性,进而抛出错误。
具体修复步骤
1. 明确图表时间轴的UTC配置
在创建图表时,给timeScale添加timezone: 'UTC'配置,强制图表使用UTC时间戳解析,避免自动切换为BusinessDay类型:
const firstChart = tv.createChart(container, { width: 1200, height: 650, crosshair: { mode: tv.CrosshairMode.Normal }, layout: { attributionLogo: false }, timeScale: { timeVisible: true, timezone: 'UTC', // 新增:明确使用UTC时间 }, rightPriceScale: { autoScale: false } });
2. 修正Marker的类型声明和时间赋值
你当前的marks数组类型是tv.SeriesMarker<tv.Time>[],tv.Time是UTCTimestamp和BusinessDay的联合类型,容易导致类型推断混乱。改成明确的UTCTimestamp类型:
const marks: tv.SeriesMarker<tv.UTCTimestamp>[] = [];
同时,确保添加到marks的Marker时间是正确的秒级UTC时间戳(和你的K线数据时间格式完全一致):
records = records.map((e) => { const m = bout.mark(e); if (m !== undefined) { for (let me of m) { // 确保Marker的时间和K线数据的时间格式对齐(秒级UTC时间戳) me.time = e.time as tv.UTCTimestamp; marks.push(me); } } // 你的K线颜色处理逻辑... return e; });
3. 使用系列专属的setMarkers方法替代全局方法
你当前用的tv.createSeriesMarkers是旧版API的写法,建议改用K线系列的setMarkers方法,更贴合当前Lightweight Charts的API规范:
candleStickSeries.setData(records); // 替换原有的tv.createSeriesMarkers调用 candleStickSeries.setMarkers(marks);
4. 检查MarkerCreator的时间输出
最后确认你的MarkerCreator类返回的标记时间是秒级UTC时间戳,如果它返回的是毫秒级时间戳或者Date对象,需要转成秒级数值(比如Math.floor(date.getTime() / 1000)),否则还是会出现类型不匹配的问题。
验证修复逻辑
做完以上修改后,图表会明确以UTC时间戳解析所有时间数据,不会再尝试将Marker时间转为BusinessDay,自然就不会触发businessDay is undefined的错误,同时你的高低点标记也能正确显示在对应的K线上。如果还有疑问可以再补充MarkerCreator的代码细节,我再帮你排查~




