ساخت چارت ها و نمودار ها در لاراول

Charts یک پکیج چندکاربردی برای ساخت نمودارها و چارت های جذاب در لاراول هست. بیش از 100 چارت مختلف و 13 کتابخانه ی چارت متفاوت برای انتخاب وجود دارد. با این پکیج شما میتونید نوشتن تمام کدهای جاوا اسکریپتی که برای چارت ها انجام میدادید رو فراموش کرده و روی پروژه لاراولی تون تمرکز کنید. این پکیج شامل امکانات قابل سفارشی سازی پیشرفته ای چه در زمینه UI و چه در زمینه PHP بوده و با روش های مختلفی که ارائه میده دیگه مشکلی برای تعامل دیتابیس با چارت ها باقی نمی گذاره. و درنهایت Charts شامل انواع چارت ها مثل چارت های ریاضی و multi-charts هست و میتونه در مدل های eloquent شما استفاده بشه.

طریقه ی نصب

برای نصب این پکیج از طریق کامپوزر بصورت زیر اقدام نمایید :

composer require consoletvs/charts:5.*

افزودن provider, alias

نکته : اگر از لاراول 5٫5 به بعد استفاده می کنید این مرحله رو رد کنید.

سرویس provider زیر رو در آرایه آن در فایل config/app.php قرار دهید :

ConsoleTVs\Charts\ChartsServiceProvider::class,

درمورد alias هم همینطور :

'Charts' => ConsoleTVs\Charts\Facades\Charts::class,

درنهایت با استفاده از دستور زیر باندل ها رو منتشر کنید :

php artisan vendor:publish

تنظیمات پیشفرض این پکیج در فایل config/charts.php قرار میگیره که شامل آرایه ای از یکسری تنظیمات قابل تغییر هست.

همچنین فایل های view پیشفرض هم در مسیر resources/views/vendor قرار داده شدند که بصورت دلخواه میتونید ازشون استفاده کنید.

نحوه استفاده

همانطور که گفتیم این پکیج شامل چندین کتابخانه هست که هرکدوم چارت های مختلفی دارند. در شکل زیر میتونید مشاهده کنید هر کتابخانه چه نوع چارتی رو پشتیبانی می کنه :

مثال ساده از ساخت چارت بصورت زیر هست که اینجا arg اولی مربوط به نوع چارت و دومی هم نام کتابخانه است :

Charts::create('line', 'highcharts')
    ->title('My nice chart')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(0,500);

یک مثال کامل :

نمونه کنترلر :

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use Charts;

class TestController extends Controller
{
    public function index()
    {
        $chart = Charts::multi('bar', 'material')
            // Setup the chart settings
            ->title("My Cool Chart")
            // A dimension of 0 means it will take 100% of the space
            ->dimensions(0, 400) // Width x Height
            // This defines a preset of colors already done:)
            ->template("material")
            // You could always set them manually
            // ->colors(['#2196F3', '#F44336', '#FFC107'])
            // Setup the diferent datasets (this is a multi chart)
            ->dataset('Element 1', [5,20,100])
            ->dataset('Element 2', [15,30,80])
            ->dataset('Element 3', [25,10,40])
            // Setup what the values mean
            ->labels(['One', 'Two', 'Three']);

        return view('test', ['chart' => $chart]);
    }
}

نمونه view (به قرار دادن کدهای Charts::scripts و Charts::styles دقت کنید)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My Charts</title>

        {!! Charts::styles() !!}

    </head>
    <body>
        <!-- Main Application (Can be VueJS or other JS framework) -->
        <div class="app">
            <center>
                {!! $chart->html() !!}
            </center>
        </div>
        <!-- End Of Main Application -->
        {!! Charts::scripts() !!}
        {!! $chart->script() !!}
    </body>
</html>

چارت های دیتابیس

این چارت ها راه اندازی ساده ای برای لاراول دارند مثلا میخواهید تمام کاربران رو در چارت داشته باشید :

$chart = Charts::database(User::all(), 'bar', 'highcharts');

نکته مهم : حتما باید بصورت گروه بندی شده مقادیر رو از دیتابیس بگیرید و از groupBy استفاده کنید.

برای مثال چارت زیر رو در نظر بگیرید :

$chart = Charts::database(User::all(), 'bar', 'highcharts')
    ->elementLabel("Total")
    ->dimensions(1000, 500)
    ->responsive(false)
    ->groupBy('game');

یک روش دیگر برای دریافت اطلاعات از دیتابیس :

$data = Shopping::all();
$chart = Charts::create('bar', 'highcharts')
             ->title('My nice chart')
             ->elementLabel('My nice label')
             ->labels($data->pluck('shoppingDate'))
             ->values($data->pluck('price'))
             ->responsive(true);

سایر انواع چارت ها

  Charts::create('pie', 'highcharts')
    ->title('My nice chart')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

Charts::create('line', 'highcharts')
    ->title('My nice chart')
    ->elementLabel('My nice label')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

Charts::create('area', 'highcharts')
    ->title('My nice chart')
    ->elementLabel('My nice label')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);