Lưu ý quan trọng: Phần Biểu đồ hình ảnh của Công cụ biểu đồ Google đã không còn được dùng chính thức kể từ ngày 20 tháng 4 năm 2012. Quảng cáo sẽ tiếp tục hoạt động theo chính sách không dùng nữa của chúng tôi.
Tổng quan
Một biểu đồ thanh được kết xuất dưới dạng hình ảnh bằng API Google Biểu đồ.
Ví dụ:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagebarchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Đang tải
Tên gói google.charts.load
là "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
Tên lớp của hình ảnh trực quan là google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
Định dạng dữ liệu
Cột đầu tiên phải là một chuỗi và chứa nhãn danh mục. Mọi cột có thể theo dõi, tất cả cột phải là số. Mỗi cột hiển thị dưới dạng một nhóm các thanh. Khi bảng dữ liệu chứa nhiều cột số, các giá trị trong một hàng sẽ hiển thị dưới dạng thanh xếp chồng.
Các lựa chọn về cấu hình
Tên | Loại | Mặc định | Mô tả |
---|---|---|---|
màu nền | chuỗi | "#FFFFFF" (màu trắng) | Màu nền của biểu đồ ở định dạng màu API Biểu đồ. |
màu | Mảng<chuỗi> | Tự động | Sử dụng tính năng này để chỉ định màu cụ thể cho từng chuỗi dữ liệu. Màu được chỉ định trong định dạng màu của API biểu đồ.
Màu i được dùng cho cột dữ liệu i, xuống đến đầu nếu có nhiều cột dữ liệu hơn màu. Nếu chấp nhận được các biến thể của một màu duy nhất cho tất cả bộ sách, hãy sử dụng tuỳ chọn color . |
bật sự kiện | boolean | sai | Làm cho biểu đồ gửi các sự kiện do người dùng kích hoạt, chẳng hạn như nhấp chuột hoặc di chuột qua. Chỉ được hỗ trợ cho các loại biểu đồ cụ thể. Xem Sự kiện bên dưới. |
độ cao | number | Chiều cao của vùng chứa | Chiều cao của biểu đồ tính bằng pixel. |
xếp chồng | boolean | đúng | Kiểm soát việc có hiển thị nhiều cột dữ liệu dưới dạng các thanh xếp chồng lên nhau (trái ngược với thanh nhóm hay không). |
isNgành dọc | boolean | sai | Kiểm soát xem các thanh có phải là dọc hay không. |
chú giải | chuỗi | "phải" | Vị trí và loại chú giải. Có thể là một trong những trạng thái sau đây:
|
tối đa | number | tự động | Giá trị lớn nhất để hiển thị trên trục Y. |
phút | number | tự động | Giá trị tối thiểu để hiển thị trên trục Y. |
showCategoryNhãn | boolean | đúng | Nếu bạn đặt chính sách này thành false, hãy xoá nhãn của các danh mục. |
showValueLabel | boolean | đúng | Nếu bạn đặt chính sách này thành false, thì nhãn của các giá trị đó sẽ bị xóa. |
tiêu đề | chuỗi | không có tiêu đề | Văn bản sẽ hiển thị phía trên biểu đồ. |
Khoảng thời gian giá trị của nhãn | number | Tự động | Khoảng thời gian hiển thị nhãn trục giá trị. Ví dụ: nếu min là 0, max là 100 và valueLabelsInterval là 20, biểu đồ sẽ hiển thị các nhãn trục ở (0, 20, 40, 60, 80 100). |
chiều rộng | number | Chiều rộng của vùng chứa | Chiều rộng biểu đồ tính bằng pixel. |
Phương thức
Phương thức | Loại dữ liệu trả về | Mô tả |
---|---|---|
draw(data, options) |
không có | Vẽ biểu đồ. |
Sự kiện
Bạn có thể đăng ký nghe các sự kiện được mô tả trên trang Biểu đồ hình ảnh chung.
Chính sách dữ liệu
Vui lòng tham khảo Chính sách ghi nhật ký API biểu đồ.