以下のように、配列から取得した値を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}}の部分には、各要素の数ではなく、各要素の文字列(回答の文章)を表示したいです。
これらの問題を解決するには、どのようなコードを書けばよろしいでしょうか?
ご教授いただきたいです。よろしくお願いいたします。