Я использую dompdf в laravel, в моем PDF-файле есть раздел, в котором мне нужно создать график, используя переданную в лезвие переменную.
У меня есть расчет, превращающий эту переменную в процент от его максимального числа:
$bar_percentage = (($bar - 5) * 100) / (20);
В результате у меня есть процентное число, которое мне нужно для создания высоты столбца на гистограмме. У меня был другой способ сделать это раньше, используя flexbox, когда мы использовали wkhtmltopdf напрямую, но это было проблематично для разных сред, поэтому мы добавили dompdf, и мне нужно было реорганизовать лезвие pdf для использования таблиц. Моя идея заключалась в том, чтобы создать фон графика, используя таблицу из 3 строк, и абсолютно расположить полосу внутри нее, примерно так:
<div class="graph-container">
<div class="bar" style="height:<?= $bar_percentage; ?>%"></div>
<table>
<tr>
<td style="background-color: green;"></td>
</tr>
<tr>
<td style="background-color: yellow;"></td>
</tr>
<tr>
<td style="background-color: red;"></td>
</tr>
</table>
</div>
, а затем абсолютно расположить полосу внутри таблицы:
<style>
.graph-container {
width: 300px;
height: 300px;
position: relative;
}
.graph-container table td {
height: 100px;
width: 100px;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
.bar {
position: absolute;
bottom: 0;
left: 30px;
width: 30px;
background-color: black;
}
</style>
Но происходит что-то сверхъестественное. Во-первых, «низ» помещает и таблицу, и полосу ниже graph-container
(но не внизу родительского элемента graph-container
, даже ниже этого!)
Также , высота полосы должна быть в процентах от высоты graph-container
, но она намного больше, чем контейнер графика, когда я устанавливаю этот процент на 100%, и я не могу понять, с каким элементом он сравнивает свой процент !!!
любая помощь приветствуется! Спасибо.
Определенно что-то странное происходит с Dompdf и абсолютным / относительным позиционированием, но я не могу сказать, как это обойти. Если бы я мог гарантировать, что высота полосы была бы хотя бы в процентах от правильной высоты, я мог бы взломать ее до правильного положения, но размер полосы также неправильный.