Filterhülsen aus zwei divs gemacht Diagramm

Question

Ich habe zwei Werte, die aus einem Array I nehmen:

$target = $data->data[2][32][3]; 

In diesem Fall $target = 9.83%.

$clicks = $data->data[1][32][3]; 

In diesem Fall $clicks = 7.15%. Ich habe ein barlike Diagramm, das von einem .outer div gebildet wird (das das Hintergrunddiv darstellt, das div, das alle anderen enthält), ein .inner div (der das äußere füllt ... Sie können es wie ein Bar denken, das den Prozentsatz zeigt, der abgeschlossen wird) und eine .target div (die die gepunktete Linie/das Ziel darstellt, das das .inner div erreichen muss ... in einigen Fällen wie diesem überschreitet es das Ziel: .inner > .target).

$target = 9.83%; 
 
    $bar_width = '200px'; 
 
    $clicks = 7.15%; 
 
    $base = max($target, $clicks);

.outer, 
 
.inner, 
 
.target { 
 
    height: 14px; 
 
    margin-bottom: 5px; 
 
} 
 
.outer { 
 
    background-color: #cccccc; 
 
    width: 200px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
    font-size: 10px; 
 
    line-height: 14px; 
 
    font-family: sans-serif; 
 
} 
 
.inner { 
 
    background-color: green; 
 
    position: absolute; 
 
    z-index: 1; 
 
    text-align: right; 
 
    width: calc(200/100 * <?php echo $base; ?>); 
 
    border-right: 2px solid black; 
 
} 
 
.inner:after { 
 
    content: ' 7.15%'; 
 
    display: inline-block; 
 
    left: 10px; 
 
    position: relative; 
 
    height: 100%; 
 
    top: -14px; 
 
    margin-left: 17px; 
 
} 
 
.target { 
 
    background-color: transparent; 
 
    width: 19px; 
 
    position: absolute; 
 
    z-index: 2; 
 
    color: black; 
 
    text-align: right; 
 
    border-right: 2px dotted black; 
 
} 
 
.target:after { 
 
    content: 'Target: 9.83%'; 
 
    display: inline-block; 
 
    left: 28px; 
 
    position: relative; 
 
    height: 100%; 
 
    top: 14px; 
 
    margin-left: -60px; 
 
}

<div class="outer"> 
 
    <div class="target" style="width: calc(<?php echo $bar_width; ?>/100 * (<?php echo $target; ?>/<?php echo $base; ?> * 100))"> 
 
    </div>     
 
    <div class="inner" style=" width: calc(<?php echo $bar_width; ?>/100 * (<?php echo $clicks; ?>/<?php echo $base; ?> * 100))"> 
 
    </div> 
 
</div> 
 

 
    
 
         

, dass mein Problem ist, also nachdem das Ziel der innere div vollständig die äußere div füllen sollte nicht überschritten wird.

Answer 1

Okay, so erstens wollen wir klären, wie Sie die Breiten sind Berechnung:

$bar_width = '200px'; 
$target = 9.83/100; 
$clicks = 7.15/100; 

Teilen Sie Ihre Prozentwerte um 100 einen Wert geben, die wir mit der Gesamtbreite multiplizieren kann. Sie brauchen auch nicht die Basisberechnung, die Sie gemacht haben.

Dann aktualisieren Sie Ihre Breitenberechnungen, um einen Prozentsatz des Balkens zu berechnen, d. H. Die Breite (200) mal die Prozentwerte.

Ein paar Dinge zu beachten: Wenn Sie sowieso PHP verwenden, müssen Sie nicht die CSS-Berechnung verwenden (und weniger Belastung auf das clientseitige Rendering), und auch, wenn Sie Kurz-PHP haben aktiviert werden Sie nicht <?php echo foo ?> auszuschreiben halten müssen:

<div class="target" style="width: <?= $bar_width * $target ?>"> 

echo-Anweisung

Dann endlich in Antwort auf Ihre Frage

• <?= ?> ist eine kurze Hand PHP, brauchen Sie nur die vergleichen zwei Werte nach dem Retr IEVE Ihre Werte zu sehen, ob das Ziel überschritten wird, und stellen Sie die Innenstange die gesamte Bar zu besetzen, wenn sie überschritten wird:

  $clicks = $clicks > $target ? 1 : $clicks; 
  

  Hier ist eine Arbeitsdatei: https://www.dropbox.com/s/33t0bmmik7y49i1/index.php?dl=0

Answer 2

Danke für die Hilfe, ich haben eine Lösung gefunden. Wenn die .inner div einen niedrigeren Wert als das Ziel hat setze ich einfach das Ziel bei 100% Breite den äußeren div withing:

if ($target > $clicks){ 
    $target_width = 100; 
    $inner_width = ($clicks/$target) * 100; 
} 

Und falls das innere div über das Ziel ich die innere div auf 100% Breite mit dem äußeren div:

else{ 
    $inner_width = 100; 
    $target_width = ($target/$clicks) * 100; 
} 

So war die Lösung eine einfache wenn sonst Aussage.Mein PHP:

<?php 
$target = $data->data[2][32][3]; 
$target = str_replace("%", "", $target); 
$clicks = $data->data[1][32][3]; 
$clicks = str_replace("%", "", $clicks); 
$bar_width = '80'; 
if ($target > $clicks){ 
    $target_width = 100; 
    $inner_width = ($clicks/$target) * 100; 
} 
else{ 
    $inner_width = 100; 
    $target_width = ($target/$clicks) * 100; 
} 

?> 

HTML:

<div class="outer"> 
    <div class="target" style="width: <?= $target_width ?>%"></div> 
    <div class="inner" style="width: <?= $inner_width ?>%"></div> 
</div>