谷歌图表

စက်တင်ပုံ မှ အလွန်တက်ကြွပုံ အထိ Google ပုံရှင် အချုပ်သို့ အသုံးပြုနိုင်သော ပုံအမျိုးအစား များစွာ ကို ပေးသည်

  • ရွက်ပုံ (Scatter Chart)
  • တက်ကြွပုံ (Line Chart)
  • ဆေးခွက်/ဆေးဆေး (Bar / Column Chart)
  • ပုံနှိပ် (Area Chart)
  • ပုံဘောင် (Pie Chart)
  • ဆီးဆိုး ပုံ (Donut Chart)
  • အဖွဲ့အစည်း ပုံ (Org Chart)
  • မြေမြို့/စစ်မြို့ ပုံ (Map / Geo Chart)

Google Chart ကို အသုံးပြုခြင်း ဘယ်လိုဖြစ်သလဲဆိုတာ?

သင် ပြင်ပတ်သတ် စားပွဲ တွင် Google Chart ကို အသုံးပြုရန် လို့ပြန့်နှဲ့ချက် ကို တင်သွင်းပါ：

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google ဂျာရမ်ပုံ အသုံးပြုခြင်း ငြိမ်သက်နေပါသည်

သာ တစ်ခု ထိုးသွင်းပါ <div> အဆိုပါ အရာကို ပြသပါ

<div id="myChart" style="max-width:700px; height:400px"></div>

div အား ကိုင်းချုပ်သော ID တစ်ခု ရှိသင့်မည်

နောက်ပြီးတော့ Google Graph API ကို တင်သွင်းပါ

  1. Visualization API နှင့် corechart ပွဲစည် တွေ ကို တင်သွင်းပါ
  2. ပြင်ဆင်ချက် တစ်ခု ကို သတ်မှတ်ပြီး API တင်သွင်းပြီးနောက် အသုံးပြုပါ
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

就这样！

折线图

源代码

function drawChart() {
// 设置数据
var data = google.visualization.arrayToDataTable([
  ['价格', '尺寸'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// 设置选项
var options = {
  title: '房价与房屋面积',
  hAxis: {title: '平方米'},
  vAxis: {title: '百万价格'},
  legend: 'none'
};
// 绘制图表
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

亲自试一试

散点图

လို့မူ၊ အစီအစဉ်အကျယ်အဝန်း ပုံသဏ္ဍာန် ပြုလုပ်ရန်散点图လို့မူ၊ ပြင်းပြင်းချင်း google.visualization ပြောင်းလဲခြင်း ScatterChart：

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

亲自试一试

条形图

源代码

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['意大利', 55],
  ['法国', 49],
  ['西班牙', 44],
  ['美国', 24],
  
]
var options = {
  title: '全球葡萄酒生产'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

亲自试一试

ပုံသဏ္ဍာန်

လို့မူ၊ အစီအစဉ်အကျယ်အဝန်း ပုံသဏ္ဍာန် သို့ ပြောင်းလဲရန်ပုံသဏ္ဍာန်လို့မူ၊ အသုံးပြုရန်:

google.visualization.PieChart

ပြောင်းလဲခြင်း:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

亲自试一试

3D ပုံသဏ္ဍာန်

ကို 3D ပုံစံ ဖော်ပြရန် လို့မူ၊ ပြင်းပြင်းချင်း ပြင်းပြင်းသာ ပြင်းပြင်းချင်း is3D: true 添加到选项中：

var options = {
  title: '全球葡萄酒生产',
  is3D: true
};

亲自试一试