条形图由两个div组成

Question

I have two values that I take from an array:

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

In this case $target = 9.83%.

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

In this case $clicks = 7.15%. I have a barlike chart made from an .outer div (which represents the background div, the div which contains all the others), an .inner div (which fills the outer...you can think of it like a bar that shows the percentage completed) and a .target div (which represents the dotted line/ the target that the .inner div must reach..in some cases like this one it exceeds the target: .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>

    
                          

So my problem is that after the target is exceeded the inner div should completely fill the outer div.

</div>

Answer 1

Okay so firstly let's sort out how you're calculating the widths:

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

Divide your percentage values by 100 to give a value we can multiply with the total bar width. You also don't need the 'base' calculation you were doing.

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

Then update your width calculations to calculate a percentage of the bar, i.e. the width (200) times the percentage values.

Couple of things to note: if you're using PHP anyway, there is no need to use the CSS calc operation (and then less strain on the client-side rendering), and also if you have short-hand PHP enabled you won't need to keep writing out <?php echo foo ?>:

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

• <?= ?> is a short-hand PHP echo statement

Then finally in answer to your question, you just need to compare the two values after you retrieve your values to see if the target is exceeded, and set the inner bar to occupy the entire bar if it is exceeded:

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

Here is a working file: https://www.dropbox.com/s/33t0bmmik7y49i1/index.php?dl=0