Quan trọng: Kể từ ngày 20 tháng 4 năm 2012, phần Biểu đồ hình ảnh của Công cụ biểu đồ của Google đã chính thức không còn được dùng nữa. Ứng dụng này sẽ tiếp tục hoạt động theo chính sách về việc ngừng cung cấp của chúng tôi.
Tổng quan
Biểu đồ thanh được hiển thị dưới dạng hình ảnh bằng cách sử dụ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. Có thể theo sau là số lượng cột bất kỳ, tất cả đều phải là số. Mỗi cột được hiển thị dưới dạng một tập hợp 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 cấu hình
| Tên | Loại | Mặc định | Nội dung mô tả |
|---|---|---|---|
| backgroundColor | string | "#FFFFFF" (màu trắng) | Màu nền cho biểu đồ ở Định dạng màu của API biểu đồ. |
| màu | Mảng<string> | Tự động | Sử dụng thuộc tính 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, gói quanh phầ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ả các chuỗi, hãy sử dụng tuỳ chọn color. |
| enableEvents | boolean | false | Khiến các 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 một số loại biểu đồ cụ thể. Hãy xem mục 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. |
| isStacked | boolean | đúng | Kiểm soát việc nhiều cột dữ liệu có hiển thị dưới dạng các thanh xếp chồng (thay vì được nhóm) hay không. |
| isVertical | boolean | false | Kiểm soát việc các thanh có xoay dọc hay không. |
| chú thích | string | "phải" | Vị trí và loại chú thích. 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ị nhỏ nhất hiển thị trên trục Y. |
| showCategoryLabels | 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. |
| showValueLabels | 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 giá trị. |
| title | string | không có tiêu đề | Văn bản để hiển thị phía trên biểu đồ. |
| valueLabelsInterval | 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ị nhãn trục tại (0, 20, 40, 60, 80 100). |
| chiều rộng | number | Chiều rộng vùng chứa | Chiều rộng của biểu đồ tính bằng pixel. |
Phương thức
| Phương thức | Loại dữ liệu trả về | Nội dung 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 về dữ liệu
Vui lòng tham khảo Chính sách ghi lại của API biểu đồ.