Trang này được dịch bởi Cloud Translation API.

Hình ảnh trực quan: Biểu đồ cột (Phiên bản cũ)

Không được tán thành

Hình ảnh trực quan này đã được thay thế bằng một phiên bản mới. Vui lòng sử dụng phiên bản đó. Để dễ dàng di chuyển, vui lòng tham khảo trang ghi chú phát hành.

Tổng quan
Ví dụ
Đang tải
Định dạng dữ liệu
Các lựa chọn cấu hình
Phương thức
Sự kiện
Chính sách về dữ liệu

Tổng quan

Biểu đồ thanh dọc hiển thị trong trình duyệt bằng SVG hoặc VML. Hiển thị mẹo khi nhấp vào điểm. Tạo ảnh động cho các dòng khi nhấp vào các mục chú giải. Để xem phiên bản ngang của biểu đồ này, hãy xem Biểu đồ thanh.

Bởi: Google

Ví dụ

Tự viết mã trên Công cụ trực quan hoá

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.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.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Đang tải

Tên gói google.load là "columnchart"

  google.load("visualization", "1", {packages: ["columnchart"]});

Tên lớp của hình ảnh trực quan là google.visualization.ColumnChart

  var visualization = new google.visualization.ColumnChart(container);

Định dạng dữ liệu

Mỗi hàng trong bảng đại diện cho một nhóm các thanh liền kề.

Cột đầu tiên trong bảng phải là một chuỗi và đại diện cho nhãn của nhóm thanh đó. Có thể theo sau là số lượng cột bất kỳ, tất cả đều là số, mỗi số đại diện cho các thanh có cùng màu và vị trí tương đối trong mỗi nhóm.

Giá trị tại một hàng và cột nhất định kiểm soát chiều cao của thanh đơn được biểu thị cho hàng và cột này.

Các lựa chọn cấu hình

Tên	Loại	Mặc định	Nội dung mô tả
axisColor	chuỗi hoặc Đối tượng	màu mặc định	Màu của trục. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
axisBackgroundColor	chuỗi hoặc Đối tượng	màu mặc định	Đường viền xung quanh nền trục. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
axisFontSize	number	tự động	Cỡ chữ của văn bản trên trục biểu đồ, tính bằng pixel.
backgroundColor	chuỗi hoặc Đối tượng	màu mặc định	Màu nền cho vùng chính của biểu đồ. Có thể là một trong những lựa chọn sau: Chuỗi có màu được HTML hỗ trợ, ví dụ: 'đỏ' hoặc '#00cc00' Một đối tượng có các thuộc tính `stroke` `fill` và `strokeSize`. `stroke` và `fill` phải là một chuỗi có màu. strokeSize là một số. Ví dụ: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Để sử dụng chỉ tô màu nền mà không có nét vẽ, hãy sử dụng `stroke:null, strokeSize: 0`.
borderColor	chuỗi hoặc Đối tượng	màu mặc định	Đường viền xung quanh các phần tử biểu đồ. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
màu	Mảng chuỗi hoặc đối tượng	Màu mặc định	Một mảng màu, trong đó mỗi phần tử chỉ định màu của một chuỗi. Bạn nên chỉ định một phần tử mảng cho mỗi chuỗi. Nếu `is3D=false`, đây là một mảng màu HTML. Ví dụ: colors:['#00FF00','Orange'] Nếu `is3D=true`, đây là một mảng gồm màu HTML hoặc đối tượng thuộc loại này: `{color:face_color, darker:shade_color}`, trong đó `color` là màu mặt của phần tử và `darker` là màu bóng. Tuy nhiên, nếu bạn chỉ định màu HTML cho đối tượng 3D, thì khuôn mặt và bóng sẽ phải cùng màu và hiệu ứng 3D sẽ bị giảm. Ví dụ: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
enableTooltip	boolean	đúng	Nếu bạn đặt chính sách này thành true, thì chú thích sẽ xuất hiện khi người dùng nhấp vào một cột.
focusBorderColor	chuỗi hoặc Đối tượng	màu mặc định	Đường viền xung quanh các phần tử biểu đồ được lấy tiêu điểm (trỏ bằng chuột). Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
độ cao	number	Chiều cao của vùng chứa	Chiều cao của biểu đồ tính bằng pixel.
is3D	boolean	false	Nếu bạn đặt chính sách này thành true, thì hệ thống sẽ hiển thị sự thay đổi theo 3 chiều.
isStacked	boolean	false	Nếu bạn đặt chính sách này thành true, thì các giá trị đường sẽ được xếp chồng (tích lũy).
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: "phải" – Ở bên phải biểu đồ. "left" (trái) – Ở bên trái biểu đồ. "trên cùng" - Phía trên biểu đồ. "dưới cùng" – Bên dưới biểu đồ. "none" – Không có chú giải nào được hiển thị.
legendBackgroundColor	chuỗi hoặc Đối tượng	màu mặc định	Màu nền cho vùng chú giải trên biểu đồ. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
legendFontSize	number	tự động	Kích thước phông chữ chú giải, tính bằng pixel.
legendTextColor	chuỗi hoặc Đối tượng	màu mặc định	Màu của các mục nhập văn bản trong chú giải. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
logScale	boolean	false	Nếu đúng, trục chính phải được chia tỷ lệ theo lôgarit.
tối đa	number	tự động	Chỉ định đường lưới trục Y cao nhất. Đường lưới thực tế sẽ là giá trị lớn hơn trong hai giá trị: giá trị tuỳ chọn tối đa hoặc giá trị dữ liệu cao nhất, được làm tròn lên dấu lưới cao hơn tiếp theo.
phút	number	tự động	Chỉ định đường lưới trục Y thấp nhất. Đường lưới thực tế sẽ là giá trị thấp hơn trong hai giá trị: giá trị tuỳ chọn tối thiểu hoặc giá trị dữ liệu thấp nhất, được làm tròn xuống dấu lưới phía dưới tiếp theo .
reverseAxis	boolean	false	Nếu bạn đặt chính sách này thành true, thì các danh mục sẽ được vẽ từ phải sang trái. Lựa chọn mặc định là vẽ từ trái sang phải.
showCategories	boolean	đúng	Nếu đúng, nhãn danh mục sẽ hiển thị. Nếu là false, thì sẽ không.
title	string	không có tiêu đề	Văn bản để hiển thị phía trên biểu đồ.
titleX	string	không có tiêu đề	Văn bản để hiển thị bên dưới trục hoành.
titleY	string	không có tiêu đề	Văn bản hiển thị theo trục tung.
titleColor	chuỗi hoặc Đối tượng	màu mặc định	Màu cho tiêu đề của biểu đồ. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
titleFontSize	number	tự động	Cỡ chữ cho tiêu đề biểu đồ, tính bằng pixel.
tooltipFontSize	number	11	Cỡ chữ của văn bản chú thích. Tỷ lệ này có thể giảm nếu chú thích quá nhỏ để chứa văn bản bằng phông chữ đã chỉ định.
tooltipHeight	number	60	Chiều cao của chú thích, tính bằng pixel. Chiều cao của chú thích là cố định; chú thích này sẽ không bao giờ tăng hoặc thu nhỏ cho vừa với độ dài hoặc cỡ chữ của văn bản. Tuy nhiên, những giá trị lớn hơn 1/3 chiều cao của biểu đồ sẽ bị cắt.
tooltipWidth	number	120	Chiều rộng của chú thích, tính bằng pixel. Chiều rộng của chú thích là cố định; chú thích này sẽ không bao giờ tăng hoặc thu nhỏ cho vừa với độ dài hoặc cỡ chữ của văn bản. Tuy nhiên, mọi nội dung lớn hơn chiều rộng của biểu đồ sẽ bị cắt.
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 đồ.
`getSelection()`	Mảng gồm các phần tử lựa chọn	Cách triển khai `getSelection()` chuẩn. Phần tử đã chọn là các phần tử cột và ô. Mỗi lần, người dùng chỉ có thể chọn một cột hoặc ô.
`setSelection()`	không có	Phương thức triển khai `setSelection()` chuẩn, nhưng chỉ hỗ trợ lựa chọn một phần tử. Coi mọi mục nhập lựa chọn là một lựa chọn cột hoặc ô. Lưu ý rằng bạn không thể chọn cột nhãn.

Sự kiện

Tên	Nội dung mô tả	Thuộc tính
`onmouseover`	Được kích hoạt khi người dùng di chuột qua một thanh, đồng thời chuyển các chỉ mục hàng và cột của ô tương ứng.	hàng, cột
`onmouseout`	Được kích hoạt khi người dùng di chuột ra khỏi một thanh, đồng thời chuyển các chỉ mục hàng và cột của ô tương ứng.	hàng, cột
`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 `draw` và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt	Không có
`select`	Được kích hoạt khi người dùng nhấp vào một thanh hoặc chú giải. Khi một thanh được chọn, ô tương ứng trong bảng dữ liệu sẽ được chọn; khi bạn chọn một chú giải, cột tương ứng trong bảng dữ liệu sẽ được chọn. Để tìm hiểu những mục đã được chọn, hãy gọi `getSelection()`.	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.

Hình ảnh trực quan: Biểu đồ cột (Phiên bản cũ) Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.