آموزش پنل ادمین با لاراول با استفاده از voyager
آموزش ساخت پنل ادمین با لاراول با استفاده از voyager
2020-01-24
آموزش عملگر ها یا اپراتور های Take و TakeLast در RxJava
آموزش عملگر ها یا اپراتور های Take و TakeLast در RxJava
2020-01-27
آموزش رسم نمودار با کتابخانه Highcharts در لاراول

آموزش رسم نمودار با کتابخانه Highcharts در لاراول

آموزش رسم نمودار در لاراول با کتابخانه Highcharts ، در این پست از وب سایت تجاری اپ شما نحوه رسم نمودار با کتابخانه Highcharts در لاراول را خواهید آموخت.در این آموزش مرحله به مرحله استفاده از این کتابخانه جاوااسکریپت در لاراول 6 را به شما توضیح خواهیم داد.در این آموزش ما یک نمودار خطی در لاراول 6 با کتابخانه مذکور ایجاد خواهیم کرد.اما شما به سادگی می توانید از نمودار های خطی ، دایره ای ، میله ای ، سطحی و … استفاده کنید.

رسم نمودار در لاراول با کتابخانه Highcharts

Highcharts یک کتابخانه جاوااسکریپت است، از طریق این کتابخانه ما می توانیم از نمودار خطی، نمودار دایره ای، نمودار میله ای، نمودار سطح، نمودار ستونی و … استفاده کنیم.این کتابخانه بصورت اپن سورس است. این کتابخانه همچنین چندین تم را ارائه می دهد که شما می توانید با مراجعه به وب سایت این کتابخانه از نمودارهای بیشتری از استفاده کنید: سایت HighCharts.

هر زمان که شما نیاز داشته باشید از نمودارها در سمت سرور برنامه لاراول خود استفاده کنید و بخواهید نمودارها را به برنامه خود اضافه کنید می توانید از کدهایی که در ادامه می نویسیم استفاده کنید، یعنی اینکه شما داده ها را از دیتابیس واکشی می کنید و سپس عملکرد Highcharts را تنظیم می کنید.پس با ما همراه باشید تا همراه با یک مثال ببینیم چگونه می توان از کتابخانه ذکر شده در لاراول استفاده کرد.

ایجاد مسیر یا Route

اول از همه مسیر ساده ای برای ایجاد نمودار خطی ساده ایجاد خواهیم کرد. مسیر زیر را به فایل routes/web.php برنامه لاراول خود اضافه می کنیم:

routes/web.php

Route::get('chart', 'ChartController@index');

ایجاد کنترلر Controller

در این مرحله ، کنترلر جدیدی را با عنوان ChartController ایجاد خواهیم کرد. بنابراین بعد از ایجاد این کنترلر کدهای زیر را در آن بنویسید.

app/Http/Controllers/ChartController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
class ChartController extends Controller
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function index()
    {
        $users = User::Select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('2019')) /* for Current Year =>  date('Y') */
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
        return view('chart', compact('users'));
    }
}

ایجاد فایل Blade

در این مرحله، ما باید یک فایل blade ایجاد کنیم و در این فایل Blade از highchart js و کدها استفاده کنیم.

resources/views/chart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>آموزش رسم نمودار با کتابخانه Highcharts در لاراول - تجاری اپ</title>
    <link href="https://fonts.googleapis.com/css?family=Cairo&amp;subset=arabic" rel="stylesheet">
    <style>
        body
        {
            direction: rtl;
            text-align: center;
            font-family: "Cairo";
            background-color: #00e0e0;
        }
    </style>
</head>

<body>
<h1>آموزش رسم نمودار با کتابخانه Highcharts در لاراول - تجاری اپ</h1>
<div id="container"></div>
</body>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var users =  {{ json_encode($users) }};

    Highcharts.chart('container', {
        title: {
            text: 'رشد کاربر جدید ، 2019'
        },
        subtitle: {
            text: 'tejariapp.com :منبع'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'تعداد کاربران جدید'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'کاربران جدید',
            data: users
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
</script>
</html>

ایجاد رکوردهای ساختگی جهت تست رسم نمودار با کتابخانه Highcharts در لاراول

در این مرحله ، ما باید به صورت ماهانه چند رکورد ساختگی را به جدول users اضافه کنیم.شما باید مانند تصویر زیر کاربران را در هر ماه همراه با تاریخ ایجاد شده به جدول users اضافه کنید.

آموزش رسم نمودار با کتابخانه Highcharts در لاراول
آموزش رسم نمودار با کتابخانه Highcharts در لاراول

بسیارعالی ، اکنون می توانید برنامه خود را اجرا و بررسی کنید.امیدوارم این موزش به شما کمک کرده باشد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *