[Học Laravel] Cách sử dụng Charts – hướng dẫn vẽ biểu đồ trong Laravel

Thêm biểu đồ vào Website sẽ giúp trang website của bạn trở nên trực quan và dễ hiểu hơn cho người dùng. Có rất nhiều thư viện để thêm biểu đồ vào Website như Charts, ChartJS, HighChart,….những Charts là thư viện mà được nhiều người sử dụng nhất. Vì thế trong bài viết này, WebFree.Net sẽ hướng dẫn các bạn cách sử dụng Charts trong Laravel.

Thêm biểu đồ vào Website sẽ giúp trang website của bạn trở nên trực quan và dễ hiểu hơn cho người dùng. Có rất nhiều thư viện để thêm biểu đồ vào Website như Charts, ChartJS, HighChart,….những Charts là thư viện mà được nhiều người sử dụng nhất. Vì thế trong bài viết này, WebFree.Net sẽ hướng dẫn các bạn cách sử dụng Charts trong Laravel.

Table of Contents

Cài đặt Package

Đầu tiên chúng ta cần thêm package vào project của bạn:

composer require consoletvs/charts:6.*

Nếu bạn đang sử dụng phiên bản Laravel 5.5 hoặc cao hơn thì đó là tất cả những gì bạn cần để cài đặt.

Nếu bạn làm việc với phiên bản Laravel thấp hơn 5.5, thì cần thêm dòng sau vào config / app.php trong phần providers:

ConsoleTVsChartsChartsServiceProvider::class,

Và xuất bản cấu hình:

php artisan vendor:publish --tag=charts_config

Vậy là đã cài đặt xong rồi đó

Sử dụng Package

Tạo một lớp biểu đồ:

php artisan make:chart UserChart

Bây giờ trong thư mục app sẽ xuất hiện Charts/UserChart.php

Tiếp theo, tạo UserChartController:

php artisan make:controller UserChartController -r

Chỉnh sửa như sau:

labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

Bây giờ chúng ta cần một view để hiển thị biểu đồ, tạo resources/views/users.blade.php và chèn đoạn sau:

@extends('layouts.app')

@section('content')
Sales Graphs


    {!! $salesChart->container() !!}

@endsection

Bây giờ chúng ta cần thêm thư viện css và js cho biểu đồ


    
    ...
    {{-- ChartScript --}}
    @if($usersChart)
    {!! $usersChart->script() !!}
    @endif

Cuối cùng, chúng ta chỉ cần viết đường dẫn trong routes/web.php để truy cập xem biểu đồ:

Route::get('users', '[email protected]');

Và đây là kết quả:

Chúng ta có thể tùy chỉnh màu sắc và màu nền như sau:

labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)");
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

Phương thức “color“: đường viền cho biểu đồ
Phương thức “backgroundcolor“: màu của vùng biểu đồ

Phương thích “linetension“: làm cho đường cong ít bị cong hơn, có giá trị từ 0 đến 1

Phương thức “fill“: nếu để false nó sẽ loại bỏ vùng

Phương thức “dashed“: nét đứt cho đường viền

Kết luận

Như vậy WebFree.net đã hướng dẫn cách cài và sử dụng Charts trong Laravel rất chi tiết, hy vọng các bạn có thể làm theo. Nếu không hiểu các bạn hãy để lại bình luận phía dưới để được giải đáp. Chúc bạn thành công!.