စွမ်းဆောင်ရည်မြင့်မားသော Data Chart Display ကိုရရှိရန် PHP နှင့် Vue.js ပေါင်းစပ်မှုလမ်းညွှန်ရန်လမ်းညွှန်

နိဒါန်း

Business Systems များသည်သူတို့၏အချက်အလက်ပြုပြင်ခြင်းစွမ်းရည်များကိုဆက်လက်တိုးတက်အောင်ဆက်လက်ပြုလုပ်နေစဉ် developer များကရှေ့တန်းတွင်စနစ်တကျနှင့်ကြီးမားသောအချက်အလက်အကြောင်းအရာများကိုတင်ပြရန်လိုအပ်သည်။ အထူးသဖြင့်လစဉ်အရောင်းနှင့်လက်လှမ်းမီမှုခေတ်ရေစီးကြောင်းကဲ့သို့သောစာရင်းအင်းအချက်အလက်များနှင့်ရင်ဆိုင်နေရသောအခါ, ဤဆောင်းပါးသည် PHP back-end data interface ကို vue.js ရှေ့တန်းမှအခြေခံမူဘောင်နှင့်ပေါင်းစပ်ပြီးတုန့်ပြန်မှုကြီးမားသောဒေတာစာရင်းဇယားဇယားများတည်ဆောက်ရန် Chart.js စာကြည့်တိုက်နှင့်ပူးပေါင်းဆောင်ရွက်ရန်မိတ်ဆက်ပေးလိမ့်မည်။

1 ။ ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်နှင့်မှီခိုစာကြည့်တိုက်ပြင်ဆင်မှု

coding မစတင်မီသင်၏ဖွံ့ဖြိုးရေးပတ် 0 န်းကျင်သည်အောက်ပါအခြေအနေများနှင့်ကိုက်ညီကြောင်းသေချာပါစေ။

• PHP 7.4 နှင့်အထက်
• vue.js ဗားရှင်း 3 သို့မဟုတ် 2 ရရှိနိုင်ပါသည်
• Chart.js 3 နှင့်အထက်

Chart.js သည်ပြောင်းလွယ်ပြင်လွယ် HTML5 ဇယားစာကြည့်တိုက်ဖြစ်သည်။ ဒီဆောင်းပါးမှာ CDN မှတစ်ဆင့်မိတ်ဆက်ပေးသည်။

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2 ။ PHP Code ကို Backend PHP Code: Extract စာရင်းဇယား

ဥပမာတွင်ဒေတာဘေ့စ်မှအရောင်းမှတ်တမ်းများကိုရှာဖွေခြင်းနှင့်ရှေ့တန်းခေါ်ဆိုမှုအတွက် JSON တွင်ရလဒ်များကိုရှာဖွေခြင်း

 
// ဒေတာဘေ့စ်ကိုဆက်သွယ်ပါ
$conn = new mysqli($servername, $username, $password, $dbname);

// ဆက်သွယ်မှုကိုစစ်ဆေးပါ
if ($conn->connect_error) {
    die("ဆက်သွယ်မှုမအောင်မြင်ပါ: " . $conn->connect_error);
}

// စုစုပေါင်းလစဉ်ရောင်းအားကိုစစ်ဆေးပါ
$sql = "SELECT SUM(amount) AS total_amount, MONTH(date) AS month FROM sales GROUP BY MONTH(date)";
$result = $conn->query($sql);

// ရလဒ်ခင်းကျင်းတည်ဆောက်ပါ
$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// ထုတ်လုပ်ခြင်းJSONအချက်များ
echo json_encode($data);

3 ။ Front-end vue.js: histogram rendergram

Vue.js သည် PHP backend နှင့် charts မှအချက်အလက်ရယူရန်တာ 0 န်ရှိသည်။ အောက်ဖော်ပြပါသည်ပုံမှန်အစိတ်အပိုင်းကိုအကောင်အထည်ဖော်မှုဖြစ်သည်။

 
<template>
  <div>
    <canvas id="chart"></canvas>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  mounted() {
    axios.get('http://localhost/api/sales.php')
      .then((response) => {
        this.createChart(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  },
  methods: {
    createChart(data) {
      const labels = data.map(item => item.month);
      const values = data.map(item => item.total_amount);

      new Chart('chart', {
        type: 'bar',
        data: {
          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>
<p>

4 ။ လက်တွေ့ကျသောစီမံကိန်းအကြံပြုချက်များ

Big Data Carmarios ရှိဇယားများ၏ rendering ၏လုပ်ဆောင်မှုကိုပိုမိုတိုးတက်စေရန်အတွက်အောက်ပါနည်းဗျူဟာများကိုပေါင်းစပ်နိုင်သည်။

• Pagination သို့မဟုတ် server-side စုစည်းရေးအပြောင်းအလဲနဲ့ - ဒေတာအားလုံးကိုတစ်ပြိုင်နက်တည်းတင်ခြင်းကိုရှောင်ပါ။
• Cache အတွက်အသုံးများသောမေးမြန်းချက်များ - ထပ်ခါတလဲလဲလက်လှမ်းမီမှုနှုန်းမြင့်မားသောကိန်းဂဏန်းများနှင့်စာရင်းဇယားများကိုသိုလှောင်ရန် redis ကို သုံး. redis ကိုသုံးနိုင်သည်။
• ရှေ့ဆုံးအဆုံးတွင်ပျင်းရိလာသည့်ဇယားများ - စာမျက်နှာ၏ပထမဆုံးမျက်နှာပြင်၏အမြန်နှုန်းကိုတိုးတက်စေရန် 0 ယ်လိုအားကိုပြန်ဆိုပါ။

အကျဉ်းချုပ်

PHP ၏အစွမ်းထက်သောဒေတာလုပ်ဆောင်နိုင်စွမ်းကို vue.js 'ပြောင်းလွယ်ပြင်လွယ်ရှေ့ဆက်အစိတ်အပိုင်းများနှင့်ပေါင်းစပ်ပြီး chart.js visual chart နှင့်ပေါင်းစပ်ပြီး chart.js vegual charts နှင့်ပေါင်းစပ်နိုင်သည်။ ဤနည်းလမ်းသည် e-commerce, ဘဏ် financial ာရေးခွဲခြမ်းစိတ်ဖြာခြင်း, အသုံးပြုသူအပြုအမူခြေရာခံခြင်းနှင့်အခြားအခြေအနေများတွင်အထူးလက်တွေ့ကျသည်။ ဤသင်ခန်းစာသည်သင်၏စီမံကိန်းကိုကူညီလိမ့်မည်ဟုမျှော်လင့်ပါသည်။