0

以下のように、配列から取得した値を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}}の部分には、各要素の数ではなく、各要素の文字列(回答の文章)を表示したいです。

画像の説明をここに入力

これらの問題を解決するには、どのようなコードを書けばよろしいでしょうか?
ご教授いただきたいです。よろしくお願いいたします。

3
  • 1
    動的にとの事ですが、配列から取得した値は時々刻々変わるのですか? 値が変わらないのなら、それを表示したプログレスバーも変わらないのが正しいように思います。希望する画面の動きの説明を質問に追加すると回答が得られるかもしれません。
    – Fumu 7
    2020年9月16日 23:08
  • 配列から取得した値は、刻々変化します。説明を追加させていただきます。
    – m.takehana
    2020年9月17日 2:29
  • それであれば、TotalizationController.phpのコード全体と、sleep(sleepSeconds) をforループで繰り返せば良いです。 sleepの引数(sleepSeconds)に動作を繰り返す間隔(秒単位)を変えると、プログレスバーが着かえらる周期を変えられます。
    – Fumu 7
    2020年9月17日 4:25

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。