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

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

[Lavacharts](http://lavacharts.com/)/[chart.js](http://www.chartjs.org/)が選択肢に入った。

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

個人的にはChart.jsが好き

# Lavacharts
## インストール
[composer](https://getcomposer.org/)を使ってインストール

requireに

```json
"khill/lavacharts": "3.0.*",
```
を追加

追加後

```json
    "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"
    },
```
人によるとは思うがこんな感じ。

インストール

```shell
$ composer update
```

composerに慣れている人なら

```shell
$ composer require "khill/lavacharts"
```

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

## 実装

利用クラスの追加

```php
use \Khill\Lavacharts\Lavacharts as Lava;
```

Lavachartsの数値とかの設定

```php
        $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（これだと警告が出る）

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

## 出力

![スクリーンショット 2018-02-28 13.12.16.png](https://qiita-image-store.s3.amazonaws.com/0/42587/2b33a68f-34f0-3b74-42eb-43be016a8a14.png)

こんな感じ

# Chart.js
## インストール？
[Installation](http://www.chartjs.org/docs/latest/getting-started/installation.html)のCDNを使う

[cdnjs](https://cdnjs.com/libraries/Chart.js)に飛ばされるので、ここでscriptタグをコピー

## 実装

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

```php
    <!-- 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

```javascript
require('./chart');
```

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

```javascript
(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の再生成

```shell
$ npm run dev
```

## 出力

![スクリーンショット 2018-02-28 13.31.12.png](https://qiita-image-store.s3.amazonaws.com/0/42587/6c961ce3-c537-6fc8-d754-4a06ce4ea423.png)

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


```
<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>
```

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

## 解決法？？？

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

        @yield('content')
    </div>
```

を

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

        @yield('content')
    </div>
```

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

## 追記

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

## 追記2

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

```
fill: false,
```
を追加するとこんな感じ。

<img width="519" alt="スクリーンショット 2018-03-01 23.32.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/6bcb5d65-5d50-3915-dc0c-9a89b9306892.png">