Biểu đồ góc cạnh Google - Biểu đồ bảng

Biểu đồ bảng giúp hiển thị một bảng có thể được sắp xếp và phân trang. Các ô trong bảng có thể được định dạng bằng cách sử dụng chuỗi định dạng hoặc bằng cách chèn trực tiếp HTML làm giá trị ô. Các giá trị số được căn phải theo mặc định; giá trị boolean được hiển thị dưới dạng dấu kiểm hoặc dấu chéo. Người dùng có thể chọn các hàng đơn bằng bàn phím hoặc chuột. Tiêu đề cột có thể được sử dụng để sắp xếp. Hàng tiêu đề vẫn cố định trong khi cuộn. Bảng kích hoạt các sự kiện tương ứng với tương tác của người dùng.

Chúng ta đã thấy các cấu hình được sử dụng để vẽ biểu đồ trong chương Cú pháp cấu hình biểu đồ của Google . Bây giờ, chúng ta hãy xem một ví dụ về Biểu đồ bảng.

Cấu hình

Chúng tôi đã sử dụng Table lớp để hiển thị một biểu đồ Bảng.

type = 'Table';

Thí dụ

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "";
   type = 'Table';
   data = [
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

Kết quả

Xác minh kết quả.