如何在Lightweight Charts中设置15秒间隔的垂直网格自定义宽度

Lightweight Charts 默认的时间轴垂直网格是自动根据时间范围和缩放级别生成的，没有直接指定固定时间间隔（比如15秒）的配置项，你可以通过自定义绘制网格线的方式实现需求，具体步骤如下：

1. 隐藏默认垂直网格 #

首先关闭官方自带的垂直网格，避免和自定义网格冲突：

chart.applyOptions({
  grid: {
    vertLines: {
      visible: false
    }
  }
});

2. 编写时间戳计算函数 #

生成可见时间范围内所有15秒整数倍的时间戳：

function get15SecondTicks(fromTimestamp, toTimestamp) {
  const ticks = [];
  // 找到第一个大于等于起始时间的15秒整倍数时间戳
  const firstTick = Math.ceil(fromTimestamp / 15) * 15;
  // 依次生成所有15秒间隔的时间戳
  for (let t = firstTick; t <= toTimestamp; t += 15) {
    ticks.push(t);
  }
  return ticks;
}

3. 订阅图表绘制事件，自定义绘制网格 #

通过subscribeDraw监听图表的重绘事件，每次图表更新时重新绘制15秒间隔的垂直网格：

chart.subscribeDraw(() => {
  const timeScale = chart.timeScale();
  const visibleRange = timeScale.getVisibleRange();
  if (!visibleRange) return;

  // 获取画布上下文
  const ctx = chart.canvas().getContext('2d');
  ctx.save();

  // 设置网格线样式（可根据需求调整颜色、宽度）
  ctx.strokeStyle = '#e0e0e0';
  ctx.lineWidth = 1;

  const chartHeight = chart.height();
  const ticks = get15SecondTicks(visibleRange.from, visibleRange.to);

  ticks.forEach(timestamp => {
    // 将时间戳转换为画布上的X坐标
    const xCoordinate = timeScale.timeToCoordinate(timestamp);
    if (xCoordinate === undefined) return;

    // 绘制垂直网格线
    ctx.beginPath();
    ctx.moveTo(xCoordinate, 0);
    ctx.lineTo(xCoordinate, chartHeight);
    ctx.stroke();
  });

  ctx.restore();
});

4. 处理时间范围变化（可选优化） #

如果需要在用户缩放、平移图表时立即更新网格，可以额外监听时间范围变化事件，触发图表重绘：

chart.timeScale().subscribeVisibleTimeRangeChange(() => {
  chart.applyOptions({}); // 触发图表重绘，间接调用subscribeDraw中的绘制逻辑
});

注意事项 #

• 如果你使用的是毫秒级时间戳，需要将计算逻辑中的15改为15000（因为15秒=15000毫秒）。
• 可以根据需求调整网格线的颜色、宽度、样式（比如虚线可通过ctx.setLineDash([5, 5])实现）。

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