向TradingView轻量K线图传入OHLC数据时触发空值错误求助

错误栈 #

lightweight-charts.js:7 Uncaught Error: Value is null
    at f (lightweight-charts.js:7:2213)
    at Ai.Candlestick [as Yh] (lightweight-charts.js:7:45786)
    at Ai.Hs (lightweight-charts.js:7:47034)
    at Ut.ne (lightweight-charts.js:7:30810)
    at lightweight-charts.js:7:27153
    at Array.map (<anonymous>)
    at Ut.qs (lightweight-charts.js:7:27140)
    at Ut.Fs (lightweight-charts.js:7:24613)
    at Ut.xt (lightweight-charts.js:7:24448)
    at fs (lightweight-charts.js:7:104471)

原始OHLC数据 #

[{"time":"2023-10-17 15:15:00","open":"371.6","high":"371.79","low":"371.6","close":"371.79"},{"time":"2023-10-17 15:05:00","open":"371.6","high":"371.6","low":"371.6","close":"371.6"},{"time":"2023-10-17 15:00:00","open":"370.1","high":"375","low":"370.1","close":"375"},{"time":"2023-10-17 14:55:00","open":"374.9","high":"374.9","low":"370.1","close":"370.1"},{"time":"2023-10-17 14:45:00","open":"370.06","high":"375","low":"370.06","close":"374.9"},{"time":"2023-10-17 14:40:00","open":"370.06","high":"370.06","low":"370.06","close":"370.06"},{"time":"2023-10-17 14:15:00","open":"375","high":"375","low":"375","close":"375"},{"time":"2023-10-17 13:55:00","open":"375.5","high":"375.5","low":"375","close":"375"},{"time":"2023-10-17 13:40:00","open":"375.5","high":"375.5","low":"375.5","close":"375.5"},{"time":"2023-10-17 13:10:00","open":"371.5","high":"375","low":"371.5","close":"375"},{"time":"2023-10-17 12:30:00","open":"372","high":"372","low":"371.5","close":"371.5"},{"time":"2023-10-17 12:10:00","open":"372","high":"372","low":"372","close":"372"},{"time":"2023-10-17 11:55:00","open":"375","high":"375","low":"374","close":"374"},{"time":"2023-10-17 11:45:00","open":"371.1","high":"375","low":"371.1","close":"375"},{"time":"2023-10-17 11:00:00","open":"371.1","high":"371.1","low":"371.1","close":"371.1"},{"time":"2023-10-17 10:55:00","open":"372","high":"372","low":"372","close":"372"},{"time":"2023-10-17 10:45:00","open":"371.15","high":"371.15","low":"371.15","close":"371.15"},{"time":"2023-10-17 10:15:00","open":"371.01","high":"371.01","low":"371.01","close":"371.01"},{"time":"2023-10-16 15:25:00","open":"375","high":"375","low":"374.89","close":"374.89"},{"time":"2023-10-16 15:05:00","open":"375","high":"375","low":"375","close":"375"},{"time":"2023-10-16 13:25:00","open":"374.99","high":"374.99","low":"374.99","close":"374.99"},{"time":"2023-10-16 13:00:00","open":"374","high":"374","low":"372.01","close":"372.01"},{"time":"2023-10-16 12:20:00","open":"374","high":"374","low":"374","close":"374"},{"time":"2023-10-16 12:15:00","open":"370.56","high":"374","low":"370.56","close":"374"},{"time":"2023-10-16 12:00:00","open":"371","high":"371","low":"370.56","close":"370.56"},{"time":"2023-10-16 11:55:00","open":"373.5","high":"373.5","low":"371","close":"371"},{"time":"2023-10-16 11:50:00","open":"373","high":"373.5","low":"373","close":"373.5"},{"time":"2023-10-16 11:05:00","open":"375","high":"375.01","low":"373","close":"373"},{"time":"2023-10-16 10:45:00","open":"371.07","high":"375","low":"371.07","close":"375"},{"time":"2023-10-16 10:30:00","open":"384","high":"384","low":"371.07","close":"371.07"}]

实现代码 #

<script>
        function generateCandleSticks(data,chartId) {
            const chart = LightweightCharts.createChart(document.getElementById(chartId), { width: 500, height: 400,timeScale: {
            rightOffset: 1, 
            barSpacing: 1}})
            const candlestickSeries = chart.addCandlestickSeries(
            { 
                upColor: '#26a69a', 
                downColor: '#ef5350',
                borderVisible: false,
                wickUpColor: '#26a69a', 
                wickDownColor: '#ef5350'
            })
            chart.applyOptions({
        timeScale: {
            timeVisible: true,
            secondsVisible: false,
            tickMarkFormatter: (time, tickMarkType, locale) => {
                return time
            },
        },
        })
        candlestickSeries.setData(data)
        chart.timeScale().fitContent()
    }
    </script>
    <script>
        
        $(document).ready(function() {
            console.log('Ready Loaded')  
            let ohlcData = '<?= $result ?>'
            console.log(ohlcData)
            console.log('=================================')
            ohlcData = JSON.parse(ohlcData)

            ohlcData.forEach(item => {
                // Convert the time string to a JavaScript Date object
                const date = new Date(item.time);

                // Convert the date to a UTC timestamp
                item.time = date.getTime() / 1000; // Divide by 1000 to get seconds

                // Convert open, high, low, close to numbers
                item.open = parseFloat(item.open);
                item.high = parseFloat(item.high);
                item.low = parseFloat(item.low);
                item.close = parseFloat(item.close);
                });

            
            console.log(ohlcData)
            generateCandleSticks(ohlcData,'chart')
        })
    </script>

图表异常状态 #

排查与解决方案 #

问题根源 #

1. 时间解析失败：原始时间格式为YYYY-MM-DD HH:mm:ss，部分浏览器/环境下new Date()无法正确解析该格式，导致date.getTime()返回NaN，最终item.time变为NaN，被Lightweight Charts判定为无效的null值。
2. 数据顺序错误：Lightweight Charts要求OHLC数据必须按时间升序排列，但原始数据是从最新到最旧的降序排列，这会导致渲染逻辑异常。

修复代码 #

修改数据处理部分，解决上述两个问题：

$(document).ready(function() {
    console.log('Ready Loaded')  
    let ohlcData = '<?= $result ?>'
    console.log(ohlcData)
    console.log('=================================')
    ohlcData = JSON.parse(ohlcData)

    ohlcData.forEach(item => {
        // 将时间字符串转换为ISO标准格式（用T分隔日期和时间），确保解析正确
        const isoTime = item.time.replace(' ', 'T');
        // 若时间为UTC时区，可在末尾加'Z'：isoTime + 'Z'
        const date = new Date(isoTime);
        // 转换为秒级时间戳
        item.time = date.getTime() / 1000;

        // 转换价格字段为数字
        item.open = parseFloat(item.open);
        item.high = parseFloat(item.high);
        item.low = parseFloat(item.low);
        item.close = parseFloat(item.close);
    });

    // 按时间升序排序数据
    ohlcData = ohlcData.sort((a, b) => a.time - b.time);

    console.log(ohlcData)
    generateCandleSticks(ohlcData,'chart')
})

额外验证建议 #

• 在forEach中添加时间解析验证，避免无效数据进入图表：

  if (isNaN(item.time)) {
      console.error('无效时间格式:', item);
      // 可选择过滤该条数据
      return;
  }
  

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