PHP Data Chart Display Development Tutorial | PHP နှင့် chart.js နှင့်ဇယားကွက်များကိုဖန်တီးပါ

M66 2025-07-15

PHP Data Chart Display Development Tutorial | PHP နှင့် chart.js နှင့်ဇယားကွက်များကိုဖန်တီးပါ

သတင်းအချက်အလက်ခေတ်တွင်ဒေတာမြင်ကွင်းသည်ထုတ်ကုန်များသို့မဟုတ်စီမံကိန်းများအတွက်အရေးကြီးသောအကဲဖြတ်မှုစံနှုန်းများအနက်မှတစ်ခုဖြစ်သည်။ developer များအတွက် data charts များကိုပြသရန်မှန်ကန်သောကိရိယာများနှင့်နည်းပညာများကိုရွေးချယ်ရန်အထူးအရေးကြီးသည်။ လူကြိုက်များသော server-side side scripting language တစ်ခုအနေဖြင့် PHP သည်အချက်အလက်များကိုအလွယ်တကူလုပ်ဆောင်နိုင်ပြီး၎င်းကိုပြသနိုင်သည်။ ဤဆောင်းပါးတွင်ဒေတာဇယားပြ display စွမ်းဆောင်နိုင်မှုများကိုဖွံ့ဖြိုးတိုးတက်စေရန် PHP နှင့် Chart.js ကိုမည်သို့အသုံးပြုရမည်ကိုမိတ်ဆက်ပေးမည်။

ဒေတာဇယားစာကြည့်တိုက်ကိုရွေးချယ်ပါ

Google Charts, Chart.js စသည်တို့ကိုရွေးချယ်ရန်ရွေးချယ်စရာအကောင်းဆုံးအရင်းအမြစ်အချက်အလက်များချတ်သည့်ဒေတာစာကြည့်တိုက်များစွာရှိသည်။ ဤဆောင်းပါးသည် PHP Data Chart Display ကို Chart.js မှတစ်ဆင့်အကောင်အထည်ဖော်မှုကိုပြသပါမည်။

Chart.js စာကြည့်တိုက်ကိုမိတ်ဆက်ပေးခြင်း

ပထမ ဦး စွာကျွန်ုပ်တို့သည် Chart.js စာကြည့်တိုက်ဖိုင်ကိုကျွန်ုပ်တို့၏စီမံကိန်းသို့မိတ်ဆက်ပေးရန်လိုအပ်သည်။ CDN မှတဆင့် chart.js များကိုမိတ်ဆက်ရန်ရွေးချယ်နိုင်သည်သို့မဟုတ်ဒေသအလိုက်ဒေါင်းလုပ်ဆွဲနိုင်သည်။ CDN မှတစ်ဆင့် Chart.js များကိုမိတ်ဆက်ရန် HTML code ဖြစ်သည်။

 <!DOCTYPE html>
<html>
<head>
  <title>ဒေတာဇယားပြသမှု</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>
</body>
</html>

ဒေတာဘေ့စ်မှဒေတာများကိုရယူပါ

ထို့နောက်ဒေတာများကိုဒေတာဘေ့စ်မှရယူရန်နှင့်လုပ်ဆောင်ရန်လိုအပ်သည်။ အရောင်းနှင့်အရောင်းနေ့ကဲ့သို့သောသတင်းအချက်အလက်များကိုသိုလှောင်ထားသောအရောင်းအချက်အလက်များပါ 0 င်သော database စားပွဲ၌ပါ 0 င်သည်ဆိုပါစို့။ PHP Code မှတစ်ဆင့်ဒေတာဘေ့စ်ရှိဒေတာများကိုဖြည်ချပြီးသင့်လျော်သောပုံစံသို့ပြုလုပ်နိုင်သည်။ အောက်ဖော်ပြပါသည် PHP Code Perfice ဖြစ်သည်။

 <?php
// ဒေတာဘေ့စ cannection ကိုထူထောင်ကြောင်းယူဆ
$sql = "SELECT * FROM sales";
$result = $conn->query($sql);

// ဒေတာများကိုသိုလှောင်ရန်အချည်းနှီးသောခင်းကျင်းမှုကိုအစပြုပါ
$data = array();

if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $data[] = $row;
  }
}

// ကူးပြောင်းJSONအချက်အလက်အချက်အလက်များ
$jsonData = json_encode($data);
?>

JavaScript ကိုအသုံးပြုပြီးဇယားဆွဲပါ

ဒေတာများကိုရယူပြီးသည့်နောက်တွင်ကျွန်ုပ်တို့သည်ဒေတာများကို chart.js သို့ပို့ရန်အတွက် JavaScript ကိုအသုံးပြုသည်။ ဤတွင် JavaScript ကုဒ်ဥပမာတစ်ခုမှာ -

 <script>
  // ရယူPHPလွန်သွားတယ်JSONအချက်အလက်အချက်အလက်များ
  var data = <?php echo $jsonData; ?>;

  // အရောင်းနေ့စွဲများနှင့်အရောင်းသိမ်းရန်ခင်းကျင်းမှုကိုသတ်မှတ်ပါ
  var labels = [];
  var values = [];

  // ဒေတာ၏ taversal，အရောင်းနေ့စွဲနှင့်အရောင်းငွေပမာဏကိုထုတ်ယူပါ
  data.forEach(function(item) {
    labels.push(item.date);
    values.push(item.amount);
  });

  // ဖန်တီးChartအရာဝတ်ထုနှင့်ဇယားကို render
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'ရောင်းခြင်း',
        data: values,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

အကျဉ်းချုပ်

အထက်ပါကုဒ်များဖြင့် PHP ကိုဒေတာဗေ့စ်မှရောင်းအားအချက်အလက်များရရှိရန်နှင့် chart.js မှတစ်ဆင့်ဘားဇယားအဖြစ်ပြန်ဆိုရန် PHP ကိုအသုံးပြုသည်။ အမှန်တကယ်ဖွံ့ဖြိုးတိုးတက်မှုတွင်သင်သည်အခြားအချက်အလက်များကိုလိုအပ်သလိုတွေ့ဆုံရန်အတွက်အခြားအချက်အလက်များကိုဖြည့်ဆည်းပေးနိုင်သည်,

အတိုချုပ်ပြောရလျှင် PHP နှင့် Chart.js များကိုပေါင်းစပ်ပြီးထိရောက်သောနှင့် quisitite data chart display function များကိုအလွယ်တကူဖွံ့ဖြိုးနိုင်သည်။ ၎င်းသည်အသုံးပြုသူအတွေ့အကြုံကိုတိုးတက်အောင်သာမကဘဲအချက်အလက်များ၏နောက်ကွယ်ရှိသတင်းအချက်အလက်များကိုရှင်းရှင်းလင်းလင်းဖော်ပြထားသည်။ ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်းစဉ်အတွင်းဤဆောင်းပါးသည်သင့်ကိုကူညီနိုင်မည်ဟုမျှော်လင့်ပါ။

ဆက်စပ်အကြောင်းအရာ

PHP သည်အစာရှောင်ခြင်းထုတ်ကုန်ရှာဖွေမှုကိုရရှိစေသည်