آموزش ساخت نمودار و چارت در 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 دارای شکل های مختلف نموداری و همچنین تنظیمات مختلفی دارد ، در این آموزش فقط یک نمونه از آن استفاده شده

دموی نهایی نمودار با کمک PHP

دانلود پروژه آموزش ساخت نمودار