私は、Webアプリケーションは、アンケート調査の結果を表示CodeIgniterのを、使用して作成していMPDF6MPDFの問題は
を解決するために苦労しています問題を抱えています。
私は単純な積み重ね棒グラフをhtmlで生成し、jqueryを使用して棒を最終サイズにアニメーション化しました。正常に動作し、問題はありません。
私はMPDFで結果を複製できるようにしたいので、divsの同じ理論を使ってそれに応じてサイズを変更したいと思いますが、今回はPHPを使ってインラインスタイルとして幅を設定しています。しかし、値が1の場合、何らかの理由でmpdfがファンキーになってしまいます。下記の例のイメージを参照してください。ここで
私は
...両方のオプションは私に同じ結果を与えるピクセル幅および%幅の両方を試してみましたMPDFレポート<div class='survey'>
<?php $nw = 390; $w = 400; $tot=0; $totpos=0; $score=0; $cat=0; foreach ($categories as $c) : ?>
<p class='left question'><?php echo $c->category_name; ?></p>
<p class='left perc'><?php echo number_format($summaryAnswers[$cat][6],1); ?>%</p>
<p class='left perc'><?php echo number_format($summaryAnswers[$cat][7],2); ?></p>
<div style='width: <?php echo $w; ?>px;' class='left chart'>
<?php if ($summaryAnswers[$cat][0] > 0) : ?>
<div class='left barchart sagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][0]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][0]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][0]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][1] > 0) : ?>
<div class='left barchart agree' style='width: <?php $width = $nw * $summaryAnswers[$cat][1]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][1]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][1]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][2] > 0) : ?>
<div class='left barchart neither' style='width: <?php $width = $nw * $summaryAnswers[$cat][2]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][2]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][2]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][3] > 0) : ?>
<div class='left barchart disagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][3]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][3]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][3]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][4] > 0) : ?>
<div class='left barchart sdisagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][4]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][4]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][4]; ?></span></div>
<?php endif; ?>
</div>
のための私のPHPのマークアップの例です。
ここではスクリプトによって生成されたhtmlですが、各幅の値が正しいように見えます
<div class='survey'>
<p class='left question'>Organisation and Culture</p>
<p class='left perc'>66.7%</p>
<p class='left perc'>2.92</p>
<div style='width: 400px;' class='left chart'>
<div class='left barchart sagree' style='width: 97.5px;' tot='24' val='6' ><span class='label'>6</span></div>
<div class='left barchart agree' style='width: 162.5px;' tot='24' val='10' ><span class='label'>10</span></div>
<div class='left barchart neither' style='width: 32.5px;' tot='24' val='2' ><span class='label'>2</span></div>
<div class='left barchart disagree' style='width: 81.25px;' tot='24' val='5' ><span class='label'>5</span></div>
<div class='left barchart sdisagree' style='width: 16.25px;' tot='24' val='1' ><span class='label'>1</span></div>
</div>
<br class='clear' />
CSS ...なぜこれが起こっている
.survey { font-size: 10pt; }
.survey .question { width: 47%; padding: 5px 0; }
.survey .perc { width: 5%; margin: 0; padding: 5px 0; }
.survey .no { width: 2%; margin: 0; padding: 5px 0; }
.survey .chart { width: 40%; }
.survey .barchart { padding: 5px 0; }
.barchart .label { margin: 0 0 0 5px; }
div.sagree { background: #2DCC00; }
div.agree { background: #F2E930; }
div.neither { background: #888; }
div.disagree{ background: #FFA519; }
div.sdisagree { background: #FF1919; }
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
は、誰もが任意のアイデアを得ましたか。
歓声
あなたはこれらのクラスのためにあなたのCSSを追加していただけますか?このケースをチェックする方が簡単でしょう。 –
cssが追加されました – Andie
おそらくあなたは役に立つ情報をここに集めることができます[フローティングブロック](https://mpdf.github.io/what-else-can-i-do/floating-blocks.html) –