အင်တာနက်နည်းပညာဖွံ့ဖြိုးတိုးတက်မှုနှင့်အတူဒေတာမြင်ကွင်းသည်အချက်အလက်ခွဲခြမ်းစိတ်ဖြာခြင်းနှင့်ဆုံးဖြတ်ချက်ချခြင်း၏မရှိမဖြစ်လိုအပ်သောအစိတ်အပိုင်းတစ်ခုဖြစ်လာသည်။ စာရင်းအင်းဇယားများသည်ထိုးထွင်းသိမြင်ခြင်းနှင့်နားလည်လွယ်သော display method ကိုအနေဖြင့်ကျယ်ကျယ်ပြန့်ပြန့်အသုံးပြုခဲ့သည်။ Ettarts သည်ကြွယ်ဝသော, ပွင့်လင်းသောအရင်းအမြစ်ဇယားစာကြည့်တိုက်သည်ကြွယ်ဝသော chart အမျိုးအစားများနှင့်အင်္ဂါရပ်များနှင့်အတူစာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်နှင့် developer များကကျယ်ပြန့်စွာမျက်နှာသာပေးသည်။
ဤဆောင်းပါးသည်တိကျသောဥပမာများက Ents နှင့် PHP တို့အားစာရင်းများနှင့်ဒဏ် leg ာရီများနှင့်စာရင်းဇယားများနှင့်အတူစာရင်းဇယားဇယားများထုတ်လုပ်ရန်မည်သို့အသုံးပြုရမည်ကိုရှင်းပြရန်တိကျသောဥပမာများကိုပေါင်းစပ်ပါမည်။
ပထမ ဦး စွာ 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 ဥပမာအား 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 များအပေါ် အခြေခံ. စာရင်းအင်းဇယားများကိုအကောင်အထည်ဖော်ရန်အဓိကအဆင့်များ -
အထက်ပါအဆင့်များမှတဆင့်သင်သည်ဒေတာမျက်နှာပြင်အကျိုးသက်ရောက်မှုနှင့်အသုံးပြုသူအတွေ့အကြုံများကိုတိုးတက်စေရန်သင်၏လိုအပ်ချက်များနှင့်အညီကွဲပြားသောစာရင်းအင်းဆိုင်ရာဂရပ်ဖစ်များကိုစိတ်ကြိုက်ပြုလုပ်နိုင်သည်။ ဤဆောင်းပါးသည်သင်၏ဒေတာမြင်ကွင်းကိုစီမံကိန်းအတွက်အထောက်အကူဖြစ်လိမ့်မည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။