如何创建响应式 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

这是 timocov 评论中的代码，它可以正常工作。把它放在createChart和之后setData。并将 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);

Answer 2

轻量级图表有autoSize.

将此标志设置为 true 将使图表监视图表容器的大小，并在大小发生变化时自动调整图表大小以适合其容器。

此功能要求ResizeObserver类在全局范围内可用。请注意，调用代码负责在需要时提供填充。如果全局范围没有ResizeObserver，则会出现警告并且该标志将被忽略。

Answer 3

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

有一些库可以检测元素大小调整，我能找到的最好的非库方法是使用 API ResizeObserver，但看起来它可能尚未集成到所有现代浏览器中。您可以使用元素新的高度/宽度设置更新回调函数，并在以下位置使用它ResizeObserver：

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

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