Строка производительности PHP не заполняется

Question

Я пытаюсь сделать панель производительности, также вижу статистические данные о колесе. Но это не заполнение бара, а просто гася номер я сделал заполнить

Вот код, я использую:.

<?php 

if(have_rows('details')): ?> 

<?php while (have_rows('details')) : the_row();?> 

<div class="container"> 
<h2>Performance Chart</h2> 
<div class="progress" id="prog1"> 
<?php $areo = the_field('areo'); 
     $stiffness = the_field('stiffness'); 
     $weight = the_field('weight'); 
     $comfort = the_field('comfort'); 

?> 
    <div class="progress-bar" role="progressbar" aria-valuenow="70" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Areo</span> 
    </div> 
    </div> 
<div class="progress" id="prog2"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="40" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Stiffness</span> 
    </div> 
    </div> 
    <div class="progress" id="prog3"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="90" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Weight</span> 
    </div> 
    </div> 
    <div class="progress" id="prog4"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="30" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Comfort</span> 
    </div> 
    </div> 
</div> 
</div> 
<?php endwhile; 

else : 

    // no rows found 

endif;?> 
<script src="<?php echo THEME_URL?>/js/jquery-2.1.4.min.js" ></script> 

<script type="text/javascript"> 
(function($){ 
    $(document).ready(function(){ 
     function progress(percent, $element) { 
      var progressBarWidth = percent * $element.width()/100; 
      $element.find('div.progress-bar').animate({ width: progressBarWidth }, 500); 
     } 
     progress(<?php echo $areo ?>, $('#prog1')); 
     progress(<?php echo $stiffness ?>, $('#prog2')); 
     progress(<?php echo $weight ?>, $('#prog3')); 
     progress(<?php echo $comfort ?>, $('#prog4')); 
    }); 
})(jQuery); 
</script> 

Я использую Wordpress плагин называется Advanced Пользовательские поля, тот где Я получаю значения от.

Answer 1

Я не уверен, чего вы хотите достичь, но ваш код, похоже, работает, см. Фрагмент ниже.

function progress(percent, $element) { 
 
    var progressBarWidth = percent * $element.width()/100; 
 
    $element.find('div.progress-bar').animate({ 
 
    width: progressBarWidth 
 
    }, 500); 
 
} 
 

 
progress(30, $('#prog4'));

div.progress-bar { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress" id="prog4"> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> 
 
    <span>Comfort</span> 
 
    </div> 
 
</div>

Может быть, вы просто пропустили, чтобы установить фон на progress-bar или должны увеличить время анимации.

---

Просто глядя на документацию the_field

Displays Значение указанного поля. Эта функция совпадает с echo get_field($field_name);

По-видимому, вы не получите значения соответствующих полей, а покажете их в своем HTML-выходе. Чтобы получить значение поля, вы должны лучше использовать get_field

Возвращает Значение указанного поля.

Так что в вашем случае это будет

$areo = get_field('areo'); 
$stiffness = get_field('stiffness'); 
$weight = get_field('weight'); 
$comfort = get_field('comfort');