ภาพรวม
ขนาดในข้อมูลมักแสดงบนแกน แนวนอน และแนวตั้ง เช่น แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิเทียน, แผนภูมิคอลัมน์, แผนภูมิผสม, แผนภูมิเส้น, แผนภูมิพื้นที่ขั้นตอน และแผนภูมิกระจาย
เมื่อสร้างแผนภูมิด้วยแกน คุณจะปรับแต่งพร็อพเพอร์ตี้บางอย่างได้
- ต่อเนื่องและต่อเนื่อง
- ทิศทาง - คุณสามารถปรับแต่งทิศทางได้โดยใช้ตัวเลือก hAxis/vAxis.direction
- การจัดตําแหน่งและรูปแบบของป้ายกํากับ - คุณสามารถปรับแต่งการกําหนดตําแหน่งและสไตล์ของป้ายกํากับได้โดยใช้ตัวเลือก hAxis/vAxis.textPosition และ hAxis/vAxis.textStyle
- ข้อความและรูปแบบของชื่อแกน - คุณสามารถปรับแต่งข้อความและรูปแบบของชื่อแกนได้โดยใช้ hAxis/vAxis.title และ hAxis/vAxis.titleTextStyle
- สเกลแกน - คุณสามารถตั้งค่าขนาดของแกนเป็นสเกลลอการิทึม (บันทึก) ได้โดยใช้ตัวเลือก hAxis/vAxis.logScale หรือ hAxis/vAxis.scaleType
- สําหรับรายการตัวเลือกการกําหนดค่าแกนทั้งหมด โปรดดูตัวเลือก hAxis และ vAxis ในเอกสารประกอบสําหรับแผนภูมิของคุณ
คําศัพท์
แกนหลัก/รอง:
- แกนหลักคือแกนตามแนวการจัดวางตามธรรมชาติของแผนภูมิ สําหรับเส้น พื้นที่ คอลัมน์ คอมโบ พื้นที่ขั้นบันได และแผนภูมิแท่งเทียน นี่คือแกนแนวนอน สําหรับแผนภูมิแท่งจะเป็นแผนภูมิแนวตั้ง แผนภูมิกระจายและแผนภูมิวงกลมไม่มีแกนหลัก
- แกนย่อยคือแกนอื่น
แกนที่ต่อเนื่อง/ต่อเนื่อง:
- แกนแบบแยกมีจํานวนค่าเว้นวรรคที่เท่ากัน ซึ่งเรียกว่าหมวดหมู่
- แกนต่อเนื่องมีค่าที่เป็นไปได้ไม่จํากัด
ต่อเนื่องและต่อเนื่อง
แกนหลักของแผนภูมิอาจมีไม่ต่อเนื่องหรือต่อเนื่อง เมื่อใช้แกนที่ไม่ต่อเนื่อง จุดข้อมูลของแต่ละชุดจะเว้นระยะห่างตามแกนอย่างเท่าเทียมกัน ตามดัชนีแถว เมื่อใช้แกนแบบต่อเนื่อง จุดข้อมูลจะได้รับการวางตําแหน่งตามค่าโดเมน
ป้ายกํากับยังแตกต่างกันด้วย ในแกนที่ไม่ต่อเนื่อง ชื่อหมวดหมู่ (ที่ระบุไว้ในคอลัมน์โดเมนของข้อมูล) จะใช้เป็นป้ายกํากับ ในแกนอย่างต่อเนื่อง ป้ายกํากับจะสร้างขึ้นโดยอัตโนมัติ โดยแผนภูมิจะแสดงเส้นตารางที่เว้นระยะห่างเท่าๆ กัน โดยป้ายกํากับแต่ละบรรทัดจะมีป้ายกํากับตามค่าที่แสดง
แกนต่อไปนี้ต่อเนื่องเสมอ
- ทั้งแกนของแผนภูมิฟองอากาศ
- แกนรอง
ในแผนภูมิเส้น พื้นที่ แผนภูมิแท่ง คอลัมน์ และแท่งเทียน (และแผนภูมิผสมที่มีเฉพาะชุดดังกล่าว) คุณจะควบคุมประเภทของแกนหลักได้
- สําหรับแกนที่ไม่ต่อเนื่อง ให้ตั้งค่าประเภทคอลัมน์ข้อมูลเป็น
string - สําหรับแกนอย่างต่อเนื่อง ให้ตั้งค่าประเภทคอลัมน์ข้อมูลเป็น
number,date,datetimeหรือtimeofday
| ไม่ต่อเนื่อง / ต่อเนื่อง | ประเภทคอลัมน์แรก | ตัวอย่าง |
|---|---|---|
| ไม่ต่อเนื่อง | สตริง |
|
| ต่อเนื่อง | number |
|
| ต่อเนื่อง | วันที่ |
|
สเกลแกน
คุณจะตั้งค่าการปรับขนาดแกนได้โดยใช้ตัวเลือก scaleType
ตัวอย่างเช่น หากต้องการตั้งค่าขนาดของแกนแนวตั้งเป็นสเกลการบันทึก ให้ใช้ตัวเลือกต่อไปนี้
vAxis: {
scaleType: 'log'
}
แผนภูมิเส้นต่อไปนี้แสดงการเติบโตของประชากรโลกทั้งในระดับเชิงเส้น (มาตรฐาน) และสเกลบันทึก
<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 Charts ตัวอย่างเช่น หากต้องการเปลี่ยน "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>