如何创建响应式Tradingview轻量级图表？

Question

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

问题是，交易视图制图库需要指定宽度和高度。下面是代码。

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)',
      },
    });

Answer 1

您需要在包含图表的容器元素上检测调整大小事件，然后使用chart.applyOptions({ width: newWidth, height: newHeight })更新图表维度

有一些库可以检测元素大小，我能找到的最好的非库方法是使用ResizeObserver应用编程接口，但它看起来可能还没有集成到所有现代浏览器中。您将使用元素new height/width设置一个更新回调函数，并在ResizeObserver中使用它

function resize() {
    chart.applyOptions({ width: $('#chartDiv').width(), height: $('#chartDiv').height() })
}

new ResizeObserver(outputsize).observe($('#chartDiv'))