gpt4 book ai didi

javascript - 如何创建响应式 Tradingview 轻量级图表?

转载 作者:行者123 更新时间:2023-12-05 00:47:12 27 4
gpt4 key购买 nike

我是 Tradingview 图表库的新手,我想创建类似响应式图表。

问题是,交易 View 图表库需要指定宽度和高度。这是代码。

const chart = LightweightCharts.createChart(e, {
width: e.offsetWidth,
height: e.offsetHeight,
layout: {
backgroundColor: 'rgb(17, 17, 39)',
textColor: 'rgba(255, 255, 255, 0.9)',
},
grid: {
vertLines: {
color: 'rgb(41, 44, 58)',
},
horzLines: {
color: 'rgb(41, 44, 58)',
},
},
crosshair: {
mode: LightweightCharts.CrosshairMode.Normal,
},
priceScale: {
borderColor: 'rgba(197, 203, 206, 0.8)',
},
timeScale: {
borderColor: 'rgba(197, 203, 206, 0.8)',
},
});

最佳答案

这是来自 timocov 评论的代码,它可以正常工作。将它放在 createChartsetData 之后。并将 chartContainer 重命名为您的图表容器 HTML 元素。

  // Make Chart Responsive with screen resize
new ResizeObserver(entries => {
if (entries.length === 0 || entries[0].target !== chartContainer) { return; }
const newRect = entries[0].contentRect;
chart.applyOptions({ height: newRect.height, width: newRect.width });
}).observe(chartContainer);

关于javascript - 如何创建响应式 Tradingview 轻量级图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57898720/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com