You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Lightweight Charts中Series Marker无法正常工作,报错'businessDay is undefined'

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.TimeUTCTimestampBusinessDay的联合类型,容易导致类型推断混乱。改成明确的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的代码细节,我再帮你排查~

火山引擎 最新活动