由两个 div 组成的条形图答案

【问题标题】：Barlike chart made from two divs由两个 div 组成的条形图
【发布时间】：2016-06-28 16:26:06
【问题描述】：

我有两个从数组中获取的值：

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

在这种情况下$target = 9.83%。

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

在这种情况下$clicks = 7.15%。我有一个条形图，由.outer div（代表背景 div，包含所有其他元素的 div）、.inner div（填充外部......你可以把它想象成一个显示完成百分比）和.target div（表示虚线/ .inner div 必须达到的目标。在某些情况下，例如它超过了目标：.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>

所以我的问题是，超过目标后，内部 div 应该完全填满外部 div。

【问题讨论】：

标签： javascript php html css

【解决方案1】：

好的，首先让我们弄清楚你是如何计算宽度的：

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

将您的百分比值除以 100，得到一个可以乘以条形总宽度的值。你也不需要你正在做的“基础”计算。

<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>

然后更新您的宽度计算以计算条形的百分比，即宽度 (200) 乘以百分比值。

需要注意的几点：如果您仍然使用 PHP，则无需使用 CSS calc 操作（这样客户端渲染的压力就会较小），并且如果您启用了速记 PHP你不需要一直写<?php echo foo ?>：

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

<?= ?> 是一个简写的 PHP 回显语句

那么最后回答你的问题，你只需要在你取回你的值后比较两个值，看看是否超过了目标，如果超过了，则设置内栏占据整个栏：

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

这是一个工作文件：https://www.dropbox.com/s/33t0bmmik7y49i1/index.php?dl=0

【讨论】：

问题是我从中获取值的数组的值为 9.83%。所以 $target = $data->data[2][32][3]; = 9.83%
$target = str_replace("%", "", "9.83%"); 会解决这个问题！
数组是动态的，所以值不会总是 9.83%，很遗憾
这只是一个例子：$target = str_replace("%", "", $target);。见php.net/manual/en/function.str-replace.php
感谢您的努力，但即使您的示例也会像我的旧示例一样显示（不满足外部 div）

【解决方案2】：

感谢您的帮助，我想出了一个解决方案。如果 .inner div 的值低于目标值，我只需将目标设置为 100% 宽度与外部 div：

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

如果内部 div 超出目标，我将内部 div 设置为 100% 宽度与外部 div：

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

所以解决方案是一个简单的 if else 语句。我的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>

【讨论】：