ယနေ့သတင်းအချက်အလက်ခေတ်တွင်ဒေတာမြင်ကွင်းသည်ထုတ်ကုန်များသို့မဟုတ်စီမံကိန်းများကိုတိုင်းတာရန်အရေးကြီးသောညွှန်ကိန်းများထဲမှတစ်ခုဖြစ်လာသည်။ developer တစ်ယောက်အနေနဲ့မှန်ကန်သောကိရိယာများနှင့်နည်းစနစ်များပါသောဒေတာဇယားများကိုတင်ပြရန်အလွန်အရေးကြီးသည်။ အစွမ်းထက်သော server-side scripting language တစ်ခုအနေဖြင့် PHP သည်ဒေတာများကိုအလွယ်တကူဖော်ပြနိုင်သည်။ ဤဆောင်းပါးသည် PHP နှင့် Chart.js ကိုမည်သို့အသုံးပြုရမည်ကိုအသေးစိတ်ရှင်းပြပါလိမ့်မည်။
လက်ရှိတွင် Google Charts, Chart.js စသည့်စျေးကွက်တွင်ရွေးချယ်ရန်အတွက် Open Source Data Chart Libraries အမျိုးမျိုးရှိသည်။
ဤဆောင်းပါးတွင် PHP နှင့်ပေါင်းစပ်ပြီးဒေတာဇယား display function များကိုမည်သို့ဖွံ့ဖြိုးတိုးတက်မည်ကိုပြသရန်ဥပမာတစ်ခုအဖြစ် chart.j များကိုဥပမာတစ်ခုအဖြစ်ယူပါမည်။ Chart.js သည်ပေါ့ပါးသော JavaScript ဇယားစာကြည့်တိုက်စာကြည့်တိုက်စာကြည့်တိုက်အမျိုးအစားများကိုထောက်ပံ့ပေးပြီးအဓိကခေတ်မီ browser များနှင့်သဟဇာတဖြစ်သည်။
ပထမ ဦး စွာကျွန်ုပ်တို့သည်ဇယားကွက်ကိုစီမံကိန်းသို့မိတ်ဆက်ပေးရန်လိုအပ်သည်။ ၎င်းကို CDN မှတစ်ဆင့်မိတ်ဆက်ပေးနိုင်သည်, ဒေါင်းလုပ် လုပ်. download လုပ်. တည်ခင်း။ ည့်ခံနိုင်သည်။
<!DOCTYPE html>
<html>
<head>
<title>ဒေတာဇယားပြသမှု</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
ထို့နောက်ဒေတာဘေ့စ်စားပွဲတွင်အရောင်းအချက်အလက်များပါ 0 င်သည့်ဒေတာများပါ 0 င်သည်ဟုယူဆကြပါစို့။ ဒေတာများကိုဒေတာဘေ့စ်မှဒေတာများကို PHP မှတစ်ဆင့်ရယူရန်လိုအပ်ပြီးတင်ဆက်ရန်အတွက်ရှေ့တန်းဇယားသို့ကူးယူရန်လိုအပ်သည်။
<?php
// သင်ဒေတာဘေ့စ်နှင့်ချိတ်ဆက်ထားကြောင်းယူဆ,နှင့်ဒေတာဘေ့စ connection အရာဝတ်ထုကိုရယူပါ$conn
$sql = "SELECT * FROM sales";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// ဒေတာကိုပြောင်းပါJSONပမာဏ
$jsonData = json_encode($data);
?>
ထို့နောက် PHPT မှ PHPS မှ PHPT.Js မှ chart.js သို့ပို့ဆောင်ရန်လိုအပ်သည်။ အောက်ပါကုဒ်များသည်အရောင်းအချက်အလက်များကိုမည်သို့ကိုင်တွယ်ရမည်ကိုပြသသည်။
<script>
// ရယူPHPလွန်သွားတယ်JSONအချက်များ
var data = <?php echo $jsonData; ?>;
var labels = [];
var values = [];
// 遍历အချက်များ并提取销售日期和ရောင်းခြင်း
data.forEach(function(item) {
labels.push(item.date);
values.push(item.amount);
});
// ဖန်တီးChartအရာဝတ်ထုနှင့်ဇယားကို render
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar', // type အမျိုးအစား
data: {
labels: labels,
datasets: [{
label: 'ရောင်းခြင်း',
data: values,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
အခြေခံဇယားပြသမှုအပြင်အချက်အလက်များကိုအမှန်တကယ်လိုအပ်ချက်များနှင့်အညီထပ်မံပြုလုပ်နိုင်သည်။ ဥပမာအားဖြင့်, သင်စီစစ်, ဒေတာကိုစီရန်သို့မဟုတ်ဇယားမှပိုမိုအရန်သတင်းအချက်အလက်ထည့်သွင်းနိုင်ပါတယ်။
PHP နှင့် Chart.js များကိုပေါင်းစပ်ခြင်းအားဖြင့်ကျွန်ုပ်တို့သည်ကြွယ်ဝသောလှပသောဒေတာဇယားပြ display functions များကိုအလွယ်တကူဖွံ့ဖြိုးနိုင်သည်။ ၎င်းသည်ဘားဇယား, လိုင်းဇယားသို့မဟုတ် Pie ဇယား, chart.js သည်ကြီးမားသောပြောင်းလွယ်ပြင်လွယ်မှုဖြစ်စေနိုင်သည်။
ဤဆောင်းပါးသည်သင့်အတွက်အထောက်အကူဖြစ်လိမ့်မည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။ PHP နှင့် Chart.js တို့နှင့်စတင်ရန် PHP နှင့် Chart.js တို့ဖြင့်စတင်ရန်ကူညီလိမ့်မည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။