မြန်မာဘာသာ
မြန်မာဘာသာ
ဒေတာ - အထူးကြပ်မတ်အသုံးချပရိုဂရမ်များတွင်စာရင်းအင်းဆိုင်ရာဇယားများသည်ဒေတာများကိုအလိုအလျောက်တင်ပြခြင်းနှင့်ခွဲခြမ်းစိတ်ဖြာခြင်းအတွက်အရေးကြီးသောကိရိယာတစ်ခုဖြစ်သည်။ ဤဆောင်းပါးသည် PHP နှင့် Vue.js Technology stacks ကို အသုံးပြု. စာရင်းအင်းဆိုင်ရာဇယား display ကိုအထောက်အကူပြုသည့်လက်တွေ့ကျသော application ကိုအကောင်အထည်ဖော်ရန်နှင့်ပြည့်စုံသောကုဒ်များနှင့်ပါ 0 င်သည်။
စာရင်းအင်းဆိုင်ရာဇယားများသည်အချက်အလက်အမြောက်အများကိုထိရောက်စွာတင်ပြနိုင်ပြီးသုံးစွဲသူများအားအချက်အလက်များကိုအလိုအလျောက်နားလည်ရန်ကူညီခြင်းများပြုလုပ်နိုင်သည်။ ရှေ့တန်းအဆင့်နည်းပညာဖွံ့ဖြိုးတိုးတက်မှုနှင့်အတူ PHP Backend နှင့် Vue.js ရှေ့တန်း၏ရှေ့ပြေးမူဘောင်ကိုပေါင်းစပ်ခြင်းနှင့်အတူရှေ့တန်းနောက်ဆုံးမူဘောင်ကိုပေါင်းစပ်ခြင်း, ဤဆောင်းပါးသည် chart.js အပေါ် အခြေခံ. စာရင်းအင်းဆိုင်ရာဇယားကိုမည်သို့တည်ဆောက်ရမည်ကိုသရုပ်ပြရန်တိကျသောဥပမာများကိုအသုံးပြုလိမ့်မည်။
သင်မစတင်မီအောက်ပါဆော့ (ဖ်) ဝဲနှင့်အစိတ်အပိုင်းများကို 0 င်ရောက်ခြင်းကိုသေချာစွာတပ်ဆင်ထားကြောင်းသေချာပါစေ။
စီမံကိန်းဖိုင်တွဲအသစ်တစ်ခုကိုဖန်တီးပြီးအောက်ပါအဓိကဖိုင်များကိုပြင်ဆင်ပါ။
<!DOCTYPE html>
<html>
<head>
<title>စာရင်းအင်းဇယားလျှောက်လွှာ</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="app">
<chart></chart> <!-- Vue.jsအစိတ်အပိုင်းများ -->
</div>
</body>
</html>
// app.js
Vue.component('chart', {
template: '<canvas id="myChart"></canvas>', // စာရင်းအင်းဇယားများကိုပြသလေ့ရှိသည်canvas
mounted: function() {
this.renderChart(); // စာရင်းအင်းဇယားဆွဲ
},
methods: {
renderChart: function() {
// အသုံးပြုChart.jsစာရင်းအင်းဇယားဆွဲ
var ctx = this.$el.getContext('2d');
new Chart(ctx, {
type: 'bar', // ဘားဇယား
data: {
labels: ['2019-01', '2019-02', '2019-03'], // XAxis Data
datasets: [{
label: 'ရောင်းခြင်း', // ဒေတာအမှတ်အသားများ
data: [150, 200, 100] // YAxis Data
}]
}
});
}
}
});
new Vue({
el: '#app'
});
<template>
<canvas id="myChart"></canvas>
</template>
<script>
export default {
mounted() {
this.renderChart();
},
methods: {
renderChart() {
var ctx = this.$el.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['2019-01', '2019-02', '2019-03'],
datasets: [{
label: 'ရောင်းခြင်း',
data: [150, 200, 100]
}]
}
});
}
}
}
</script>
<style scoped>
canvas {
width: 500px;
height: 300px;
}
</style>
အထက်ပါဖိုင်ကို PHP server ကို စတင်. PHP server ကိုစတင်ပြီးနောက် index.php ကို ကြည့်ရှုရန် browser မှတဆင့် Onex.php ကိုကြည့်ရှုရန် browser မှတဆင့် 0 င်ရောက်ခြင်းကို browser မှတဆင့်ထားပါ။
ဤဆောင်းပါးသည် PHP နှင့် Vue.js ကိုပေါင်းစပ်ပြီးစာရင်းအင်းဆိုင်ရာဇယားများကိုအထောက်အကူပြုသည့် applications များကိုတည်ဆောက်ရန်နှင့်စီမံကိန်းတည်ဆောက်ခြင်း, နမူနာကုဒ်များမှတစ်ဆင့် developer များသည်စာရင်းအင်းဆိုင်ရာဇယားများနှင့်ရှေ့တန်းအဆင့်ပူးပေါင်းဆောင်ရွက်မှုဖြစ်စဉ်များကိုအကောင်အထည်ဖော်ခြင်းနည်းလမ်းများကိုအလျင်အမြန်နားလည်ပြီးအပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသောအတွေ့အကြုံနှင့်ဒေတာအထူးကြပ်မတ်အသုံးချပရိုဂရမ်များကိုတိုးတက်စေသည်။
