Lightweight Charts日内时间显示异常问题求助

问题背景 #

• 后端返回带EST时区（-0500）的日内K线数据
• 本地时区偏移为-0600，图表显示时间与后端数据存在6小时差异
• 尝试官方时区转换方案后时间彻底错乱（年份显示为'94等）

后端数据示例 #

{2024-01-09 19:25:00 -0500 EST 473.94 474 473.94 474 10}
{2024-01-09 19:30:00 -0500 EST 473.95 473.96 473.93 473.96 6}
{2024-01-09 19:35:00 -0500 EST 473.99 473.99 473.99 473.99 5}
{2024-01-09 19:40:00 -0500 EST 474 474.01 473.94 473.95 16}
{2024-01-09 19:45:00 -0500 EST 473.89 473.89 473.81 473.81 150}
{2024-01-09 19:50:00 -0500 EST 473.83 473.83 473.83 473.83 1}
{2024-01-09 19:55:00 -0500 EST 473.77 473.83 473.77 473.79 142}

当前图表代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HELLO</title>
    <!-- Include the lightweight-charts library directly from CDN -->
    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            var chartDivId = 'chart-container';
            var chart = LightweightCharts.createChart(chartDivId, {
                width: 600,
                height: 300,
                layout: {
                    background: {
                        type: 'solid',
                        color: '#000000',
                    },
                    textColor: 'rgba(255, 255, 255, 0.9)',
                },
                grid: {
                    vertLines: {
                        color: 'rgba(197, 203, 206, 0.5)',
                    },
                    horzLines: {
                        color: 'rgba(197, 203, 206, 0.5)',
                    },
                },
                crosshair: {
                    mode: LightweightCharts.CrosshairMode.Normal,
                },
                rightPriceScale: {
                    borderColor: 'rgba(197, 203, 206, 0.8)',
                },
                timeScale: {
                    borderColor: 'rgba(197, 203, 206, 0.8)',
                    timeVisible: true,
                    secondsVisible: true,
                },
            });
            var candleSeries = chart.addCandlestickSeries({
                upColor: 'rgba(0, 255, 0, 1)',
                downColor: 'rgba(255, 0, 0, 1)',
                borderDownColor: 'rgba(255, 0, 0, 1)',
                borderUpColor: 'rgba(0, 255, 0, 1)',
                wickDownColor: 'rgba(255, 0, 0, 1)',
                wickUpColor: 'rgba(0, 255, 0, 1)',
            });
            async function loadChartData() {
                await fetch('http://localhost:8081/getLatestData')
                    .then(response => response.json())
                    .then(data => dataFromBackend = data);
                const formattedData = dataFromBackend.map(data => ({
                    time: (new Date(data.time)).getTime() / 1000,
                    open: data.open,
                    high: data.high,
                    low: data.low,
                    close: data.close,
                    volume: data.volume,
                }));
                candleSeries.setData(formattedData);
            }
            loadChartData();
            setInterval(loadChartData, 5000);
        });
    </script>
</head>
<body>
    <h1>Welcome</h1>
    <div id="chart-container"></div>
</body>
</html>

尝试的错误方案代码 #

...
function timeToTz(originalTime, timeZone) {
    const zonedDate = new Date(new Date(originalTime * 1000).toLocaleString('en-US', { timeZone }));
    return zonedDate.getTime() / 1000;
}
const formattedData = dataFromBackend.map(data => ({
    time: timeToTz((new Date(data.time)), "America/New_York"),
    open: data.open,
    high: data.high,
    low: data.low,
    close: data.close,
    volume: data.volume,
}));
candleSeries.setData(formattedData);
...

问题原因 #

1. 直接使用new Date(data.time).getTime()时，浏览器会将带EST时区的时间字符串按本地时区解析，导致时间偏移计算错误，出现6小时差
2. 错误方案中，timeToTz函数将Date对象直接乘以1000，得到异常数值；同时toLocaleString返回的字符串格式无法被Date正确解析，生成错误的时间戳，导致年份错乱

正确解决方案 #

核心是正确解析带时区的时间字符串为Unix时间戳，再通过Lightweight Charts的时区配置控制显示逻辑

修改loadChartData函数如下：

async function loadChartData() {
    await fetch('http://localhost:8081/getLatestData')
        .then(response => response.json())
        .then(data => dataFromBackend = data);
    const formattedData = dataFromBackend.map(data => {
        // 现代浏览器支持直接解析带时区的时间字符串，生成正确的Unix时间戳（秒）
        const timestamp = new Date(data.time).getTime() / 1000;
        return {
            time: timestamp,
            open: data.open,
            high: data.high,
            low: data.low,
            close: data.close,
            volume: data.volume,
        };
    });
    candleSeries.setData(formattedData);
    // 配置时间轴显示的时区：如需显示后端的EST时间，指定America/New_York
    chart.timeScale().applyOptions({
        timezone: "America/New_York",
        timeVisible: true,
        secondsVisible: true,
    });
}

方案说明 #

• 确保new Date(data.time)能正确解析带时区的字符串（现代浏览器均支持该格式），生成的时间戳是UTC时间的秒数
• 通过timeScale().applyOptions({ timezone: "America/New_York" })强制时间轴显示EST时区的时间，不受本地时区影响，完全匹配后端数据
• 若希望显示本地时区时间，只需移除timezone配置，Lightweight Charts会自动将Unix时间戳转换为本地时区时间显示

错误方案问题详解 #

• timeToTz函数接收的originalTime是Date对象，直接乘以1000会得到异常大的数值，而非时间戳
• toLocaleString返回的字符串格式（如1/9/2024, 7:25:00 PM）没有时区信息，Date解析时会按本地时区处理，且部分场景下会解析出错误的年份（如1994）

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