계기

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 로 날아가기 때문에 여기에서 스크립트 태그 복사

구현

[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,

추가하면 이런 느낌.