You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Lightweight Charts切换币种时价格缩放异常问题求助

Lightweight Charts 币种切换后价格缩放异常问题

我正在使用Lightweight Charts(项目地址:https://github.com/tradingview/lightweight-charts)在网站上实现币种加载与切换功能。未手动调整价格缩放时,币种切换显示正常;但手动调整价格缩放后,切换币种会出现显示异常。

初始化代码如下:

DATA.chartContainer = document.getElementById('Chart__Container');

DATA.chart = LightweightCharts.createChart(DATA.chartContainer, {
    layout: {
        background: { type: LightweightCharts.ColorType.Solid, color: '#191919' },
        textColor: '#999',
        fontSize: 14
    },
    grid: {
        vertLines: {
            color: '#262626',
            style: LightweightCharts.LineStyle.Solid,
        },
        horzLines: {
            color: '#262626',
            style: LightweightCharts.LineStyle.Solid,
        },
    },
    crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
        vertLine: {
            style: LightweightCharts.LineStyle.Solid,
            labelBackgroundColor: '#404040',
            color: '#666',
        },
        horzLine: {
            style: LightweightCharts.LineStyle.Solid,
            labelBackgroundColor: '#404040',
            color: '#666',
        }
    },
    priceScale: {
        borderColor: '#404040',
    },
    timeScale: {
        tickMarkFormatter: (timestamp) => new Date(timestamp * 1000).toLocaleTimeString(),
        borderColor: '#404040',
        secondsVisible: true,
        timeVisible: true,
        rightOffset: 6,
        barSpacing: 8,
    },
    localization: {
        timeFormatter: (timestamp) => new Date(timestamp * 1000).toLocaleTimeString(),
    },
});

DATA.candlestickSeries = DATA.chart.addCandlestickSeries({
    upColor: '#1e7e35',
    wickUpColor: '#1e7e35',
    borderUpColor: '#1e7e35',
    downColor: '#9a0000',
    wickDownColor: '#9a0000',
    borderDownColor: '#9a0000',
});

DATA.candlestickSeries.setData(CHART_DATA);

DATA.chart.priceScale('right').applyOptions({
    scaleMargins: {
        top: 0.1,
        bottom: 0.1,
    },
});

DATA.chart_scroll_timer = null;
DATA.chart_time_scale = DATA.chart.timeScale();

new ResizeObserver(entries => {
    DATA.chart.applyOptions({
        width: entries[0].contentRect.width,
        height: entries[0].contentRect.height,
    });
}).observe(DATA.chartContainer);

切换币种时,我通过以下代码填充新数据并尝试让图表适配容器宽度:

DATA.candlestickSeries.setData(DATA.candleBuffer);
DATA.chart_time_scale.fitContent();
  • 未调整价格缩放时:图表正常显示新币种的K线,布局完整
  • 调整价格缩放后:图表显示异常,K线区域出现偏移或显示不全

数据样例(首尾部分):

[
    {
        "time": 1665092580,
        "open": "0.22158556538370248085",
        "high": "0.22158556538370248085",
        "low": "0.21865290315008127554",
        "close": "0.21906278632164246134"
    },
    {
        "time": 1665092640,
        "open": "0.21906278632164246134",
        "high": "0.21912996064100641188",
        "low": "0.21906278632164246134",
        "close": "0.22069968683419220913"
    },
    {
        "time": 1665092700,
        "open": "0.22069968683419220913",
        "high": "0.22069968683419220913",
        "low": "0.22069968683419220913",
        "close": "0.22145882698692318981"
    },
    ...
    {
        "time": 1665332520,
        "open": "0.22211981579207104506",
        "high": "0.22211981579207104506",
        "low": "0.22211981579207104506",
        "close": "0.22215130498899483039"
    },
    {
        "time": 1665332580,
        "open": "0.22215130498899483039",
        "high": "0.22215130498899483039",
        "low": "0.22215130498899483039",
        "close": "0.22214902158647526481"
    },
    {
        "time": 1665334560,
        "open": "0.22214902158647526481",
        "high": "0.22214902158647526481",
        "low": "0.22214902158647526481",
        "close": "0.22214902158647526481"
    }
]

内容的提问来源于stack exchange,提问作者Alon Kolyakov

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 03:15:41