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
相关产品推荐
相关产品推荐

