以下のように、配列から取得した値をBootstrap4のProgress Barで動的に表示したいです。  
値は取得した時によって刻々変化します。

・プログレスバーの最大値：countで取得した、配列全体の要素数  
・プログレスバーの各値：array_count_valuesで取得した、要素ごとの数

環境：  
PHP 7.4.9  
laravel7.28.1  
今回、DBは使用しません。

**TotalizationController.php**

```

    $row_count = 1;
    
    foreach ($file as $row)
    {
        // 1行目のヘッダーは取り込まない
        if ($row_count > 1)
        {
            //各値を取得する
            $id        = mb_convert_encoding($row[0],  "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
            $minutes   = mb_convert_encoding($row[5],  "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
    
            $question1 = mb_convert_encoding($row[6],  "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
            $answer1   = mb_convert_encoding($row[7],  "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
            $question2 = mb_convert_encoding($row[8],  "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
            $answer2   = mb_convert_encoding($row[9],  "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
            $question3 = mb_convert_encoding($row[10], "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
            $answer3   = mb_convert_encoding($row[11], "UTF-8", array("ASCII","JIS","UTF-8","EUC-JP","SJIS"));
    
            $out_arr1[] = $answer1;
            $out_arr2[] = $answer2;
            $out_arr3[] = $answer3;
    
        }
        $row_count++;
    }
    
    $count1  = count($out_arr1);
    $values1 = array_count_values( $out_arr1 );
    $count2  = count($out_arr2);
    $values2 = array_count_values( $out_arr2 );
    $count3  = count($out_arr3);
    $values3 = array_count_values( $out_arr3 );
    
    return view('totalization.index')->with([
        "question1"=> $question1,
        "question2"=> $question2,
        "question3"=> $question3,
        "out_arr1" => $out_arr1,
        "out_arr2" => $out_arr2,
        "out_arr3" => $out_arr3,
        "count1"   => $count1,
        "count2"   => $count2,
        "count3"   => $count3,
        "values1"  => $values1,
        "values2"  => $values2,
        "values3"  => $values3,
    ]);
    
```

**totalization/index.blade.php**

```

    <li>集計結果</li>
     <p>{{ $question1 }}</p>
     @foreach($values1 as $v1)
         <p>{{$v1}}</p>
         <div class="progress">
             <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{$count1}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$count1}}%">
             </div>
         </div>
     @endforeach
    
     <p>{{ $question2 }}</p>
     @foreach($values2 as $v2)
         <p>{{$v2}}</p>
         <div class="progress">
             <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{$count2}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$count2}}%">{{$v2}}
             </div>
         </div>
     @endforeach
    
     <p>{{ $question3 }}</p>
     @foreach($values3 as $v3)
         <p>{{$v3}}</p>
         <div class="progress">
             <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{$count2}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$count2}}%">{{$v2}}
             </div>
         </div>
     @endforeach
    
```

※index.blade.phpを書くに当たって、以下の質問を参考にしました。  
<https://stackoverflow.com/questions/37542237/create-progressbar-from-values-
in-array>

これらのコードを実行すると、以下のような画面が表示されましたが、プログレスバーが正しく表示されません。  
また、index.blade.phpの{{$v1}}の部分には、各要素の数ではなく、各要素の文字列(回答の文章)を表示したいです。

[![画像の説明をここに入力](https://i.stack.imgur.com/ntNlO.png)](https://i.stack.imgur.com/ntNlO.png)

これらの問題を解決するには、どのようなコードを書けばよろしいでしょうか？  
ご教授いただきたいです。よろしくお願いいたします。
CC BY-SA 4.0
2020-09-16T09:37:52.213
70447
2020-09-17T04:21:13.013
2020-09-17T04:21:13.013
41667
41667
question
php laravel array twitter-bootstrap
配列の要素を、プログレスバーに動的に表示したい