PHP နှင့် vue.js နှင့်အတူတုန့်ပြန်စာရင်းဇယားများကိုမည်သို့တည်ဆောက်မည်နည်း ဒေတာမြင်ကွင်းကိုသင်ခန်းစာ

နိဒါန်း

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

ပြင်ဆင်မှု

vue.js ကို install လုပ်ပါ

စာရင်းအင်းဆိုင်ရာဇယားကိုမဖန်တီးမီသင်ပထမ ဦး ဆုံး vue.js ကို install လုပ်ဖို့လိုအပ်ပါတယ်။ NPM မှတဆင့် vue.js ကို install လုပ်နိုင်ပါတယ်။

 npm install vue

installation နှင့်ဖွံ့ဖြိုးရေးမှီခို

vue.js အပြင်, WEBPack, vue-loader နှင့် babel စသည့်ဖွံ့ဖြိုးရေးဆိုင်ရာမှီခိုမှုများကိုလည်းသင်တပ်ဆင်ရန်လိုအပ်သည်။

 npm install webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler babel-loader babel-core babel-preset-env --save-dev

vue.js အစိတ်အပိုင်းကိုဖန်တီးပါ

vue.js တွင်အစိတ်အပိုင်းအားလုံးသည်လွတ်လပ်သော vue ဖြစ်ရပ်များဖြစ်သည်။ သင်သည်စီမံကိန်းတည်ဆောက်ပုံများကိုလျင်မြန်စွာတည်ဆောက်ပြီး vue cli tool ကို သုံး. အစိတ်အပိုင်းများကိုဖန်တီးနိုင်သည်။

 npm install -g vue-cli
vue create project-name
cd project-name
npm run serve

အစိတ်အပိုင်းကိုဖန်တီးပြီးသည်နှင့်အမျှဒေတာနှင့်နည်းလမ်းများကို vue ဖြစ်ရပ်များတွင် data and method များကို သတ်မှတ်. စာရင်းအင်းဇယားများထုတ်လုပ်ရန်တင်းပလိတ်ရှိအချက်အလက်များနှင့်နည်းလမ်းများကိုအသုံးပြုနိုင်သည်။

CHART.Js ကိုအသုံးပြုပြီးစာရင်းအင်း charts များကိုဖန်တီးပါ

chart.js ကို install လုပ်ပါ

Chart.js သည် HTML5 Canvam ပတ်တူပေါ်တွင် အခြေခံ. ပွင့်လင်းသောအရင်းအမြစ်ဇယားစာကြည့်တိုက်ဖြစ်သည်။ Chart.js များကို NPM မှတဆင့်အလွယ်တကူတပ်ဆင်နိုင်သည်။

 npm install chart.js --save

vue အစိတ်အပိုင်းအတွက် chart.js ကိုအသုံးပြုပြီး

Chart.js ကို vue အစိတ်အပိုင်းများဖြင့်အသုံးပြုသည့်အခါ JS file ကို Chart.js file ကိုမိတ်ဆက်ပေးရန်နှင့်ဒေတာနှင့်ရွေးချယ်စရာများကို configure လုပ်ပါ။

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

<script>
import Chart from 'chart.js';
export default {
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: [65, 59, 80, 81, 56, 55, 40]
          }
        ]
      }
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = document.getElementById('chart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: this.chartData,
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    }
  }
};
</script>

အကျဉ်းချုပ်

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