Как создать адаптивную облегченную диаграмму 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

Вот довольно простое решение. Предположим, вы создали LightweightChart внутриdivконтейнер:

          const chartDiv = document.getElementById('chart');
    const chart = LightweightCharts.createChart(chartDiv, {
        // ...
    }

Затем это изменит размер диаграммы на лету:

          window.onresize = function() {
        chart.applyOptions({ 
            width: chartDiv.offsetWidth, 
            height: chartDiv.offsetHeight 
        });
    }

Answer 4

Вам необходимо обнаружить событие изменения размера в элементе контейнера, содержащем диаграмму, а затем обновить размеры диаграммы с помощью chart.applyOptions({ width: newWidth, height: newHeight })

Есть несколько библиотек для определения размеров элементов, лучший способ, не связанный с библиотекой, который я могу найти, - это ResizeObserverAPI, но похоже, что он еще не интегрирован во все современные браузеры. Вы должны установить функцию обратного вызова обновления, используя новую высоту / ширину элементов, и использовать ее вResizeObserver:

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

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