رسم نمودار در لاراول با کتابخانه Highcharts
آموزش ساخت پنل ادمین با لاراول با استفاده از voyager
4 بهمن 1398
آموزش عملگر ها یا اپراتور های Take و TakeLast در RxJava
7 بهمن 1398
آموزش رسم نمودار در لاراول با کتابخانه 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
همچنین بخوانید: آموزش پنل ادمین با لاراول با استفاده از voyager
<!DOCTYPE html>
<html>
<head>
<title>آموزش رسم نمودار با کتابخانه Highcharts در لاراول - تجاری اپ</title>
<link href="https://fonts.googleapis.com/css?family=Cairo&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 اضافه کنید.
بسیارعالی ، اکنون می توانید برنامه خود را اجرا و بررسی کنید.امیدوارم این موزش به شما کمک کرده باشد.
