Bạn có thể sử dụng Công cụ biểu đồ của Google với cài đặt mặc định của họ - tất cả tùy chỉnh và tùy chọn thiết lập cơ bản đã sẵn sàng. Tuy nhiên, các biểu đồ có thể dễ dàng tùy chỉnh trong trường hợp trang web của bạn áp dụng một kiểu xung đột với các giá trị mặc định được cung cấp. Mỗi biểu đồ sẽ hiển thị một số tùy chọn để tùy chỉnh giao diện. Các tuỳ chọn này được biểu thị dưới dạng các cặp tên:giá trị trong đối tượng tuỳ chọn được truyền vào phương thức draw() của biểu đồ.
Biểu đồ thường hỗ trợ các tùy chọn tùy chỉnh phù hợp với hình ảnh đó.
Ví dụ: biểu đồ bảng hỗ trợ
tuỳ chọn sortColumn để chỉ định cột sắp xếp mặc định, và hình ảnh biểu đồ hình tròn hỗ trợ tuỳ chọn colors cho phép bạn chỉ định
màu của lát cắt. Tài liệu của mỗi biểu đồ phải mô tả các tuỳ chọn mà biểu đồ hỗ trợ.
Bạn sẽ chuyển các lựa chọn của bạn vào dưới dạng thông số thứ hai không bắt buộc
vào phương thức draw() của biểu đồ
được mô tả trước đó. Bạn chỉ định các tùy chọn bằng cách tạo một đối tượng có các thuộc tính dành riêng cho từng biểu đồ.
Ví dụ sau đây minh hoạ việc tạo một đối tượng tuỳ chọn chỉ định tất cả các thuộc tính này:
var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
chart.draw(data, options);
Dưới đây là biểu đồ mà mã này tạo.
|
|
Bạn cũng có thể chỉ định các tùy chọn theo nghĩa đen trong phương thức draw():
chart.draw(data, {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
is3D: true
});
Dưới đây là biểu đồ mà mã này tạo.
|
|
Thêm thông tin