Dynamic Chart Display အတွက် PHP နှင့် Vue နှင့်အတူ php နှင့် vue ကို အသုံးပြု. PHP နှင့် Vue

Charts သည်ခေတ်သစ်ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု၏အရေးပါမှုကိုပြသည်

လက်ရှိ Web Development တွင် Gravel Display သည်အချက်အလက်အမျိုးမျိုးကိုအလိုအလျောက်နားလည်သဘောပေါက်ရန်နှင့်ခွဲခြမ်းစိတ်ဖြာသုံးစွဲသူများအားကူညီနိုင်သည့်အလွန်လက်တွေ့ကျသောအင်္ဂါရပ်တစ်ခုဖြစ်သည်။ ဤဆောင်းပါးသည် PHP ကို vue.js နှင့်မည်သို့ပေါင်းစပ်ပြီး ECHARTS မျက်နှာပြင်ကိုရရှိရန် ECHARTS နှင့်အတူ Vue.js နှင့်မည်သို့ပေါင်းစပ်ရမည်ကိုနားလည်ရန်တစ်ဆင့်ချင်းကြည့်ပါလိမ့်မည်။

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

Ettarts သည်ကြွယ်ဝသောနှင့်အသုံးပြုရလွယ်ကူသောပွင့်လင်းသောအရင်းအမြစ်ဇယားစာကြည့်တိုက်အမျိုးအစားများကိုအထောက်အကူပြုသော approxt source chart စာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်စာအမျိုးအစားများနှင့်အပြန်အလှန်ဆက်သွယ်မှုများကိုထောက်ပံ့သည်။ CDN မှတဆင့် Echars မှ ECT များကိုမိတ်ဆက်ပေးနိုင်သည်သို့မဟုတ်ဒေသခံဖြန့်ကျက်မှုအတွက်စာကြည့်တိုက်ဖိုင်များကိုဒေါင်းလုပ်ဆွဲနိုင်သည်။

Backend Data Interface ၏ဖွံ့ဖြိုးတိုးတက်မှု

PHP ကိုသုံးရန် PHP ကို သုံး. PDO မှတစ်ဆင့်ဒေတာဘေ့စ်ကို ဆက်သွယ်. ဒေတာများကိုမေးမြန်းပြီးဒေတာကိုရှာဖွေပါ။ ဤတွင်နမူနာကုဒ်ဖြစ်သည်။

<?php
// ဒေတာဘေ့စ်ကိုဆက်သွယ်ပါ
$dsn = 'mysql:host=localhost;dbname=test;charset=utf8';
$username = 'root';
$password = '';
$db = new PDO($dsn, $username, $password);

// ဒေတာရှာဖွေမှုဒေတာ
$sql = 'SELECT * FROM data';
$stmt = $db-> Query ($ SQL);
$ ဒေတာ = $ stmt-> fetchall (pdo :: fetter_assoc);

// ပြန်လာဒေတာ header (&#39;အကြောင်းအရာအမျိုးအစား: လျှောက်လွှာ / JSONS);
echo json_entode ($ ဒေတာ);
>

ဤကုဒ်သည်ဒေတာဘေ့စ်နှင့်ချိတ်ဆက်ရန်နှင့် SQL Query များနှင့်ချိတ်ဆက်ရန် PDO ကိုမည်သို့အသုံးပြုရမည်ကိုပြသသည်။

Front-End Vue အစိတ်အပိုင်းများသည်အချက်အလက်တောင်းဆိုမှုနှင့်ဇယားပြန်ဆိုချက်ကိုအကောင်အထည်ဖော်ကြသည်

ရှေ့တန်းတွင်ကျွန်ုပ်တို့သည် Vue.js ကိုကြည့်ရှုရန် Vue.js ကို အသုံးပြု. PHP interface မှပေးသောအချက်အလက်များကိုရယူရန် HTTP တောင်းဆိုမှုများကိုပေးပို့ရန် AXIOS ကိုသုံးပါ။ ဥပမာများမှာအောက်ပါအတိုင်းဖြစ်သည် -

<template>
  <div id="app">
    <div id="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import axios from 'axios';

export default {
  mounted() {
    // ပေးပို့HTTPဒေတာရရှိရန်တောင်းဆိုခြင်း
    axios.get('/api/data.php')
      .then(response => {
        const data = response.data;

        // ဇယားကိုစတင်ပါ
        const chart = echarts.init(document.getElementById('chart'));
        const options = {
          // အချက်အလက်များအပေါ် အခြေခံ. ဇယားအမျိုးအစားများနှင့်စတိုင်များကို configure လုပ်ပါ
          // နမူနာ configuration ကိုလိုအပ်ချက်များနှင့်အညီချိန်ညှိနိုင်သည်
          xAxis: {
            type: 'category',
            data: data.map(item => item.name) // အဲဒီမှာယူဆတယ်nameလယ်ကွင်း
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data.map(item => item.value), // အဲဒီမှာယူဆတယ်valueလယ်ကွင်း
            type: 'bar'
          }]
        };
        chart.setOption(options);
      })
      .catch(error => {
        console.error(error);
      });
  }
}
</script>

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

အကျဉ်းချုပ်

PHP နှင့် Vue.js များကိုပေါင်းစပ်ရန် Graph display function ကိုနားလည်ရန်, ၎င်းသည်ခေတ်သစ်ရှေ့တန်းနည်းပညာမှတစ်ဆင့် graph ၏ back-end အချက်အလက်များကိုထိထိရောက်ရောက်ဖန်တီးနိုင်သည်။ အစွမ်းထက်သောဇယားစာကြည့်တိုက်တစ်ခုအနေဖြင့် Echarts များသည်ဇယားအမျိုးအစားများနှင့်ကြွယ်ဝသောအပြန်အလှန်ဆက်သွယ်မှုအမျိုးမျိုးကိုထောက်ပံ့ပေးပြီးထိုသို့သောအင်္ဂါရပ်များကိုအကောင်အထည်ဖော်ရန်အတွက်အကောင်းဆုံးဖြစ်သည်။ ဤဆောင်းပါးသည်သင်၏ကိုယ်ပိုင်ပြောင်းလဲနေသောဒေတာဇယားကိုလျင်မြန်စွာတည်ဆောက်ရန်ကူညီနိုင်သည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။