LightweightCharts绘制日内1分钟K线图异常：蜡烛重叠+无效日期

你的代码出现蜡烛重叠、鼠标悬停提示“invalid date”的核心问题是LightweightCharts不支持直接传入Date对象作为时间字段，且原始的'2022-01-01 09:30'格式在部分浏览器中解析Date对象可能存在兼容性问题，导致图表无法正确识别时间序列，最终出现时间无效、蜡烛位置错乱的情况。

LightweightCharts要求时间字段必须是以下两种格式之一：

• 秒级Unix时间戳（数字类型）
• 符合ISO 8601标准的字符串（如'2022-01-01T09:30:00'）

以下是两种可行的修改方案：

方案1：转换为秒级Unix时间戳 #

将时间字符串先标准化为ISO格式，再转换为秒级时间戳（注意要除以1000，因为getTime()返回毫秒级）：

const formattedData = intradayData.map(data => ({
  time: Math.floor(new Date(data.time.replace(' ', 'T')).getTime() / 1000),
  open: data.open,
  high: data.high,
  low: data.low,
  close: data.close,
}));

方案2：使用ISO 8601格式字符串 #

直接将原始时间字符串中的空格替换为T，并补充秒数，形成标准ISO格式：

const formattedData = intradayData.map(data => ({
  time: data.time.replace(' ', 'T') + ':00',
  open: data.open,
  high: data.high,
  low: data.low,
  close: data.close,
}));

<!DOCTYPE html>
<html>
<head>
  <title>TradingView Chart</title>
  <script src="lightweightcharts.js"></script>
</head>
<body>
  <div id="chartContainer" style="width: 800px; height: 600px;"></div>

  <script>
    const chart = LightweightCharts.createChart(document.getElementById('chartContainer'), {
      width: 800,
      height: 600,
      timeScale: {
        timeVisible: true, // 显示时间轴
        secondsVisible: false // 分钟K线不需要显示秒
      }
    });

    const candlestickSeries = chart.addCandlestickSeries();

    const intradayData = [
      { time: '2022-01-01 09:30', open: 100, high: 110, low: 90, close: 105 },
      { time: '2022-01-01 09:31', open: 105, high: 115, low: 100, close: 110 },
      // 可以继续添加更多数据
    ];

    // 这里选用方案1的时间转换方式，也可以替换为方案2
    const formattedData = intradayData.map(data => ({
      time: Math.floor(new Date(data.time.replace(' ', 'T')).getTime() / 1000),
      open: data.open,
      high: data.high,
      low: data.low,
      close: data.close,
    }));

    candlestickSeries.setData(formattedData);
  </script>
</body>
</html>

• 如果你需要更精细的时间控制（比如显示秒级数据），可以调整timeScale配置中的secondsVisible为true。
• 确保lightweightcharts.js文件路径正确，否则图表也无法正常加载。

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