Hình ảnh: Biểu đồ thanh (Phiên bản cũ)

Không được dùng nữa

Hình ảnh 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.

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

Tổng quan

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

Của: Google

Ví dụ:

Tự viết mã trên Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      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.BarChart(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à "barchart" 

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

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

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

Định dạng dữ liệu

Mỗi hàng trong bảng trình bày 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à thể hiện nhãn của nhóm thanh đó. Có thể theo dõi số lượng cột bất kỳ, tất cả đều là số, mỗi cột thể hiện 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 cụ thể sẽ kiểm soát chiều cao của một thanh được thể hiện bằng hàng và cột này.

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

Tên Loại Mặc định Mô tả
trục màu chuỗi hoặc đối tượng màu mặc định Màu của trục. Các giá trị có thể có là giá trị của tùy 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ể có là giá trị của tùy chọn cấu hình backgroundColor.
TrụcFontSize number tự động Kích thước phông chữ của văn bản trục biểu đồ, tính bằng pixel.
màu nền chuỗi hoặc đối tượng màu mặc định Màu nền của vùng chính trên biểu đồ. Có thể là một trong những cách sau:
  • Một chuỗi có màu được HTML hỗ trợ, ví dụ: "màu đỏ" 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}. Để chỉ sử dụng tô màu nền, không sử dụng nét gạch, hãy sử dụng stroke:null, strokeSize: 0.
đường viền màu chuỗi hoặc đối tượng màu mặc định Đường viền xung quanh các thành phần của biểu đồ. Các giá trị có thể có là giá trị của tùy 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 màu HTML hoặc các đối tượng thuộc loại này: {color:face_color, darker:shade_color}, trong đó color là màu khuôn 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 một đối tượng 3D, thì mặt và bóng sẽ 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'}]}
bật Chú giải công cụ boolean đúng Nếu bạn đặt giá trị này thành true, thì chú giải công cụ sẽ xuất hiện khi người dùng nhấp vào một thanh.
focusBorderColor chuỗi hoặc đối tượng màu mặc định Đường viền xung quanh các thành phần của biểu đồ được lấy tiêu điểm (trỏ bằng chuột). Các giá trị có thể có là giá trị của tùy 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.
3D boolean sai Nếu bạn đặt giá trị này thành true, sẽ hiển thị một thay đổi ba chiều.
xếp chồng boolean sai Nếu bạn đặt giá trị này thành true, thì các giá trị dòng sẽ được xếp chồng (tích lũy).
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:
  • 'right' - Ở bên phải biểu đồ.
  • 'left' - Ở bên trái của biểu đồ.
  • 'top' - Phía trên biểu đồ.
  • 'bottom' - Dưới biểu đồ.
  • "none" – Không có chú giải nào xuất hiện.
Thêm màu nền màu huyền thoại chuỗi hoặc đối tượng màu mặc định Màu nền của vùng chú giải trong biểu đồ. Các giá trị có thể có là giá trị của tùy chọn cấu hình backgroundColor.
LegendsFontSize number tự động Kích thước của phông chữ chú giải, tính bằng pixel.
Bảng màu văn bản chú giải chuỗi hoặc đối tượng màu mặc định Màu văn bản chú giải. Các giá trị có thể có là giá trị của tùy chọn cấu hình backgroundColor.
lôgarit boolean sai Nếu là đúng thì trục chính phải được điều chỉnh theo tỷ lệ 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ớn hơn trong hai giá trị: giá trị tùy chọn tối đa hoặc giá trị dữ liệu cao nhất được làm tròn đế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à hai giá trị thấp hơn trong số hai giá trị: giá trị tùy 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 dưới tiếp theo.
trục ngược boolean đúng Nếu được đặt thành true (mặc định), sẽ vẽ các danh mục từ trên xuống. Nếu được đặt thành false, các thanh sẽ vẽ từ dưới lên.
showCategory boolean đúng Nếu đúng, sẽ hiển thị các nhãn danh mục. Nếu giá trị là false thì sẽ không.
tiêu đề chuỗi không có tiêu đề Văn bản sẽ hiển thị phía trên biểu đồ.
tiêu đềX chuỗi không có tiêu đề Văn bản sẽ hiển thị bên dưới trục hoành.
tiêu đềY chuỗi không có tiêu đề Văn bản sẽ hiển thị theo trục dọc.
tiêu đề màu 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ể có là giá trị của tùy chọn cấu hình backgroundColor.
titleFontSize number tự động Kích thước phông chữ cho tiêu đề biểu đồ, tính bằng pixel.

chú giải công cụFontSize		 number 11 Kích thước phông chữ của văn bản trong chú giải công cụ. Bạn có thể giảm tỷ lệ này nếu chú giải công cụ quá nhỏ không thể chứa văn bản trong phông chữ đã chỉ định.
chú giải công cụ Chiều cao
 number 60 Chiều cao của chú giải công cụ, tính bằng pixel. Chiều cao chú giải công cụ là cố định; chiều cao của chú giải sẽ không bao giờ tăng hoặc thu nhỏ để vừa với độ dài hoặc kích thước phông chữ của văn bản. Nhưng bất kỳ nội dung nào lớn hơn 1/3 chiều cao của biểu đồ đều sẽ bị cắt.
Chú giải công cụ number 120 Chiều rộng của chú giải công cụ, tính bằng pixel. Chiều rộng của chú giải công cụ là cố định; chiều rộng của chú giải sẽ không bao giờ tăng hoặc thu nhỏ để vừa với độ dài hoặc kích thước phông chữ của văn bản. Nhưng bất kỳ kích thước nào lớn hơn chiều rộng biểu đồ đều sẽ bị cắt.
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 đồ.
getSelection() Dãy các phần tử lựa chọn Triển khai getSelection() chuẩn. Các phần tử đã chọn là phần tử cột và ô. Người dùng chỉ có thể chọn một cột hoặc ô tại một thời điểm.
setSelection() không có Phương thức triển khai setSelection() chuẩn, nhưng chỉ hỗ trợ lựa chọn trong một phần tử. Coi mọi mục nhập lựa chọn dưới dạng lựa chọn cột hoặc ô. Xin lưu ý rằng bạn không thể chọn cột nhãn.

Sự kiện

Tên Mô tả Thuộc tính
onmouseover Được kích hoạt khi người dùng di chuột qua một thanh và chuyển vào 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 thanh và chuyển vào chỉ mục hàng và cột của ô tương ứng. hàng, cột
ready Biểu đồ đã 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 sau khi sự kiện này được kích hoạt Không
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 một chú giải được chọn, cột tương ứng trong bảng dữ liệu sẽ được chọn. Để tìm hiểu những gì đã được chọn, hãy gọi getSelection(). Không

Chính sách dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.