Tổng quan
Lưu ý: JavaScript sẽ tính số tháng bắt đầu từ zero: tháng 1 là 0, tháng 2 là 1 và tháng 12 là 11. Nếu biểu đồ lịch của bạn có vẻ lệch một tháng, thì đây là lý do.
Biểu đồ lịch là một hình ảnh dùng để hiển thị hoạt động trong một khoảng thời gian dài, chẳng hạn như các tháng hoặc năm. Bạn chỉ nên sử dụng những thuộc tính này khi muốn minh hoạ sự thay đổi của một số lượng dựa vào ngày trong tuần hoặc cách xu hướng số lượng đó theo thời gian.
Biểu đồ lịch có thể đang được sửa đổi đáng kể trong các bản phát hành biểu đồ của Google trong tương lai.
Biểu đồ lịch được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML, tùy điều kiện nào phù hợp với trình duyệt của người dùng. Giống như tất cả biểu đồ của Google, biểu đồ lịch hiển thị chú giải công cụ khi người dùng di chuột qua dữ liệu. Và khoản tín dụng mà bạn đến hạn: biểu đồ lịch của chúng tôi được lấy cảm hứng từ hình ảnh minh hoạ lịch D3.
Ví dụ đơn giản
Giả sử chúng tôi muốn cho khán giả thấy sự thay đổi về số người tham dự của một đội thể thao trong suốt mùa giải. Thông qua biểu đồ lịch, chúng tôi có thể sử dụng độ sáng để cho biết các giá trị và giúp người dùng thấy được xu hướng trong nháy mắt:
Bạn có thể di chuột qua từng ngày để xem các giá trị dữ liệu cơ bản.
Để tạo biểu đồ lịch, hãy tải gói calendar, rồi tạo hai cột, một cột cho ngày và một cột cho các giá trị. (Cột thứ ba tuỳ chọn để tạo kiểu tuỳ chỉnh sẽ có trong bản phát hành Google Chart trong tương lai.)
Sau đó, hãy điền vào các cặp ngày-giá trị, như được hiển thị bên dưới.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
Ngày
Mỗi ô vuông trong biểu đồ lịch biểu thị một ngày. Hiện tại, bạn không thể tuỳ chỉnh màu của các ô dữ liệu, mặc dù màu này sẽ thay đổi trong bản phát hành tiếp theo của Google Chart.
Nếu tất cả giá trị dữ liệu đều dương, thì các màu sẽ nằm trong khoảng từ trắng đến xanh, trong đó màu xanh lam đậm nhất thể hiện các giá trị cao nhất. Nếu có giá trị dữ liệu âm, thì các giá trị này sẽ xuất hiện màu cam, như minh hoạ dưới đây.
Mã cho lịch này tương tự như mã đầu tiên, ngoại trừ việc các hàng có dạng như sau:
[ new Date(2013, 9, 4), 10 ],
[ new Date(2013, 9, 5), 3 ],
[ new Date(2013, 9, 7), -1 ],
[ new Date(2013, 9, 8), 2 ],
[ new Date(2013, 9, 12), -1 ],
[ new Date(2013, 9, 13), 1 ],
[ new Date(2013, 9, 15), 1 ],
[ new Date(2013, 9, 16), -4 ],
Bạn có thể thay đổi kích thước của các ngày ("ô") bằng tùy chọn calendar.cellSize:
Ở đây, chúng tôi đã thay đổi calendar.cellSize thành 10, rút gọn số ngày và do đó, toàn bộ biểu đồ.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Những ngày không có giá trị dữ liệu có thể được tuỳ chỉnh bằng tuỳ chọn noDataPattern:
Ở đây, chúng ta đặt color thành màu xanh dương nhạt và backgroundColor thành màu đậm hơn một chút:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
Bạn có thể kiểm soát màu đường viền, chiều rộng đường viền và độ mờ của ô bằng
calendar.cellColor:
Bạn cần cẩn thận chọn màu nét vẽ sẽ được phân biệt với monthOutlineColor hoặc để chọn độ mờ thấp. Dưới đây là các tùy chọn cho biểu đồ
ở trên:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Nếu bạn tập trung vào một ngày ở biểu đồ trên, thì đường viền sẽ làm nổi bật bằng màu đỏ. Bạn có thể kiểm soát hành vi đó bằng các tuỳ chọn calendar.focusedCellColor:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
focusedCellColor: {
stroke: '#d3362d',
strokeOpacity: 1,
strokeWidth: 1,
}
}
};
Tuần
Theo mặc định, các ngày trong tuần được gắn nhãn bằng các chữ cái đầu tiên của Chủ Nhật đến hết thứ Bảy.
Bạn không thể thay đổi thứ tự của các ngày, nhưng có thể thay đổi các chữ cái được sử dụng cùng với tùy chọn calendar.daysOfWeek. Ngoài ra, bạn có thể kiểm soát khoảng đệm giữa các ngày trong tuần và biểu đồ bằng calendar.dayOfWeekRightSpace, đồng thời có thể tuỳ chỉnh kiểu văn bản bằng calendar.dayOfWeekLabel:
Ở đây, chúng tôi thay đổi phông chữ của các nhãn tuần, đặt trong khoảng đệm có 10 pixel giữa các nhãn và dữ liệu biểu đồ, và bắt đầu các tuần vào thứ Hai.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#1a8763',
bold: true,
italic: true,
},
dayOfWeekRightSpace: 10,
daysOfWeek: 'DLMMJVS',
}
};
Tháng
Theo mặc định, tháng được xác định bằng các đường màu xám đậm. Bạn có thể sử dụng tuỳ chọn calendar.monthOutlineColor để kiểm soát đường viền, calendar.monthLabel để tuỳ chỉnh phông chữ nhãn và calendar.underMonthSpace để điều chỉnh khoảng đệm nhãn:
Chúng tôi đặt phông chữ của nhãn thành in nghiêng đậm 12pt trên Thời đại La Mã, đặt các đường viền thành cùng một màu và đặt một khoảng đệm 16 pixel. Các đường viền không sử dụng trong tháng được đặt thành màu nhạt hơn của cùng một màu sắc.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#981b48',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
},
underMonthSpace: 16,
}
};
Năm
Các năm trong biểu đồ lịch luôn nằm ở cạnh trái của biểu đồ và có thể được tùy chỉnh bằng
calendar.yearLabel và calendar.underYearSpace:
Chúng tôi đặt phông chữ năm thành độ nghiêng màu xanh đậm 32pt cho Thời La Mã – La Mã và thêm mười pixel giữa các nhãn năm và cuối biểu đồ:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
underYearSpace: 10, // Bottom padding for the year labels.
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
}
}
};
Đang tải
Tên gói google.charts.load là "calendar":
google.charts.load("current", {packages: ["calendar"]});
Tên lớp của hình ảnh là google.visualization.Calendar:
var visualization = new google.visualization.Calendar(container);
Định dạng dữ liệu
Hàng: Mỗi hàng trong bảng biểu thị một ngày.
Cột:
| Cột 0 | Cột 1 | ... | Cột N (không bắt buộc) | |
|---|---|---|---|---|
| Mục đích: | Ngày | Giá trị | ... | Vai trò không bắt buộc |
| Loại dữ liệu: | ngày, ngày giờ hoặc thời gian trong ngày | number | ... | |
| Vai trò: | miền | data | ... | |
| Các vai trò cột không bắt buộc: | None (Không có) |
None (Không có) |
... |
Các lựa chọn về cấu hình
| Tên | |
|---|---|
| calendar.cellColor |
Tuỳ chọn
var options = {
calendar: {
cellColor: {
stroke: 'red', // Color the border of the squares.
strokeOpacity: 0.5, // Make the borders half transparent.
strokeWidth: 2 // ...and two pixels thick.
}
}
};
Loại: đối tượng
Mặc định:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.cellKích thước |
Kích thước của hình vuông ngày theo lịch:
var options = { calendar: { cellSize: 10 } };
Loại: số nguyên
Mặc định: 16
|
| calendar.dayOfWeekLabel |
Kiểm soát kiểu phông chữ của nhãn tuần ở đầu biểu đồ:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Loại: đối tượng
Mặc định:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.dayOfWeekRightSpace |
Khoảng cách giữa cạnh phải của nhãn tuần và cạnh trái của hình vuông ngày của biểu đồ. Loại: số nguyên
Mặc định: 4
|
| calendar.daysOfWeek |
Nhãn gồm một chữ cái để sử dụng cho Chủ Nhật đến hết thứ Bảy. Loại: chuỗi
Mặc định:
'SMTWTFS' |
| calendar.focusCellColor |
Khi người dùng đặt tiêu điểm (giả sử di chuột) trên một hình vuông trong ngày, các biểu đồ trên lịch sẽ làm nổi bật hình vuông.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Loại: đối tượng
Mặc định:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Tạo kiểu cho nhãn tháng, ví dụ:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Loại: đối tượng
Mặc định:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.monthOutlineColor |
Tháng có giá trị dữ liệu được phân định với người khác bằng đường viền theo kiểu này.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Xem thêm calendar.unusedMonthOutlineColor.)
Loại: đối tượng
Mặc định:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Số pixel giữa đáy của nhãn tháng và đầu hình vuông ngày: var options = { calendar: { underMonthSpace: 12 } };
Loại: số nguyên
Mặc định: 6
|
| calendar.underYearKhông gian |
Số pixel giữa nhãn năm dưới cùng và đáy của biểu đồ: var options = { calendar: { underYearSpace: 2 } };
Loại: số nguyên
Mặc định: 0
|
| calendar.unusedMonthOutlineColor |
Tháng không có giá trị dữ liệu được phân định với người khác bằng cách sử dụng đường viền theo kiểu này.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Xem thêm calendar.monthOutlineColor.)
Loại: đối tượng
Mặc định:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| Trục màu |
Một đối tượng chỉ định mối liên kết giữa các giá trị và màu của cột màu hoặc thang độ dốc. Để chỉ định thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh họa dưới đây: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Loại: đối tượng
Mặc định: rỗng
|
| colorAxis.colors |
Màu sắc để chỉ định cho các giá trị trong hình ảnh trực quan. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: Loại: mảng chuỗi màu
Mặc định: rỗng
|
| colorAxis.maxValue |
Nếu có, hãy chỉ định một giá trị tối đa cho dữ liệu màu của biểu đồ. Các giá trị dữ liệu màu của giá trị này trở lên sẽ hiển thị dưới dạng màu cuối cùng trong dải ô Loại: số
Mặc định: Giá trị tối đa của cột màu trong dữ liệu biểu đồ
|
| colorAxis.minValue |
Nếu có, hãy chỉ định một giá trị tối thiểu cho dữ liệu màu của biểu đồ. Các giá trị dữ liệu màu của giá trị này trở xuống sẽ hiển thị dưới dạng màu đầu tiên trong dải ô Loại: số
Mặc định: Giá trị tối thiểu của cột màu trong dữ liệu biểu đồ
|
| colorAxis.values |
Nếu có, hãy kiểm soát cách các giá trị liên kết với màu sắc. Mỗi giá trị được liên kết với một màu tương ứng trong mảng Loại: mảng số
Mặc định: rỗng
|
| forceIFrame |
Vẽ biểu đồ bên trong một khung cùng dòng. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.) Loại: Boolean
Mặc định: sai
|
| độ cao |
Chiều cao của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều cao của phần tử chứa
|
| Không có mẫu dữ liệu |
Biểu đồ lịch sử dụng mẫu đường chéo sọc để biểu thị rằng không có dữ liệu cho một ngày cụ thể. Sử dụng các tùy chọn
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Loại: đối tượng
Mặc định: rỗng
|
| chú giải công cụ.isHtml |
Hãy đặt thành Lưu ý: Tính năng tuỳ chỉnh nội dung của chú giải công cụ HTML thông qua vai trò dữ liệu trong cột chú giải công cụ không được hỗ trợ bởi hình ảnh Biểu đồ hình tròn và Biểu đồ bong bóng. Loại: Boolean
Mặc định: true
|
| chiều rộng |
Chiều rộng của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều rộng của phần tử chứa
|
Phương thức
| Phương thức | |
|---|---|
draw(data, options) |
Vẽ biểu đồ. Biểu đồ chỉ chấp nhận các lệnh gọi phương thức khác sau khi sự kiện Loại dữ liệu trả về: không có
|
getBoundingBox(id) |
Trả về một đối tượng chứa thành phần bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ
Giá trị tương ứng với vùng chứa của biểu đồ. Gọi hàm này sau khi biểu đồ được vẽ. Loại dữ liệu trả về: đối tượng
|
getSelection() |
Trả về một mảng các thực thể biểu đồ đã chọn.
Các thực thể có thể chọn là thanh, mục nhập chú giải và danh mục.
Thanh tương ứng với một ô trong bảng dữ liệu, mục nhập chú giải cho một cột (chỉ mục hàng bị rỗng) và một danh mục cho một hàng (chỉ mục cột rỗng.
Đối với biểu đồ này, chỉ có thể chọn một thực thể vào bất kỳ thời điểm nào.
Loại dữ liệu trả về: Một mảng các phần tử lựa chọn
|
setSelection() |
Chọn các thực thể biểu đồ đã chỉ định. Hủy mọi lựa chọn trước đó.
Các thực thể có thể chọn là thanh, mục nhập chú giải và danh mục.
Thanh tương ứng với một ô trong bảng dữ liệu, mục nhập chú giải cho một cột (chỉ mục hàng bị rỗng) và một danh mục cho một hàng (chỉ mục cột rỗng.
Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể.
Loại dữ liệu trả về: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên được phân bổ của biểu đồ. Loại dữ liệu trả về: không có
|
Sự kiện
| Tên | |
|---|---|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. Thuộc tính: mã nhận dạng, thông báo
|
onmouseover |
Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Truyền lại chỉ mục hàng và giá trị ngày của thực thể. Nếu thực thể không có phần tử bảng dữ liệu nào, thì giá trị được trả về cho chỉ mục hàng sẽ là Cơ sở lưu trú: hàng, ngày
|
onmouseout |
Được kích hoạt khi người dùng di chuột khỏi một thực thể hình ảnh. Truyền lại chỉ mục hàng và giá trị ngày của thực thể. Nếu thực thể không có phần tử bảng dữ liệu nào, thì giá trị được trả về cho chỉ mục hàng sẽ là Hàng Ngày của cơ sở lưu trú
|
ready |
Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi bạn gọi phương thức Thuộc tính: không có
|
select |
Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục bạn đã chọn, hãy gọi
Thuộc tính: không có
|
Chính sách dữ liệu
Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.