时间转Unix Timestamp后LightweightCharts报错：Value is null

问题详情 #

我通过TwelveData API获取股票数据，尝试加载到LightweightCharts中显示K线。代码里用getTime()将接口返回的时间转换为Unix时间戳，但图表始终无法正常渲染，控制台报错。

我尝试过两种调整：

• 移除getTime()后，图表仅显示一根K线
• 拆分时间的时分秒后再转换为Unix时间戳，问题依旧

报错信息 #

Uncaught Error: Value is null

相关代码 #

var intervals = ['15min', '1day', '1week', '1month'];

const apiKey = 'myapikey'; 

async function fetchData(interval) {

  const now = new Date();
  let startDate, endDate;

  if (interval === '15min') {
    // 获取最近14天数据
    endDate = now.toISOString().split('T')[0]; 
    startDate = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

  } else if (interval === '1day') {
    // 获取最近6周数据
    endDate = now.toISOString().split('T')[0];
    startDate = new Date(now.getTime() - 6 * 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
  
  } else if (interval === '1week') {
    // 获取最近12个月数据
    endDate = now.toISOString().split('T')[0];
    startDate = new Date(now.getTime() - 12 * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

  } else if (interval === '1month') {
    // 获取最近3年数据
    endDate = now.toISOString().split('T')[0];
    startDate = new Date(now.getTime() - 3 * 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
  }

  const url = `https://api.twelvedata.com/time_series?symbol=AAPL&interval=${interval}&apikey=${apiKey}&start_date=${startDate}&end_date=${endDate}&format=JSON&timezone=utc`;
  
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);


  const values = data.values || [];

  return values.map(d => {

    return {
      time: new Date(d.datetime).getTime(),
      open: Number(d.open),
      high: Number(d.high),
      low: Number(d.low),
      close: Number(d.close)
    };
  });
}

// let candlestickSeries; 
let candlestickSeries;

async function syncToInterval(interval) {

  const data = await fetchData(interval);  

  console.log('data for interval:', interval);
  console.log(data);

  if (candlestickSeries) {
    chart.removeSeries(candlestickSeries);
  }

  candlestickSeries = chart.addCandlestickSeries({
    upColor: '#4caf50',
    downColor: '#ef5350', 
    borderVisible: false
  });

  candlestickSeries.setData(data);

}

// 初始加载
syncToInterval(intervals[0]);

var switcherElement = createSimpleSwitcher(intervals, intervals[0], syncToInterval);

var chartElement = document.createElement('div');

var chart = LightweightCharts.createChart(chartElement, {
  width: 900,
  height: 600,
  layout: {
    background: {
            type: 'solid',
            color: '#000000',
        },
    textColor: '#d1d4dc',
  },
  grid: {
    vertLines: {
      visible: false,
    },
    horzLines: {
      color: 'rgba(42, 46, 57, 0.5)',
    },
  },
  rightPriceScale: {
    borderVisible: false,
  },
  timeScale: {
    borderVisible: false,
  },
  crosshair: {
    horzLine: {
      visible: false,
    },
  },
});
const currentLocale = window.navigator.languages[0];

const myPriceFormatter = Intl.NumberFormat(currentLocale, {
    style: "currency",
    currency: "USD", // 数据点货币单位
  }).format;

  chart.applyOptions({
    localization: {
      priceFormatter: myPriceFormatter,
    },
  });
document.body.appendChild(chartElement);
document.body.appendChild(switcherElement);

内容的提问来源于stack exchange，提问作者István Gábor Dudás