آموزش ساخت نمودار و چارت در PHP
آموزش ساخت نمودار و چارت در PHP – در این مقاله می خواهیم با استفاده از chart.js نموداری از طریق PHP رسم کنیم . داده های اصلی در سمت سرور پردازش شده و به front-end داده می شود .
قبل از هرکاری نیاز است که کتابخانه chart.js را از اینجا دریافت کنید .
در نظر داشته باشید که تمامی فعالیت های زیر را در فایلی php انجام دهید مثل index.php
پس از دریافت آن را قبل از بسته تگ body ضمیمه کنید مثل :
<script src="lib/Chart.min.js"></script>
تنظیم canvas برای chart.js
این کتابخانه نیازمند المنت canvas می باشد تا بتواند نمودار ها را نمایش دهد . برای این کار تگ زیر را در body صفحه index.php اضافه کنید .
<div id="wrapper-chart"> <canvas id="chrt"></canvas> </div>
برای اینکه نمودار کل صفحه را پر کند استایل زیر را قبل از بسته شدن head اضافه کنید :
<style> #wrapper-chart{ width: 600px; height: 400px; display: inline-block; } </style>
پردازش داده های اصلی برای نمایش نمودار در PHP
کد PHP زیر را قبل از المنت های canvas اضافه کنید :
<?php $data = []; $limit = 6; for($i=0;$i<$limit;$i++){ $current_list = []; $numberLoop = $i + 1; $current_list['label'] = "chart {$numberLoop}"; $current_list['value'] = rand(20 , 361); $color = rand(0 , 255) . "," . rand(0 , 255) . "," . rand(0 , 255); $color = "rgba(" . $color . ", X)"; $bg_color = str_replace("X", "0.2", $color); $border_color = str_replace("X", "1", $color); $current_list['color'] = [$bg_color,$border_color]; $data[$i] = $current_list; } $json_data = json_encode($data); ?>
دقت داشته باشید که که لاین 12 برای مقدار داده نمودار و لاین 14 برای رنگ نمودار است که به صورت تصادفی عدد را بدست می آورد در صورت تمایل می توانید مقدار ثابتی برای آن در نظر بگیرید .
همچنین لاین 4 برای تعداد نمودار برای نمایش است .
نمایش نهایی نمودار با کدهای Js
حال کد زیر را به بعد از تگ script که برای chart.js ضمیمه کرده بودید اضافه کنید .
<script> <?php echo "const json_args = '{$json_data}';" ?> const chartArgs = JSON.parse(json_args); </script> <script> if (typeof chartArgs != "undefined" && chartArgs[0]) { var ctx = document.getElementById('chrt'); cleanChartArgs = { labels: [], value: [], bgColor: [], borderColor: [] }; for (let i = 0; i < chartArgs.length; i++) { const currentIndex = chartArgs[i]; cleanChartArgs.labels.push(currentIndex.label); cleanChartArgs.value.push(currentIndex.value); cleanChartArgs.bgColor.push(currentIndex.color[0]); cleanChartArgs.borderColor.push(currentIndex.color[1]); } if (ctx) { var myChart = new Chart(ctx, { type: 'bar', data: { labels: cleanChartArgs.labels, datasets: [{ label: ['full data'], data: cleanChartArgs.value, backgroundColor: cleanChartArgs.bgColor, borderColor: cleanChartArgs.borderColor, borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); } } </script>
در نظر داشته باشید که chart.js دارای شکل های مختلف نموداری و همچنین تنظیمات مختلفی دارد ، در این آموزش فقط یک نمونه از آن استفاده شده
لیست نظرات
سلام استاد، با سپاس از آموزش شما، این فایل روی localhost کار می کنه ولی روی سایت نه. فقط نوار سبز بالا رو میاره، علت از چی می تونه باشه؟
...
در کد بالا باید chart.min.js به Chart.min.js باید تغییر کند تا کار کند.
سپاس ، اصلاح گردید .
سلام اگر بخواهیم در یک صفحه دو چارت کشیده شود احتمالا باید حافظه چارت اول آزاد و دومی حافظه آن ایجاد گردد. دستور آزاد کردن حافظه چگونه است؟ myChart =null جواب نمی دهد. با سپاس پیشاپیش از راهنمایی شما.
درود ، آزاد کردن در اینجا معنا نداره نزدیک ترین مورد destroy هست که کلا ویژگی chart رو غیرفعال می کنه ، شما می تونید چندین init انجام بدید
با المان ها مختلف و id های مختلف