LaravelでMorris.jsグラフ作成

Morris.jsは、シンプルで効果的なJavaScriptライブラリで、インタラクティブで美しいグラフやチャートを作成するために使用されます。LaravelはPHPのフレームワークであり、バックエンド開発において非常に人気があります。LaravelとMorris.jsを組み合わせることで、データを可視化する強力なウェブアプリケーションを簡単に作成できます。この記事では、LaravelでMorris.jsを使用してグラフを作成する方法を完全かつ包括的に解説します。

1. 前提条件

Morris.jsをLaravelプロジェクトに統合する前に、以下の準備が必要です。

• Laravelがインストールされていること

• Node.jsとnpmがインストールされていること

• 基本的なHTML、CSS、JavaScriptの知識

2. LaravelプロジェクトにMorris.jsをインストールする

まず、Morris.jsとその依存関係であるraphael.jsをプロジェクトに追加する必要があります。これを行うために、npm（Node Package Manager）を使用します。

ステップ1: npmでMorris.jsとRaphael.jsをインストール

ターミナルを開き、Laravelプロジェクトのディレクトリに移動します。その後、以下のコマンドを実行してMorris.jsとRaphael.jsをインストールします。

bash
CopyEdit
npm install morris.js raphael

ステップ2: インストールされたパッケージをwebpack.mix.jsで設定

Laravelは、フロントエンドアセットの管理にLaravel Mixを使用します。webpack.mix.jsファイルを開き、Morris.jsとRaphael.jsを読み込むように設定します。

javascript
CopyEdit
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .scripts([
       'node_modules/raphael/raphael.js',
       'node_modules/morris.js/morris.js',
   ], 'public/js/vendor.js');

これで、Morris.jsとRaphael.jsがプロジェクトで使用できるようになります。

ステップ3: フロントエンドでMorris.jsを使用

resources/js/app.jsファイルに、以下のようにMorris.jsをインポートします。

javascript
CopyEdit
require('./bootstrap');
import Morris from 'morris.js';
import 'morris.js/morris.css';

次に、npmを使ってJavaScriptのコンパイルを行います。

bash
CopyEdit
npm run dev

これで、Morris.jsとRaphael.jsが準備できました。

3. LaravelビューにMorris.jsチャートを表示

次に、Laravelのビュー（Bladeテンプレート）でMorris.jsを使用してグラフを表示します。

ステップ1: ビューの作成

resources/viewsディレクトリに新しいBladeビューを作成します。例えば、charts.blade.phpという名前にしましょう。

php
CopyEdit

"ja">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    "stylesheet" href="{{ asset('css/app.css') }}">
    
    


    
class="container">
        <h1>Morris.js グラフの例h1>
        <div id="myfirstchart" style="height: 250px;">div>
    div>

    <script type="text/javascript">
        new Morris.Bar({
            element: 'myfirstchart',
            data: [
                { year: '2008', value: 20 },
                { year: '2009', value: 10 },
                { year: '2010', value: 5 },
                { year: '2011', value: 5 },
                { year: '2012', value: 20 }
            ],
            xkey: 'year',
            ykeys: ['value'],
            labels: ['Value']
        });
    

上記のコードでは、Morris.jsを使用して棒グラフを作成しています。Morris.Barは棒グラフを作成するためのメソッドで、dataにデータセットを渡し、xkeyとykeysでX軸とY軸の値を指定します。

ステップ2: ルートの設定

次に、このビューを表示するためのルートを設定します。routes/web.phpファイルを開き、以下のようにルートを追加します。

php
CopyEdit
Route::get('/charts', function () {
    return view('charts');
});

4. データを動的に表示

Morris.jsを使用する際に最も重要なポイントは、データを動的に表示できることです。Laravelのコントローラーを使用して、データベースから情報を取得し、ビューに渡すことができます。

ステップ1: コントローラーの作成

ターミナルで以下のコマンドを実行してコントローラーを作成します。

bash
CopyEdit
php artisan make:controller ChartController

ChartController.phpファイルを開き、データベースからデータを取得してビューに渡すロジックを記述します。

php
CopyEdit
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Sales; // Salesモデルがあると仮定

class ChartController extends Controller
{
    public function index()
    {
        $salesData = Sales::select('year', 'amount')->get();
        return view('charts', compact('salesData'));
    }
}

ステップ2: ビューで動的データを使用

次に、charts.blade.phpファイルを修正して、コントローラーから渡されたデータを使ってMorris.jsのグラフを動的に作成します。

php
CopyEdit

@jsonディレクティブを使用して、Laravelから渡されたデータ