ภาพรวม
ขนาดในข้อมูลมักแสดงในแกน แนวนอน และแนวตั้ง เช่น แผนภูมิพื้นที่ แผนภูมิแท่ง แผนภูมิแท่งเทียน แผนภูมิคอลัมน์ แผนภูมิผสม แผนภูมิเส้น แผนภูมิพื้นที่แบบขั้นบันได และแผนภูมิกระจาย
เมื่อสร้างแผนภูมิด้วยแกน คุณจะปรับแต่งคุณสมบัติบางอย่างได้ ดังนี้
- ไม่ต่อเนื่องกับแบบต่อเนื่อง
- ทิศทาง - คุณสามารถปรับแต่งทิศทางโดยใช้ตัวเลือก hAxis/vAxis.direction
- ตำแหน่งและรูปแบบป้ายกำกับ - คุณสามารถปรับแต่งตำแหน่งและรูปแบบของป้ายกำกับโดยใช้ตัวเลือก hAxis/vAxis.textPosition และ hAxis/vAxis.textStyle
- ข้อความและรูปแบบชื่อแกน - คุณสามารถปรับแต่งข้อความและรูปแบบของชื่อแกนได้โดยใช้ตัวเลือก hAxis/vAxis.title และ hAxis/vAxis.titleTextStyle
- สเกลแกน - คุณตั้งค่าสเกลของแกนเป็นสเกลลอการิทึม (log) ได้โดยใช้ตัวเลือก hAxis/vAxis.logScale หรือ hAxis/vAxis.scaleType
- ดูรายการตัวเลือกการกำหนดค่าแกนทั้งหมดได้ที่ตัวเลือก hAxis และ vAxis ในเอกสารประกอบสำหรับแผนภูมิที่ต้องการ
คำศัพท์
แกนหลัก/แกนรอง:
- แกนหลักคือแกนตามการวางแนวธรรมชาติของแผนภูมิ สำหรับแผนภูมิเส้น พื้นที่ คอลัมน์ แผนภูมิผสม พื้นที่ขั้นบันได และแผนภูมิแท่งเทียน นี่คือแกนแนวนอน สำหรับแผนภูมิแท่ง ไอคอนจะเป็นแนวตั้ง แผนภูมิกระจายและแผนภูมิวงกลมไม่มีแกนหลัก
- แกนรองคืออีกแกนหนึ่ง
แกนที่ไม่ต่อเนื่อง/ต่อเนื่อง:
- แกนที่ไม่ต่อเนื่องมีจำนวนจำกัดของค่าที่เว้นระยะห่างเท่าๆ กัน ซึ่งเรียกว่า "หมวดหมู่"
- แกนต่อเนื่องมีค่าที่เป็นไปได้ไม่สิ้นสุด
ไม่ต่อเนื่องกับแบบต่อเนื่อง
แกนหลักของแผนภูมิอาจแยกไม่ต่อเนื่องหรือต่อเนื่อง เมื่อใช้แกนที่แยกกัน จุดข้อมูลของแต่ละชุดจะมีระยะห่างเท่าๆ กันทั่วทั้งแกนตามดัชนีแถว เมื่อใช้แกนต่อเนื่อง จุดข้อมูลจะมีตำแหน่งตามค่าโดเมน
นอกจากนี้ การติดป้ายกำกับก็แตกต่างกันด้วย ในแกนที่แยกจากกัน ชื่อหมวดหมู่ (ที่ระบุในคอลัมน์โดเมนของข้อมูล) จะถูกใช้เป็นป้ายกำกับ ในแกนต่อเนื่อง ป้ายกำกับจะสร้างขึ้นโดยอัตโนมัติ แผนภูมิจะแสดงเส้นตารางกริดที่มีระยะห่างเท่าๆ กัน โดยเส้นตารางแต่ละเส้นจะติดป้ายกำกับตามค่าที่แสดง
แกนต่อไปนี้เป็นแบบต่อเนื่องเสมอ
- แผนภูมิฟองอากาศทั้ง 2 แกน
- แกนรอง
ในแผนภูมิเส้น แผนภูมิพื้นที่ แผนภูมิแท่ง แผนภูมิคอลัมน์ และแผนภูมิแท่งเทียน (และแผนภูมิผสมที่มีเฉพาะชุดดังกล่าว) คุณสามารถควบคุมประเภทของแกนหลักได้ดังนี้
- สำหรับแกนที่ไม่ต่อเนื่อง ให้ตั้งค่าประเภทคอลัมน์ข้อมูลเป็น
string - สำหรับแกนต่อเนื่อง ให้ตั้งค่าประเภทคอลัมน์ข้อมูลเป็น
number,date,datetimeหรือtimeofday
| ไม่ต่อเนื่อง / ต่อเนื่อง | ประเภทคอลัมน์แรก | ตัวอย่าง |
|---|---|---|
| ไม่ต่อเนื่อง | string |
|
| ต่อเนื่อง | ตัวเลข |
|
| ต่อเนื่อง | วันที่ |
|
สเกลแกน
คุณสามารถตั้งค่าขนาดของแกนได้โดยใช้ตัวเลือก scaleType
ตัวอย่างเช่น หากต้องการตั้งค่าสเกลของแกนแนวตั้งเป็นสเกลการบันทึก ให้ใช้ตัวเลือกต่อไปนี้
vAxis: {
scaleType: 'log'
}
แผนภูมิเส้นต่อไปนี้แสดงการเติบโตของประชากรโลกในสเกลเชิงเส้น (มาตรฐาน) และสเกลบันทึก
หากข้อมูลมีค่าเป็น 0 หรือเป็นค่าลบ คุณสามารถพล็อตจุดโดยใช้ตัวเลือก scaleType: 'mirrorLog' ในสเกลบันทึกมิเรอร์ ค่าที่พล็อตของจำนวนลบคือลบด้วยบันทึกค่าสัมบูรณ์ของจำนวน ระบบจะพล็อตค่าที่ใกล้เคียงกับ 0 ในการวัดเชิงเส้น
ตัวอย่างต่อไปนี้แสดงจำนวนฟีโบนักชีที่เป็นบวกและลบที่พล็อตในสเกลบันทึกมิเรอร์และสเกลเชิงเส้น
รูปแบบตัวเลข
คุณสามารถควบคุมการจัดรูปแบบหมายเลขป้ายกำกับด้วย hAxis.format และ vAxis.format เช่น {hAxis: { format:'#,###%'} } จะแสดงค่า "1,000%",
"750%" และ "50%" สำหรับค่า 10, 7.5 และ 0.5 คุณยังใส่ค่าที่กำหนดล่วงหน้าต่อไปนี้ได้ด้วย
{format: 'none'}: แสดงตัวเลขที่ไม่มีการจัดรูปแบบ (เช่น 8000000){format: 'decimal'}: แสดงตัวเลขที่มีตัวคั่นหลักพัน (เช่น 8,000,000){format: 'scientific'}: แสดงตัวเลขในรูปแบบสัญกรณ์วิทยาศาสตร์ (เช่น 8E6){format: 'currency'}: แสดงหมายเลขในสกุลเงินท้องถิ่น (เช่น 240,000,000.00 บาท){format: 'percent'}: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%){format: 'short'}: แสดงตัวเลขแบบย่อ (เช่น 8 ล้าน){format: 'long'}: แสดงตัวเลขเป็นคำที่สมบูรณ์ (เช่น 8 ล้าน)
ในแผนภูมิด้านล่าง คุณเลือกค่าที่กำหนดล่วงหน้าได้
หน้าเว็บที่สมบูรณ์ของแผนภูมิด้านบนจะตามมา
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
title: 'GDP of selected countries, in US $millions',
width: 500,
height: 300,
legend: 'none',
bar: {groupWidth: '95%'},
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
document.getElementById('format-select').onchange = function() {
options['vAxis']['format'] = this.value;
chart.draw(data, options);
};
};
</script>
</head>
<body>
<select id="format-select">
<option value="">none</option>
<option value="decimal" selected>decimal</option>
<option value="scientific">scientific</option>
<option value="percent">percent</option>
<option value="currency">currency</option>
<option value="short">short</option>
<option value="long">long</option>
</select>
<div id="number_format_chart">
</body>
</html>
เมื่อใช้รูปแบบที่ใช้ข้อความ (เช่น รูปแบบ long ซึ่งจะแสดงผล 8,000,000 เป็น "8 ล้าน" คุณสามารถแปลสตริงเป็นภาษาอื่นๆ ได้โดยระบุรหัสภาษาเมื่อโหลดไลบรารี Google แผนภูมิ ตัวอย่างเช่น หากต้องการเปลี่ยน "8 ล้าน" เป็นภาษารัสเซีย "8 миллиона" ให้เรียกไลบรารีดังนี้:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
google.charts.setOnLoadCallback(drawMarkersMap);
</script>