TradingView Lightweight Charts数据接入求助：已获数据但无法导入组件

已成功通过Fetch获取MOEX的股票K线数据，但无法将数据渲染到TradingView Lightweight Charts组件中，代码如下：

fetch(
  "https://iss.moex.com/iss/engines/stock/markets/shares/securities/SBER/candles.json?iss.meta=off&iss.reverse=true&interval=7&from=2014-09-01"
)
  .then((response) => {
    return response.json();
  })

// convert data to array

  .then((data) => {

    const bars = data.candles.data;
    //
    var chart = LightweightCharts.createChart(document.body, {
      width: 600, //(window.innerWidth -20),
      height: 300 //(window.innerHeight - 20),
      
    });
    var candlestickSeries = chart.addCandlestickSeries();
    const cdata = bars.map(d => {
      let tempTime = d[7].slice(0, -9);
      return {time: tempTime, open: parseFloat(d[0]), high: parseFloat(d[2]), low: parseFloat(d[3]), close: parseFloat(d[1])};
    });
    candlestickSeries.setData(cdata);
  })

问题原因及修复方案 #

1. 时间格式不匹配 #

Lightweight Charts 要求时间字段为 YYYY-MM-DD 格式的字符串或时间戳，你的代码中slice(0, -9)得到的是类似2014-09-01T00:00的格式，不符合组件要求。

2. 数据顺序错误 #

你用了iss.reverse=true参数，MOEX接口返回的数据是从新到旧排列的，但Lightweight Charts需要数据按从旧到新的顺序加载，否则时间轴会混乱，无法正确渲染。

修复后的代码 #

fetch(
  "https://iss.moex.com/iss/engines/stock/markets/shares/securities/SBER/candles.json?iss.meta=off&iss.reverse=true&interval=7&from=2014-09-01"
)
  .then((response) => {
    // 检查响应状态，避免无效数据
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    const bars = data.candles.data;
    // 反转数据，转换成从旧到新的顺序
    const sortedBars = bars.reverse();
    
    const chart = LightweightCharts.createChart(document.body, {
      width: 600,
      height: 300,
    });
    const candlestickSeries = chart.addCandlestickSeries();
    
    const cdata = sortedBars.map(d => {
      // 提取YYYY-MM-DD格式的日期
      const tempTime = d[7].split('T')[0];
      return {
        time: tempTime,
        open: parseFloat(d[0]),
        high: parseFloat(d[2]),
        low: parseFloat(d[3]),
        close: parseFloat(d[1])
      };
    });
    
    candlestickSeries.setData(cdata);
  })
  // 捕获异常，方便调试
  .catch(error => {
    console.error('处理出错:', error);
  });

额外优化说明 #

• 添加了响应状态检查和异常捕获，方便排查请求或数据处理过程中的问题。
• 用split('T')[0]更可靠地提取日期部分，避免因字符串长度变化导致的截取错误。

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