Как согласовать ширину двух диаграмм, созданных с помощью Lightweight-Charts
Я хочу сравнить и проанализировать два графика. Итак, я запустил функцию createChart() и создал две диаграммы. В этот раз мы разделили timeRange двух диаграмм с функцией setVisibleLogicalRange().
const chart１ = LightweightCharts.createChart(document.body, { width: 500, height: 400});
const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData(…some data);
const chart2 = LightweightCharts.createChart(document.body, { width: 500, height: 150});
const barSeries = chart2.addHistogramSeries();
barSeries.setData(…some data);
function setTimerange1(timeRange) {chart2.timeScale().setVisibleLogicalRange(timeRange)}
chart.timeScale().subscribeVisibleLogicalRangeChange(setTimerange1);
function setTimerange2(timeRange) {chart.timeScale().setVisibleLogicalRange(timeRange)}
chart2.timeScale().subscribeVisibleLogicalRangeChange(setTimerange2);
Пока все шло хорошо, но теперь у меня одна проблема.
Когда вы выполняете функцию createChart(), кажется, что были созданы два элемента холста HTML. Основное полотно графика и полотно шкалы цен.
При создании двух диаграмм я установил ширину 500 пикселей. Однако ширина холста шкалы цен зависит от количества отображаемых на нем цифр. Поэтому, чтобы сохранить общую ширину на уровне 500 пикселей, ширина основного холста диаграммы также будет другой.
В моем примере изображения холст со шкалой цен имеет 4 цифры, такие как "9700.00", на верхнем холсте и 2 цифры, такие как "75,00", на нижнем холсте. Поскольку верхний холст имеет ширину 4 цифры, ширина будет на 10 пикселей больше, чем нижний холст.
В результате у меня есть два основных холста диаграмм с немного разной шириной. Есть ли способ исправить ширину холста ценовой шкалы и основного холста графика независимо от количества цифр?