برنامه نویس فان | Fun Developer یک آدم ساده که عاشق برنامه نویسی و کد زدنه :) تلاش میکنه تا به بقیه کمک کنه. توسعه دهنده هسته لاراول و فضای اوپن سورس. فاندر پرانتز و کد نیوز.
چارت‌های دایره‌ای (Pie Charts) راهی بصری و ساده برای نمایش نسبت‌های مختلف یک کل فراهم می‌کنند. در این آموزش، ما شما را با نحوه‌ی ادغام Chart.js در برنامه لاراول خود آشنا میکنیم تا چارت‌های دایره‌ای پویا و تعاملی ایجاد کنید.
پیش‌نیازها:
پیش از شروع، مطمئن شوید که شرایط زیر فراهم باشد:
- یک پروژه لاراول راه‌اندازی شده باشد.
- دانش پایه‌ای از لاراول و جاوااسکریپت داشته باشید.
- کامپوزر برای مدیریت وابستگی‌های لاراول نصب شده باشد.
1. اضافه کردن chart.js به صورت cdn
برای اینک
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Other head elements -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Your Laravel application content -->
</body>
</html>2. ساخت کنترلر
در مرحله بعد یک کنترلر میسازیم:
php artisan make:controller PieChartController3. تعریف روت
در مرحله بعد یک روت برای چارتمون میسازیم:
use AppHttpControllersPieChartController;
Route::get('/pie-chart', [PieChartController::class, 'pieChart']);4. پیاده سازی دیتای نمودار در کنترلر
در مرحله بعدی یک سری دیتا برای نمودار درست میکنیم البته میتونید از دیتابیس و.. استفاده کنید اینجا صرفا یک مثال هست:
namespace AppHttpControllers;
use IlluminateHttpRequest;
class PieChartController extends Controller
{
public function pieChart()
{
// Replace this with your actual data retrieval logic
$data = [ 'labels' => ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'],
'data' => [25, 30, 15, 10, 20],
];
return view('pie-chart', compact('data'));
}
}5. ساخت ویو
خب ما نیاز داریم که با استفاده از chart.js نمودار پیاده سازی کنیم:
<html lang="en">
<head>
<title>Pie Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 80%; margin: auto;">
<canvas id="pieChart"></canvas>
</div>
<script>
var ctx = document.getElementById('pieChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: @json($data['labels']),
datasets: [{
data: @json($data['data']),
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
],
borderWidth: 1
}]
},
});
</script>
</body>
</html>
حالا شما یک نمودار حرفه ای Pie دارید و دیتا های خوبی رو میتونید داخل نمودار نشون بدید.
ما را دنبال کنید
© کلیه حقوق کد نیوز محفوظ می باشد - v1.2.4
اولین نفر باش که نظر ثبت میکنی :) یعنی یه کامنت به ما نمیرسه 😁