လက်ရှိတည်နေရာ: ပင်မစာမျက်နှာ> နောက်ဆုံးရဆောင်းပါးများစာရင်း> PHP Interface နှင့်အတူ Etp Interface ကို အသုံးပြု. Labars နှင့် Legends များဖြင့်စာရင်းအင်းနှင့်ဒဏ် leg ာရီများဖြင့်စာရင်းအင်းဆိုင်ရာဇယားများကိုအလွယ်တကူထုတ်လုပ်နိုင်သည်

PHP Interface နှင့်အတူ Etp Interface ကို အသုံးပြု. Labars နှင့် Legends များဖြင့်စာရင်းအင်းနှင့်ဒဏ် leg ာရီများဖြင့်စာရင်းအင်းဆိုင်ရာဇယားများကိုအလွယ်တကူထုတ်လုပ်နိုင်သည်

M66 2025-07-26

Etts နှင့် PHP interfaces များကို အသုံးပြု. တံဆိပ်များနှင့်ဒဏ် leg ာရီများဖြင့်စာရင်းအင်းဆိုင်ရာဇယားများကိုထုတ်လုပ်ပါ

အင်တာနက်နည်းပညာဖွံ့ဖြိုးတိုးတက်မှုနှင့်အတူဒေတာမြင်ကွင်းသည်အချက်အလက်ခွဲခြမ်းစိတ်ဖြာခြင်းနှင့်ဆုံးဖြတ်ချက်ချခြင်း၏မရှိမဖြစ်လိုအပ်သောအစိတ်အပိုင်းတစ်ခုဖြစ်လာသည်။ စာရင်းအင်းဇယားများသည်ထိုးထွင်းသိမြင်ခြင်းနှင့်နားလည်လွယ်သော display method ကိုအနေဖြင့်ကျယ်ကျယ်ပြန့်ပြန့်အသုံးပြုခဲ့သည်။ Ettarts သည်ကြွယ်ဝသော, ပွင့်လင်းသောအရင်းအမြစ်ဇယားစာကြည့်တိုက်သည်ကြွယ်ဝသော chart အမျိုးအစားများနှင့်အင်္ဂါရပ်များနှင့်အတူစာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်နှင့် developer များကကျယ်ပြန့်စွာမျက်နှာသာပေးသည်။

ဤဆောင်းပါးသည်တိကျသောဥပမာများက Ents နှင့် PHP တို့အားစာရင်းများနှင့်ဒဏ် leg ာရီများနှင့်စာရင်းဇယားများနှင့်အတူစာရင်းဇယားဇယားများထုတ်လုပ်ရန်မည်သို့အသုံးပြုရမည်ကိုရှင်းပြရန်တိကျသောဥပမာများကိုပေါင်းစပ်ပါမည်။

Echarts အရင်းအမြစ်ဖိုင်များကိုမိတ်ဆက်ပေးပါ

ပထမ ဦး စွာ ECHARTS နှင့်သက်ဆိုင်သည့်အရင်းအမြစ်များကိုစီမံကိန်းသို့မိတ်ဆက်ပေးရန်လိုအပ်သည်။ နောက်ဆုံးပေါ်ဗားရှင်းကိုတရားဝင်ဝက်ဘ်ဆိုက်သို့မဟုတ် GitHub မှရနိုင်ပြီးစီမံကိန်းလမ်းညွှန်တွင်ထည့်ပြီးသက်ဆိုင်ရာ JS နှင့် CSS ဖိုင်များကို HTML တွင်မိတ်ဆက်ပေးနိုင်သည်။

ဒေတာကိုပြင်ဆင်ပါ

PHP ဘက်တွင်ဒေတာများကိုဒေတာများကိုပုံမှန်အားဖြင့်ဒေတာဘေ့စ်ကိုရိုက်နှက်ခြင်းသို့မဟုတ်ခေါ်ယူခြင်းဖြင့်ရရှိသည်။ နမူနာဒေတာအောက်ပါအတိုင်းဖြစ်သည် -

 $data = [
    ['name' => 'ဒဏ် leg ရီပုံပြင်1', 'value' => 100],
    ['name' => 'ဒဏ် leg ရီပုံပြင်2', 'value' => 200],
    ['name' => 'ဒဏ် leg ရီပုံပြင်3', 'value' => 300],
    // ...
];

ဇယားကွန်တိန်နာတစ်ခုဖန်တီးပါ

HTML ဖိုင်တွင်ဇယားကိုပြသရန်ကွန်တိန်နာတစ်ခုဖန်တီးပါ။

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

ECHARTS နှင့်ဇယားဆွဲခြင်း

ထို့နောက် ECHARTS ဥပမာအား Javascript code မှတဆင့်နှင့်ဇယားကို configure လုပ်ပါ။

 // မိတ်ဆက်ခဲ့သည်EChartsစာကြည့်တိုက်
import echarts from 'echarts';

// ကွန်တိန်နာဒြပ်စင်ကိုရယူပါ
var chartContainer = document.getElementById('chart');

// ဖြစ်ပေါ်လာခြင်းEChartsနမူနာ
var chart = echarts.init(chartContainer);

// configuration ပစ္စည်းများနှင့်ဇယား၏အချက်အလက်များကိုသတ်မှတ်ပါ
var option = {
    title: {
        text: 'စာရင်းအင်းဇယား',
        subtext: 'ဒေတာအရင်းအမြစ်: PHPထိသိျက်နှာ',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: <?=json_encode(array_column($data, 'name'))?>,
    },
    series: [
        {
            name: 'Tag Name',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: <?=json_encode($data)?>,
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)',
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                },
            },
        },
    ],
};

// သင်သတ်မှတ်ထားသော configuration ပစ္စည်းများနှင့်ဒေတာများကို အသုံးပြု. ဇယားများကိုပြပါ
chart.setOption(option);

အကျိုးသက်ရောက်မှုခွဲခြမ်းစိတ်ဖြာအကောင်အထည်ဖော်

Code တွင် Echarts စာကြည့်တိုက်ကို ဦး စွာမိတ်ဆက်ပေးပြီးဇယားကွန်တိန်နာကိုရယူပါ Option Object သည်ဇယား၏ခေါင်းစဉ်, ချက်ချင်းအကွက်, ဤနေရာတွင် Pie charts များကိုအသုံးပြုသည်။ PHP interface မှတစ်ဆင့် dynamically ထုတ်ပေးသောအချက်အလက်များမှဆင်းသက်လာသည့်တံဆိပ်များနှင့်ဒဏ် leg ာရီများကိုအသုံးပြုသည်။

နောက်ဆုံးတွင်ဇယား၏ပြန်ဆိုမှုကိုဖြည့်စွက်ရန် Setoption () နည်းလမ်းကိုခေါ်ပါ။

အကျဉ်းချုပ်

Echarts နှင့် PHP interfaces များအပေါ် အခြေခံ. စာရင်းအင်းဇယားများကိုအကောင်အထည်ဖော်ရန်အဓိကအဆင့်များ -

  • Echarts အရင်းအမြစ်ဖိုင်များကိုမိတ်ဆက်ပေးခြင်း,
  • ဇယားအချက်အလက်များကို JSON format ဖြင့်ပြင်ဆင်ပါ။
  • ဇယားကွန်တိန်နာ၏ HTML element များကိုဖန်တီးပါ။
  • ဇယားများကိုအစပျိုးခြင်းနှင့် configure လုပ်ရန် JavaScript ကုဒ်ကိုရေးပါ။
  • ဇယားဆွဲရန် setoption () နည်းလမ်းကိုခေါ်ဆိုပါ။

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