آموزش ساخت نمودار و چارت در PHP

آموزش ساخت نمودار و چارت در 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 اضافه کنید :



پردازش داده های اصلی برای نمایش نمودار در 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

آموزش ساخت نمودار در PHP

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

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859