Tổng quan
Lưu ý: JavaScript tính các tháng bắt đầu từ 0: Tháng 1 là 0, tháng 2 là 1 và tháng 12 là 11. Đây là lý do tại sao biểu đồ lịch của bạn có vẻ bị sai lệch theo một tháng.
Biểu đồ lịch là một hình ảnh trực quan dùng để thể hiện hoạt động trong một khoảng thời gian dài, chẳng hạn như tháng hoặc năm. Bạn nên sử dụng các biểu đồ này khi muốn minh hoạ sự thay đổi của một số lượng tuỳ theo ngày trong tuần hoặc xu hướng theo thời gian.
Biểu đồ lịch có thể được sửa đổi đáng kể trong các bản phát hành sau này của Google Biểu đồ.
Các biểu đồ trong Lịch được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML, tuỳ theo lựa chọ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 đồ trên lịch hiển thị chú thích khi người dùng di chuột qua dữ liệu. Và ghi công ở nơi đến hạn: biểu đồ lịch của chúng tôi được lấy cảm hứng từ hình ảnh lịch D3.
Một ví dụ đơn giản
Giả sử chúng ta muốn cho 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. Với biểu đồ lịch, chúng ta có thể sử dụng độ sáng để biểu thị các giá trị và cho phép mọi người xem nhanh xu hướng:
Bạn có thể di chuột qua từng ngày để xem 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 giá trị. (Cột thứ ba (không bắt buộc) dùng để tạo kiểu tuỳ chỉnh sẽ có trong bản phát hành sau này trên Google Biểu đồ.)
Sau đó, điền vào các hàng của bạn các cặp ngày-giá trị như được trình bày dưới đây.
<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 đại diện cho 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 đó sẽ thay đổi trong bản phát hành tiếp theo của Google Biểu đồ.
Nếu tất cả giá trị dữ liệu đều là số dương, các màu sẽ có khoảng từ trắng đến xanh dương, trong đó màu xanh lam đậm nhất biểu thị giá trị cao nhất. Nếu có giá trị dữ liệu âm, các giá trị đó sẽ có màu cam, như minh hoạ dưới đây.
Mã của lịch này tương tự như lịch đầu tiên, ngoại trừ các hàng sẽ 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 ngày ("ô") bằng tuỳ chọn calendar.cellSize:
Ở đây, chúng ta đã thay đổi calendar.cellSize thành 10, thu nhỏ ngày và theo đó biểu đồ nhìn chung.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Bạn có thể tuỳ chỉnh ngày không có giá trị dữ liệu 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 bóng tối 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 của ô, chiều rộng và độ mờ của đường viền 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. Sau đây là các lựa 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 trong biểu đồ trên, đường viền sẽ được đánh dấu 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, ngày trong tuần được gắn nhãn bằng các chữ cái đầu tiên từ Chủ Nhật đến Thứ Bảy.
Bạn không thể thay đổi thứ tự ngày nhưng có thể thay đổi những chữ cái được sử dụng bằng
lựa 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 và có thể tuỳ chỉnh kiểu văn bản bằng calendar.dayOfWeekLabel:
Ở đây, chúng ta thay đổi phông chữ của các nhãn của tuần, đặt khoảng đệm 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ể dùng tuỳ chọn calendar.monthOutlineColor để điều khiển đường viền, calendar.monthLabel để tuỳ chỉnh phông chữ của nhãn và calendar.underMonthSpace để điều chỉnh khoảng đệm của nhãn:
Chúng ta đặt phông chữ của nhãn thành kiểu in nghiêng đậm màu đỏ 12 pt Times-Roman, đặt các đường viền thành cùng màu và đặt khoảng đệm 16 pixel. Các đường viền của tháng không sử dụng được đặt thành một màu mờ hơn cùng màu.
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
Năm trong biểu đồ lịch luôn ở cạnh bên trái của biểu đồ và có thể được tuỳ chỉnh bằng calendar.yearLabel và calendar.underYearSpace:
Chúng tôi đặt phông chữ của năm thành kiểu in nghiêng đậm màu xanh lục 32 pt Times-Roman và thêm 10 pixel vào giữa 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 trực quan 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 đại diện cho 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ò: | tên miền | data | ... | |
| Các vai trò trong cột không bắt buộc: | None (Không có) |
None (Không có) |
... |
Các lựa chọn 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.cellSize |
Kích thước của các 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 trên biểu đồ. Loại: số nguyên
Mặc định: 4
|
| calendar.daysOfWeek |
Các nhãn gồm một chữ cái dùng cho từ Chủ Nhật đến Thứ Bảy. Loại: chuỗi
Mặc định:
'SMTWTFS' |
| calendar.focusedCellColor |
Khi người dùng đặt tiêu điểm (chẳng hạn như bằng cách di chuột) lên hình vuông ngày, biểu đồ 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 |
Kiểu của 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 cách với các tháng khác bằng cách sử dụ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ố lượng pixel giữa cuối 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.underYearSpace |
Số lượng pixel giữa nhãn của năm ở dưới cùng và cuối 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 cách với các tháng 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 }
|
| colorAxis |
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 các 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 hoạ dưới đây: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Loại: đối tượng
Mặc định: rỗng
|
| colorAxis.colors |
Màu để 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 trong biểu đồ. Giá trị dữ liệu màu của giá trị này
trở lên sẽ được kết xuất 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 trong biểu đồ. Giá trị dữ liệu màu của giá trị này trở xuống sẽ được kết xuất 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 |
Kiểm soát cách liên kết giá trị với màu (nếu có). Mỗi giá trị được liên kết với 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. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.) Loại: boolean
Mặc định: false
|
| độ 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
|
| noDataPattern |
Các biểu đồ lịch sử dụng mẫu dạng đườ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 tuỳ chọn
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Loại: đối tượng
Mặc định: rỗng
|
| tooltip.isHtml |
Đặt thành Lưu ý: Tính năng tuỳ chỉnh nội dung chú thích HTML thông qua vai trò dữ liệu của cột chú giải công cụ không được hỗ trợ trong 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 đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện
Loại trả lại: không có
|
getBoundingBox(id) |
Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ
Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh 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 gồm các thực thể biểu đồ đã chọn.
Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục.
Một thanh tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng).
Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ.
Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
|
setSelection() |
Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó.
Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục.
Một thanh tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là 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 trả lại: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó. Loại trả lại: 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. Trả về 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 cho mục này, 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 ra khỏi một thực thể trực quan. Trả về 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 cho thực thể, giá trị được trả về cho chỉ mục hàng sẽ là Hàng Cơ sở lưu trú, ngày
|
ready |
Biểu đồ này đã 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 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 đã được chọn, hãy gọi hàm
Thuộc tính: không có
|
Chính sách về dữ liệu
Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.