因此,我有三个 div .inner 填充外部 div(如果需要,可以是条形图表)和一个代表虚线的目标。我从一个数组中获取两个数据: $target = $data->data[2][32][3];
在这种情况下为 9.83%。 并且内部 div 数据是:
$clicks = $data->data[1][32][3];
在这种情况下为 7.15%。 所以我在外部 div 中将目标宽度设置为 100%。 我试图让 .inner div procentually 填充外部 div 直到它到达目标。 CSS: CSS:
.outer,
.inner,
.target {
height: 14px;
margin-bottom: 5px;
}
.outer {
background-color: #cccccc;
width: 80%;
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(80% / 100 * <?php $clicks ?>);
border-right: 2px solid black;
}
.inner:after {
content: '<?php echo number_format((float)$clicks, 2, '.', ''); ?>%';
display: inline-block;
left: 10px;
position: relative;
height: 100%;
top: -14px;
}
.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: <?php echo number_format((float)$target, 2, '.', ''); ?>%';
display: inline-block;
left: 28px;
position: relative;
height: 100%;
top: 14px;
}
HTML:
<div class="outer" style="width: "<?php echo $base; ?>">
<div class="target" style="width: 80%">
</div>
<div class="inner" style=" width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $clicks; ?> / <?php echo $base; ?> * 100))">
</div>
</div>
PHP:
<?php
$target = $data->data[2][32][3];
$bar_width = '80%';
$clicks = $data->data[1][32][3];
$base = max($target, $clicks);
?>
问题是当内部超过它时,我试图使目标在外部 div 上动态地向后移动 .inner > .target。关于如何完成此操作的任何想法?
最佳答案
我的想法是,当超过目标时,您可以设置目标的 css right
overPercent = ((100 * current / goal) -100)/2;
注意:现在是清晨,我的数学可能需要一些改进
关于javascript - 如何根据数组中的数据动态更改其宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38035958/