ウェブ制作
プログラミング
Laravelと
Googleチャートを
組み合わせて、円グラフを表示して
みよう!
カフェラテ@プログラマー
2025.1.7
#Oookey_blog_004
はじめまして!エンジニアのカフェラテと申します。
最近はLaravelを使って様々なことができるようになりたいと思い、日々勉強中です。
Laravelを使ったアプリの開発をする際に、Googleチャートを組み合わせたグラフ表示の方法を知ったので、今回ご紹介したいと思います!
目次
1. Laravelのプロジェクト作成
まずはLaravelの新規プロジェクトを作成します。
ターミナルを使って、以下のコマンドを実行してください。
Copied!
composer create-project --prefer-dist laravel/laravel PROJECT_NAME
※PROJECT_NAMEのところには、任意のプロジェクト名を入れてください。
2. モデル・マイグレーションの作成と設定
次にモデルを作成します。
今回はおにぎりの具材のアンケートを取ろうと思うので、モデル名をOnigiriとします。
Copied!
php artisan make:model Onigiri -m
database/migrationsフォルダの中に、新しくファイルが生成されます。
生成されたファイルを開き、下記のように編集して保存します。
XXXX_create_onigiris_table.php
Copied!
public function up()
{
Schema::create('onigiris', function (Blueprint $table) {
$table -> id() ;
$table -> string('onigiri') ;
$table -> integer('number') ;
$table -> timestamps() ;
});
}
編集したファイルのマイグレートを実行します。
Copied!
php artisan migrate
3. データの登録
先ほど作成をしたおにぎりテーブルに、選択肢となる値を追加していきます。
今回は、しゃけ・梅干し・おかか・昆布の4種類を選択肢とします。
マイグレーションファイルを作成します。
Copied!
php artisan make:migration add_onigiris_table_4data --table=onigiris
構文はphp artisan make:migration 任意のマイグレーション名 --table=テーブル名
onigirisテーブルに4つのデータを追加するという意味のadd_onigiris_table_4data
database/migrationsフォルダの中に新しく生成されたファイルを開きます。
下記のように編集し、保存します。
YYYY_MM_DD_hhmmss_create_onigiris_table.php
Copied!
public function up(): void
{
$qb = \DB::table('onigiris');
$insert = [
[
'id' => '1',
'onigiri' => 'しゃけ',
'number' => '1',
],
[
'id' => '2',
'onigiri' => '梅干し',
'number' => '1',
],
[
'id' => '3',
'onigiri' => 'おかか',
'number' => '1',
],
[
'id' => '4',
'onigiri' => '昆布',
'number' => '1',
],
];
$qb -> insert($insert) ;
}
編集したファイルのマイグレートを実行します。
Copied!
php artisan migrate
これで、おにぎりテーブルに4つのデータが登録されました。
4. ルート設定
円グラフ表示用と、投稿結果保存用の2つのルートを用意します。
routes/web.phpに、下記3行を追加します。
Copied!
use App\Http\Controllers\OnigiriController ;
Route::get('/onigiri/chart', [OnigiriController::class, 'chart']) -> name('onigiri.chart') ;
Route::put('/onigiri/vote', [OnigiriController::class, 'vote']) -> name('onigiri.vote') ;
5. コントローラーの作成と設定
グラフと投票画面のコントローラーを作成します。
Copied!
php artisan make:controller OnigiriController
app/Http/Controllersの中に新たにOnigiriController.phpファイルができます。
ファイルを開き、最初にuse宣言を登録しておきます。
OnigiriController.php
Copied!
use App\Models\Onigiri ;
また、chartメソッドとvoteメソッドを登録しておきます。
OnigiriController.php
Copied!
class OnigiriController extends Controller
{
// チャートを表示する
public function chart()
{
$onigiris = Onigiri::all() ;
return view('vote.onigirivote', compact('onigiris')) ;
}
// 投票をデータベースに保存する
public function vote(Request $request)
{
$vote = Onigiri::where('onigiri', $request -> onigiri) -> first() ;
$vote -> number++ ;
$vote -> update() ;
return back() ;
}
}
chartメソッドでは、データベースのおにぎりのデータをすべて$onigirisに代入し、ビューに受け渡しています。ビューファイルは、voteフォルダのなかのonigirivote.blade.phpファイルを表示します。
voteメソッドでは、フォームから送信されたおにぎりの具の種類をデータベースから取得します。このおにぎりの具の種類のnumberをひとつ増やして、データベースへ保存という処理を行っています。
6. Googleグラフ機能を搭載
次にビューファイルを処理していきます。
ここからは、いよいよGoogleグラフ機能を使っていきます。
まずはresources/viewsの中にvoteフォルダを作成します。
さらに、その中にonigirivote.blade.phpファイルを作成します。
onigirivote.blade.phpファイルの中身は、下記のようにします。
onigirivote.blade.php
Copied!
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<title>
おにぎり投票結果
</title>
</head>
<body>
<div id="chart" style="height:500px;width:800px;"></div>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['onigiri name', 'number'],
@php
foreach($onigiris as $onigiri){
echo "['".$onigiri -> onigiri."', ".$onigiri -> number."]," ;
}
@endphp
]);
var options = {
title: '好きなおにぎり投票結果',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
こちらは、Googleチャートという機能を使用しています。
円グラフの他にも様々な種類のグラフ・チャートを使用できます。
公式ドキュメント
7. 投票機能を追加
最後に投票機能をつけていきます。
先ほど作成したonigirivote.blade.phpファイル内に、下記フォームを追加します。
onigirivote.blade.php
Copied!
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<title>
おにぎり投票結果
</title>
</head>
<body>
<!-- ここから追加 -->
<form method="post" action="{{route('onigiri.vote')}}">
@csrf
@method('put')
<div class="form-check">
<input name="onigiri" value="しゃけ" type="radio">
<label class="form-check-label" for="しゃけ">しゃけ</label>
</div>
<div class="form-check">
<input name="onigiri" value="梅干し" type="radio">
<label class="form-check-label" for="梅干し">梅干し</label>
</div>
<div class="form-check">
<input name="onigiri" value="おかか" type="radio">
<label class="form-check-label" for="おかか">おかか</label>
</div>
<div class="form-check">
<input name="onigiri" value="昆布" type="radio">
<label class="form-check-label" for="昆布">昆布</label>
</div>
<div class="text-right">
<button type=”submit” class="btn btn-danger btn-primary">投票する</button>
</div>
</form>
<!-- ここまで追加 -->
<div id="chart" style="height:500px;width:800px;"></div>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['onigiri name', 'number'],
@php
foreach($onigiris as $onigiri){
echo "['".$onigiri -> onigiri."', ".$onigiri -> number."]," ;
}
@endphp
]);
var options = {
title: '好きなおにぎり投票結果',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
これで、投票機能が完成いたしました!
8. 動作確認
最後に作成したアプリの動作確認をしてみます。
現在は、全ての具材に1票ずつ表が入っており、円グラフも均等に表示されています。
では、「しゃけ」に投票してみます。
「しゃけ」を選択して、「投票する」ボタンを押すと...
「しゃけ」に一票追加されて、円グラフの表記も更新されました!
最後に
いかがでしたでしょうか?
Googleチャートを組み合わせれば、見栄えが良く、使い勝手も良いグラフやチャートがお手軽に使用できます!
カスタマイズも豊富にできるみたいですので、私もさらに色々と試してみようと思います!