LaravelにLavacharts / Chart.jsを導入する方法

きっかけ

Laravelのコントローラで集計した結果をいい感じのチャートで出力したい!!

Lavacharts/chart.jsが選択肢に入った。

それぞれグラフを書くところまでは行ったので、一旦まとめる。

個人的にはChart.jsが好き

Lavacharts

インストール

composerを使ってインストール

requireに

"khill/lavacharts": "3.0.*",

を追加

追加後

    "require": {
        "php": ">=7.0.0",
        "doctrine/dbal": "^2.6",
        "fideloper/proxy": "~3.3",
        "fx3costa/laravelchartjs": "^2.5",
        "google/apiclient": "^2.0",
        "khill/lavacharts": "3.0.*",
        "laravel/framework": "5.5.*",
        "laravel/tinker": "~1.0",
        "laravelcollective/html": "^5.5",
        "laravelnews/laravel-twbs4": "^1.3",
        "zircote/swagger-php": "^2.0"
    },

人によるとは思うがこんな感じ。

インストール

$ composer update

composerに慣れている人なら

$ composer require "khill/lavacharts"

みたいな感じで行けるんだろうな〜

実装

利用クラスの追加

use \Khill\Lavacharts\Lavacharts as Lava;

Lavachartsの数値とかの設定

        $lava = new Lava;
        $result = $lava->DataTable();

        // 集計用メソッドの呼び出し
        // [['2018-01' => ['type_a' => 111, 'type_b' => 222]], ['2018-02' => ['type_a' => 333, 'type_b' => 444]]...]的なものが返ってくる
        $rows   = Hogehoge::fugafuga();

        $result->addDateColumn('Month')
                     ->addNumberColumn('total - ¥')
                     ->addNumberColumn('typeA - ¥')
                     ->addNumberColumn('typeB - ¥');

        foreach($rows as $duration => $total) {
            $result->addRow([
                $duration
                , $total['type_a'] + $total['type_b']
                , $total['type_a']
                , $total['type_b']
            ]);
        }

        $lava->LineChart('Sales', $result, [
            'title' => 'Sales Growth',
            'legend' => [
                'curveType' => 'string',
            ]
        ]);

        return view('chart/show', compact('lava'));

View（これだと警告が出る）

<div id="sales_div"></div>
// With the lava object
<?= $lava->render('LineChart', 'Sales', 'sales_div') ?>

出力

こんな感じ

Chart.js

インストール？

InstallationのCDNを使う

cdnjsに飛ばされるので、ここでscriptタグをコピー

実装

[project_dir]/resources/views/layouts/app.blade.phpのheadタグ内に以下を追加

    <!-- ChartJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

同じファイルのbodyタグをこんな感じに

<canvas id="chart"></canvas>
<div id="app">
    @include('layouts.navbar.main')

    @yield('content')
</div>

[project_dir]/resources/assets/js/app.js

require('./chart');

[project_dir]/resources/assets/js/chart.js
データはこのあとAPIから取ってこれるようにする

(function() {
    'use strict';
    var type = 'line';
    var data = {
        labels: ['2018-01', '2018-02', '2018-03', '2018-04', '2018-04'],
        datasets: [{
            label: 'type A',
            data: [111, 222, 333, 444, 555]
        }, {
            label: 'type B',
            data: [555, 444, 333, 222, 111]
        }]
    };

    var options;
    var ctx = $('#chart')[0].getContext('2d');
    var myChart = new Chart(ctx, {
        type: type,
        data: data,
        options: options
    });
})();

public/app.jsの再生成

$ npm run dev

出力

こんな感じ。これだと直線的すぎてわからないけど、データにばらつきがあればもうちょっと曲線的な線を出してくれる。

<canvas id="chart"></canvas>
<div id="app">
    @include('layouts.navbar.main')

    @yield('content')
</div>

↑を

<div id="app">
　　　　　　　　<canvas id="chart"></canvas>
    @include('layouts.navbar.main')

    @yield('content')
</div>

こうするとなぜか出力されない。。。。
原因が分かり次第修正する。

解決法？？？

    <div id="app">
        @include('layouts.navbar.main')

        @yield('content')
    </div>

を

    <div id="">
        @include('layouts.navbar.main')

        @yield('content')
    </div>

とする。
なぜなのか。。。

追記

以前、中途半端にVue.jsを入れようとしていたのが原因でした。
一旦完全に消すとうまくいくようになりました。

追記2

色を設定して、datasetsのそれぞれのデータに

fill: false,

を追加するとこんな感じ。