Google Chart
ရိုးရှင်းသော မျဉ်းဇယားများမှ ရှုပ်ထွေးသော အထက်တန်းကျသော သစ်ပင်မြေပုံများအထိ၊ Google Chart ပြခန်းသည် အဆင်သင့်သုံးနိုင်သော ဇယားအမျိုးအစားများစွာကို ပေးဆောင်သည်-
- ဖြန့်ကြဲဇယား
- လိုင်းဇယား
- ဘား/ကော်လံဇယား
- ဧရိယာဇယား
- Pie Chart
- ဒိုးနပ်ဇယား
- အဖွဲ့အစည်းဇယား
- မြေပုံ / Geo Chart
Google Chart ကို ဘယ်လိုသုံးမလဲ။
သင့်ဝဘ်စာမျက်နှာတွင် Google Chart ကိုအသုံးပြုရန်၊ ဇယားဆွဲတင်သူထံ လင့်ခ်တစ်ခုထည့်ပါ -
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart သည် အသုံးပြုရလွယ်ကူသည်။
ဇယားကိုပြသရန် <div> ဒြပ်စင် တစ်ခုကို ထည့်လိုက်ရုံဖြင့် -
<div id="myChart" style="max-width:700px; height:400px"></div>
<div> ဒြပ်စင်တွင် တစ်မူထူးခြားသော ID ရှိရမည်။
ထို့နောက် Google Graph API ကို တင်ပါ-
- Visualization API နှင့် corechart အထုပ်ကို တင်ပါ။
- API ကိုဖွင့်သောအခါတွင်ခေါ်ဆိုရန်ပြန်ခေါ်သည့်လုပ်ဆောင်ချက်ကိုသတ်မှတ်ပါ။
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
ဒါပါပဲ!
စာကြောင်းဂရပ်
အရင်းအမြစ်ကုဒ်
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
ကွက်ကျားကွက်များ
တူညီသောဒေတာ ကို ဖြန့ ်ခွဲရန်၊ google.visualization ကို LineChart သို့ ပြောင်းပါ-
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
ဘားဇယားများ
အရင်းအမြစ်ကုဒ်
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
စက်ဝိုင်းပုံများ
Bar Chart ကို Pie chart သို့ ပြောင်းရန် ၊
google.visualization ကို အစားထိုးပါ။ google.visualization
ဖြင့်
BarChart PieChart
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D Pie
Pie ကို 3D ဖြင့်ပြသရန် is3D ကိုထည့်လိုက်ရုံသာဖြစ်သည်- ရွေးချယ်စရာများအတွက် မှန်သည်-
var options = {
title: 'World Wide Wine Production',
is3D: true
};