လက်ရှိတည်နေရာ: ပင်မစာမျက်နှာ> နောက်ဆုံးရဆောင်းပါးများစာရင်း> PHP နှင့် Chart.js ကိုအသုံးပြုနည်းဒေတာဇယား display function ကိုဖော်ထုတ်ရန်

PHP နှင့် Chart.js ကိုအသုံးပြုနည်းဒေတာဇယား display function ကိုဖော်ထုတ်ရန်

M66 2025-07-15

PHP နှင့် Chart.js ကိုအသုံးပြုနည်းဒေတာဇယား display function ကိုဖော်ထုတ်ရန်

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

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

လက်ရှိတွင် Google Charts, Chart.js စသည့်စျေးကွက်တွင်ရွေးချယ်ရန်အတွက် Open Source Data Chart Libraries အမျိုးမျိုးရှိသည်။

ဤဆောင်းပါးတွင် PHP နှင့်ပေါင်းစပ်ပြီးဒေတာဇယား display function များကိုမည်သို့ဖွံ့ဖြိုးတိုးတက်မည်ကိုပြသရန်ဥပမာတစ်ခုအဖြစ် chart.j များကိုဥပမာတစ်ခုအဖြစ်ယူပါမည်။ Chart.js သည်ပေါ့ပါးသော JavaScript ဇယားစာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်အမျိုးအစားများကိုထောက်ပံ့ပေးပြီးအဓိကခေတ်မီ browser များနှင့်သဟဇာတဖြစ်သည်။

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

ပထမ ဦး စွာကျွန်ုပ်တို့သည်ဇယားကွက်ကိုစီမံကိန်းသို့မိတ်ဆက်ပေးရန်လိုအပ်သည်။ ၎င်းကို CDN မှတစ်ဆင့်မိတ်ဆက်ပေးနိုင်သည်, ဒေါင်းလုပ် လုပ်. download လုပ်. တည်ခင်း။ ည့်ခံနိုင်သည်။

 
<!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 င်သည့်ဒေတာများပါ 0 င်သည်ဟုယူဆကြပါစို့။ ဒေတာများကိုဒေတာဘေ့စ်မှဒေတာများကို PHP မှတစ်ဆင့်ရယူရန်လိုအပ်ပြီးတင်ဆက်ရန်အတွက်ရှေ့တန်းဇယားသို့ကူးယူရန်လိုအပ်သည်။

 
<?php
// သင်ဒေတာဘေ့စ်နှင့်ချိတ်ဆက်ထားကြောင်းယူဆ,နှင့်ဒေတာဘေ့စ connection အရာဝတ်ထုကိုရယူပါ$conn
$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);
?>

ဇယားများသို့ဒေတာများကိုဖြတ်သန်းပါ

ထို့နောက် PHPT မှ PHPS မှ PHPT.Js မှ chart.js သို့ပို့ဆောင်ရန်လိုအပ်သည်။ အောက်ပါကုဒ်များသည်အရောင်းအချက်အလက်များကိုမည်သို့ကိုင်တွယ်ရမည်ကိုပြသသည်။

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

  var labels = [];
  var values = [];

  // 遍历အချက်များ并提取销售日期和ရောင်းခြင်း
  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', // type အမျိုးအစား
    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>

အခြားဒေတာအပြောင်းအလဲနဲ့နှင့် display ကို

အခြေခံဇယားပြသမှုအပြင်အချက်အလက်များကိုအမှန်တကယ်လိုအပ်ချက်များနှင့်အညီထပ်မံပြုလုပ်နိုင်သည်။ ဥပမာအားဖြင့်, သင်စီစစ်, ဒေတာကိုစီရန်သို့မဟုတ်ဇယားမှပိုမိုအရန်သတင်းအချက်အလက်ထည့်သွင်းနိုင်ပါတယ်။

အကျဉ်းချုပ်

PHP နှင့် Chart.js များကိုပေါင်းစပ်ခြင်းအားဖြင့်ကျွန်ုပ်တို့သည်ကြွယ်ဝသောလှပသောဒေတာဇယားပြ display functions များကိုအလွယ်တကူဖွံ့ဖြိုးနိုင်သည်။ ၎င်းသည်ဘားဇယား, လိုင်းဇယားသို့မဟုတ် Pie ဇယား, chart.js သည်ကြီးမားသောပြောင်းလွယ်ပြင်လွယ်မှုဖြစ်စေနိုင်သည်။

ဤဆောင်းပါးသည်သင့်အတွက်အထောက်အကူဖြစ်လိမ့်မည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။ PHP နှင့် Chart.js တို့နှင့်စတင်ရန် PHP နှင့် Chart.js တို့ဖြင့်စတင်ရန်ကူညီလိမ့်မည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။