Tổng quan
Kích thước trong dữ liệu thường hiển thị trên trục, ngang và dọc. Ví dụ: Biểu đồ vùng, Biểu đồ thanh, Biểu đồ hình nến, Biểu đồ cột, Biểu đồ kết hợp, Biểu đồ dạng đường, Biểu đồ vùng bước và Biểu đồ tán xạ.
Khi tạo biểu đồ có nhiều trục, bạn có thể tuỳ chỉnh một số thuộc tính của biểu đồ đó:
- Rời rạc so với liên tục
- Hướng – Bạn có thể tuỳ chỉnh hướng bằng cách sử dụng tuỳ chọn hAxis/vAxis.direction.
- Định vị và định kiểu nhãn – Bạn có thể tuỳ chỉnh vị trí và kiểu nhãn bằng cách sử dụng các tuỳ chọn hAxis/vAxis.textPosition và hAxis/vAxis.textStyle.
- Văn bản và kiểu tiêu đề trục – Bạn có thể tuỳ chỉnh văn bản và kiểu của tiêu đề trục bằng cách sử dụng các tuỳ chọn hAxis/vAxis.title và hAxis/vAxis.titleTextStyle.
- Thang đo trục – Bạn có thể đặt thang đo của một trục thành thang đo logarit (log) bằng cách sử dụng các lựa chọn hAxis/vAxis.logScale hoặc hAxis/vAxis.scaleType.
- Để xem danh sách đầy đủ các lựa chọn cấu hình trục, hãy xem các lựa chọn hAxis và vAxis trong tài liệu dành cho biểu đồ cụ thể của bạn.
Thuật ngữ
Trục chính/Trục nhỏ:
- Trục chính là trục dọc theo hướng tự nhiên của biểu đồ. Đối với biểu đồ dạng đường, vùng, cột, kết hợp, vùng dạng bậc và hình nến, đây là trục hoành. Đối với biểu đồ thanh, đó là biểu đồ dọc. Biểu đồ tán xạ và biểu đồ hình tròn không có trục chính.
- Trục nhỏ nhất là các trục còn lại.
Trục rời rạc/liên tục:
- Trục phân tách có một số lượng hữu hạn các giá trị cách đều nhau, được gọi là danh mục.
- Trục liên tục có vô số giá trị có thể có.
Rời rạc so với liên tục
Trục chính của biểu đồ có thể là rời rạc hoặc liên tục. Khi sử dụng một trục rời rạc, các điểm dữ liệu của từng chuỗi sẽ cách đều trên trục, theo chỉ mục hàng của chúng. Khi sử dụng trục liên tục, các điểm dữ liệu được định vị theo giá trị miền của chúng.
Việc gắn nhãn cũng khác nhau. Trong một trục riêng biệt, tên của các danh mục (được chỉ định trong cột miền của dữ liệu) sẽ được dùng làm nhãn. Trong một trục liên tục, nhãn được tạo tự động: biểu đồ hiển thị các đường lưới có khoảng cách đều nhau, trong đó mỗi đường lưới được gắn nhãn theo giá trị mà nó biểu thị.
Các trục sau luôn liên tục:
- Cả hai trục của biểu đồ bong bóng.
- Trục nhỏ.
Biểu đồ dạng đường, biểu đồ vùng, biểu đồ thanh, biểu đồ cột và biểu đồ hình nến (và biểu đồ kết hợp chỉ chứa những chuỗi như vậy), bạn có thể kiểm soát loại trục chính:
- Đối với một trục rời rạc, hãy đặt loại cột dữ liệu thành
string. - Đối với trục liên tục, hãy đặt loại cột dữ liệu thành một trong các loại sau:
number,date,datetimehoặctimeofday.
| Rời rạc / Liên tục | Loại cột đầu tiên | Ví dụ: |
|---|---|---|
| Tháo gỡ | string |
|
| Liên tục | number |
|
| Liên tục | date |
|
Thang trục
Bạn có thể đặt tỷ lệ của một trục bằng cách sử dụng tuỳ chọn scaleType.
Ví dụ: để đặt tỷ lệ của trục tung thành tỷ lệ logarit, hãy sử dụng tuỳ chọn sau:
vAxis: {
scaleType: 'log'
}
Biểu đồ dạng đường sau đây biểu thị sự gia tăng dân số thế giới theo cả thang đo tuyến tính (chuẩn) và thang đo loga.
Nếu dữ liệu của bạn chứa giá trị 0 hoặc âm, thì bạn có thể vẽ các điểm bằng cách sử dụng tuỳ chọn scaleType: 'mirrorLog'. Ở thang đo nhật ký phản chiếu, giá trị được vẽ biểu đồ của một số âm trừ đi nhật ký của giá trị tuyệt đối của số đó. Các giá trị gần bằng 0 được biểu thị trên thang đo tuyến tính.
Ví dụ sau đây cho thấy số Fibonacci dương và âm biểu thị theo cả thang nhật ký phản chiếu và thang đo tuyến tính.
Định dạng số
Bạn có thể kiểm soát định dạng số của nhãn bằng hAxis.format và vAxis.format. Ví dụ: {hAxis: { format:'#,###%'} } hiển thị giá trị "1.000%", "750%" và "50%" cho các giá trị 10, 7,5 và 0,5. Bạn cũng có thể cung cấp bất kỳ giá trị đặt trước nào sau đây:
{format: 'none'}: cho thấy số không có định dạng (ví dụ: 8000000){format: 'decimal'}: hiển thị các số với dấu phân cách hàng nghìn (ví dụ: 8.000.000){format: 'scientific'}: hiển thị số dưới dạng ký hiệu khoa học (ví dụ: 8e6){format: 'currency'}: hiển thị những số bằng nội tệ (ví dụ: $8.000.000){format: 'percent'}: hiển thị số dưới dạng tỷ lệ phần trăm (ví dụ: 800.000.000%){format: 'short'}: hiển thị các số được viết tắt (ví dụ: 8 triệu){format: 'long'}: hiển thị số ở dạng từ đầy đủ (ví dụ: 8 triệu)
Trong biểu đồ bên dưới, bạn có thể chọn một trong số các giá trị đặt trước:
Sau đây là một trang web hoàn chỉnh cho biểu đồ ở trên.
<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>
Khi sử dụng một định dạng sử dụng văn bản (ví dụ: định dạng long sẽ hiển thị 8.000.000 giá trị dưới dạng "8 triệu", bạn có thể bản địa hoá các chuỗi sang ngôn ngữ khác bằng cách chỉ định mã ngôn ngữ khi tải thư viện Google Biểu đồ. Ví dụ: để thay đổi "8 triệu" thành "8 миллиона" tiếng Nga, hãy gọi thư viện như sau:
<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>