Angular Google 圖表 - 表格圖表

表格圖表有助於呈現可排序可分頁的表格。表格單元格可以使用格式字串進行格式化，或直接插入 HTML 作為單元格值。數值預設右對齊；布林值顯示為對勾或叉號。使用者可以使用鍵盤或滑鼠選擇單行。列標題可用於排序。在滾動期間，標題行保持固定。該表格觸發與使用者互動相對應的事件。

我們在“Google 圖表配置語法”章節中已經看到了用於繪製圖表的配置。現在，我們來看一個表格圖表的示例。

配置

我們使用了 Table 類來顯示錶格圖表。

type = 'Table';

示例

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;
}

結果

驗證結果。