Laravel(mix)+Chart.jsで円グラフを作成する

2020年8月24日 18:41

調べてみてもどれもjsをbladeに直接書いて、laravel mixを使っていたものが見当たらなかったのでlaravel mixを使った方法を残しておきます。

簡単な例を示すのでルーティングやコントローラ、テンプレートに関して最低限しか記述してません。シチュエーションに応じて応用して作ってください。今回示す例として会員の居場所数え、それらを円グラフにするという想定で書いていきます。

手順

ルーティング(web.php)

最低限のルーティングとなってます。


Route::get('/chart',     'PlaceController@index');

コントローラー(PlaceController.php)

コントローラーのindex関数です。

   public function index()
   {
       // ソート済みの配列を返す
       $keys = ['家','研究室','外出','学内','長期不在'];
       $counts = [10,4,3,2,1];
       return view('chart',compact('keys','counts'));
   }

今回はdbから値を取得してキーを格納した配列、データを格納した配列の2つに分けました。コメントアウトしてある通り、グラフに渡す前にソートしておいてください。keysは場所を表す要素、countsはそれらの要素の実際の人数を格納しています。ソートしない場合でもエラーは出ませんが、値の順番通りに表示されるので円グラフとして数学的におかしくなってしまいます。

javascript関数作成・登録

まず、chart.jsをインストールしましょう。

npm install chart.js

公式ドキュメントには --saveフラグを入れていますが、npm 5.0.0以上であれば必要ないです。不安であれば入れておいてください。

実際に書いていきます。jsファイルはresources/js内に入れてください。

show_chart.js

import 'chart.js';

window.make_chart = function make_chart(id, labels, data)
{
   var ctx = document.getElementById(id).getContext('2d');
   var myChart = new Chart(ctx, {
       type: 'pie',
       data: {
           labels: labels,
           datasets: [{
               label: '学生居場所割合',
               data: data,
               backgroundColor: [
                   'rgba(255, 99, 132, 0.2)',
                   'rgba(54, 162, 235, 0.2)',
                   'rgba(255, 206, 86, 0.2)',
                   'rgba(75, 192, 192, 0.2)',
                   'rgba(153, 102, 255, 0.2)',
                   'rgba(255, 159, 64, 0.2)'
               ],
               borderColor: [
                   'rgba(255, 99, 132, 1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)',
                   'rgba(75, 192, 192, 1)',
                   'rgba(153, 102, 255, 1)',
                   'rgba(255, 159, 64, 1)'
               ],
               borderWidth: 1
           }]
       },
       options: {
       }
   });
};

今回は複数回実行するので関数化しました。make_chart関数ですが、引数としてid,labels,dataを受け取ります。idはどこに書くかを表すものでグラフが１ページを2つ以上書かない場合は固定で大丈夫です。labelsはキーのことで要素（今回であれば場所）を表しています。dataは名前の通りデータです。idは文字列、labels,dataは配列をいれてください。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
mix.js('resources/js/show_chart.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

2行目を追加してください。

最後にコンパイルしていきます。ターミナルで操作します。

npm run dev

・このコマンドによりコンパイルされます。（グラフ作成の手順を紹介する記事なので詳細は省きます。ドキュメントを参考にしてください）

ビュー(chart.blade.php)

<!DOCTYPE html>
<html lang="ja">

   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>
   </head>

   <body>
       <div class="content">
           <canvas id="allChart"></canvas>
       </div>

       <script src="{{ mix('js/show_chart.js') }}"></script>
       <script>
           id = 'allChart';
           labels = @json($keys);
           data = @json($counts);
           make_chart(id,labels,data);
       </script>
   </body>

</html>

chanvasタグで囲まれていてid="allChart"となっている箇所がグラフが表示される箇所です。一つ目のscriptタグでjsファイルを読み込んでいます。二つ目のscriptタグでは変数の引き渡しを行なっています。変数を引き渡すとき@jsonをつけないと読み込むことができません。

確認

これらの手順を踏んでサーバーを立ち上げ確認します。確認はドメイン＋/chart　でできます。

スクリーンショット 2020-08-17 10.46.23

このように表示されれば成功です！

まとめ

思った以上に簡単だったと思います。bladeはテンプレートであるのでできるならjsの処理は書きたくなかった、その同じ処理を何度も使用するという理由からこの方法を採用しました。参考になれば幸いです。また、間違いやより良い方法があれば教えていただけると嬉しいです。

この記事が気に入ったらサポートをしてみませんか？