Oookey Inc. │フルスタックDXクリエイティブチーム

ウェブ制作

プログラミング

Laravelと
Googleチャートを

組み合わせて、円グラフを表示して
みよう！

カフェラテ@プログラマー

2025.1.7

#Oookey_blog_004

Share on

はじめまして！エンジニアのカフェラテと申します。
最近はLaravelを使って様々なことができるようになりたいと思い、日々勉強中です。
Laravelを使ったアプリの開発をする際に、Googleチャートを組み合わせたグラフ表示の方法を知ったので、今回ご紹介したいと思います！

1. Laravelのプロジェクト作成

2. モデル・マイグレーションの作成と設定

3. データの登録

4. ルート設定

5. コントローラーの作成と設定

6. Googleチャート機能を搭載

7. 投票機能を追加

8. 動作確認

最後に

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>

これで、投票機能が完成いたしました！