หน้านี้ได้รับการแปลโดย Cloud Translation API

Class TableChartBuilder

เครื่องมือสร้างแผนภูมิตาราง ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ Google Charts

ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีสร้างแผนภูมิตาราง ข้อมูลจะนําเข้าจากสเปรดชีตของ Google

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AF' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';

const chartBuilder = Charts.newTableChart()
                         .setDimensions(600, 500)
                         .enablePaging(20)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

เมธอด

วิธีการ	ประเภทการแสดงผล	รายละเอียดแบบย่อ
`build()`	`Chart`	สร้างแผนภูมิ
`enablePaging(enablePaging)`	`TableChartBuilder`	ตั้งค่าว่าจะเปิดใช้การแบ่งหน้าข้อมูลหรือไม่
`enablePaging(pageSize)`	`TableChartBuilder`	เปิดใช้การแบ่งหน้าและกำหนดจำนวนแถวในแต่ละหน้า
`enablePaging(pageSize, startPage)`	`TableChartBuilder`	เปิดใช้การแบ่งหน้า กำหนดจำนวนแถวในแต่ละหน้า และหน้าตารางแรกที่แสดง (หมายเลขหน้าจะนับจาก 0)
`enableRtlTable(rtlEnabled)`	`TableChartBuilder`	เพิ่มการรองรับพื้นฐานสำหรับภาษาที่เขียนจากขวาไปซ้าย (เช่น อาหรับหรือฮีบรู) โดยกลับลำดับคอลัมน์ของตารางเพื่อให้คอลัมน์ 0 เป็นคอลัมน์ด้านขวาสุด และคอลัมน์สุดท้ายเป็นคอลัมน์ด้านซ้ายสุด
`enableSorting(enableSorting)`	`TableChartBuilder`	ตั้งค่าว่าจะจัดเรียงคอลัมน์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์หรือไม่
`setDataSourceUrl(url)`	`TableChartBuilder`	ตั้งค่า URL แหล่งข้อมูลที่ใช้ในการดึงข้อมูลจากแหล่งข้อมูลภายนอก เช่น Google ชีต
`setDataTable(tableBuilder)`	`TableChartBuilder`	ตั้งค่าตารางข้อมูลที่จะใช้กับแผนภูมิโดยใช้ DataTableBuilder
`setDataTable(table)`	`TableChartBuilder`	ตั้งค่าตารางข้อมูลซึ่งมีเส้นสำหรับแผนภูมิ รวมถึงป้ายกำกับแกน X
`setDataViewDefinition(dataViewDefinition)`	`TableChartBuilder`	กำหนดคำจำกัดความของมุมมองข้อมูลที่จะใช้สําหรับแผนภูมิ
`setDimensions(width, height)`	`TableChartBuilder`	กำหนดมิติข้อมูลของแผนภูมิ
`setFirstRowNumber(number)`	`TableChartBuilder`	กำหนดหมายเลขแถวสำหรับแถวแรกในตารางข้อมูล
`setInitialSortingAscending(column)`	`TableChartBuilder`	กำหนดดัชนีของคอลัมน์ที่ควรจัดเรียงตารางในตอนแรก (จากน้อยไปมาก)
`setInitialSortingDescending(column)`	`TableChartBuilder`	กำหนดดัชนีของคอลัมน์ที่ควรจัดเรียงตารางในตอนแรก (จากมากไปน้อย)
`setOption(option, value)`	`TableChartBuilder`	ตั้งค่าตัวเลือกขั้นสูงสําหรับแผนภูมินี้
`showRowNumberColumn(showRowNumber)`	`TableChartBuilder`	กำหนดว่าจะแสดงหมายเลขแถวเป็นคอลัมน์แรกของตารางหรือไม่
`useAlternatingRowStyle(alternate)`	`TableChartBuilder`	ตั้งค่าว่าจะกำหนดสไตล์สีสลับให้กับแถวคี่และคู่ของแผนภูมิตารางหรือไม่

เอกสารประกอบโดยละเอียด

`build()`

สร้างแผนภูมิ

รีเทิร์น

Chart — ออบเจ็กต์แผนภูมิ ซึ่งฝังลงในเอกสาร องค์ประกอบ UI หรือใช้เป็นรูปภาพแบบคงที่ได้

`enablePaging(enablePaging)`

ตั้งค่าว่าจะเปิดใช้การแบ่งหน้าข้อมูลหรือไม่

ลักษณะการทำงานเริ่มต้นคือปิดใช้การแบ่งหน้า หากเปิดใช้การแบ่งหน้า ขนาดหน้าเริ่มต้นจะเป็น 10

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`enablePaging`	`Boolean`	`true` หากควรเปิดใช้การแบ่งหน้า `false` ไม่เช่นนั้น

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`enablePaging(pageSize)`

เปิดใช้การแบ่งหน้าและกำหนดจำนวนแถวในแต่ละหน้า

ขนาดหน้าเริ่มต้นคือ 10

// Creates a table chart builder and enables paging with page size of 5.
const builder = Charts.newTableChart();
builder.enablePaging(5);

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`pageSize`	`Integer`	จํานวนแถวในแต่ละหน้าของตาราง

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`enablePaging(pageSize, startPage)`

เปิดใช้การแบ่งหน้า กำหนดจำนวนแถวในแต่ละหน้า และหน้าตารางแรกที่แสดง (หมายเลขหน้าจะนับจาก 0)

ขนาดหน้าเริ่มต้นคือ 10 และหน้าเริ่มต้นเริ่มต้นคือ 0

// Creates a table chart builder and enables paging with page size of 5 and
// displays page 2 first.
const builder = Charts.newTableChart();
builder.enablePaging(5, 2);

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`pageSize`	`Integer`	จํานวนแถวในแต่ละหน้าของตาราง
`startPage`	`Integer`	หน้าตารางแรกที่แสดง (หมายเลขหน้าจะนับจาก 0)

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`enableRtlTable(rtlEnabled)`

เพิ่มการรองรับพื้นฐานสำหรับภาษาที่เขียนจากขวาไปซ้าย (เช่น อาหรับหรือฮีบรู) โดยกลับลำดับคอลัมน์ของตารางเพื่อให้คอลัมน์ 0 เป็นคอลัมน์ด้านขวาสุด และคอลัมน์สุดท้ายเป็นคอลัมน์ด้านซ้ายสุด

การดำเนินการนี้ไม่ส่งผลต่อดัชนีคอลัมน์ในข้อมูลพื้นฐาน แต่ส่งผลต่อลําดับการแสดงเท่านั้น การแสดงภาษาแบบ 2 ทิศทาง (BiDi) แบบเต็มไม่รองรับการแสดงภาพตารางแม้ว่าจะมีตัวเลือกนี้ก็ตาม ระบบจะไม่สนใจตัวเลือกนี้หากคุณเปิดใช้การแบ่งหน้า (โดยใช้ตัวเลือกหน้า) หรือหากตารางมีส่วนเลื่อนเนื่องจากคุณระบุตัวเลือกความสูงและความกว้างที่เล็กกว่าขนาดตารางที่ต้องการ ลักษณะการทำงานเริ่มต้นคือปิดใช้การรองรับ RTL

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`rtlEnabled`	`Boolean`	`true` หากควรเปิดใช้การรองรับจากขวาไปซ้าย `false` ไม่เช่นนั้น

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`enableSorting(enableSorting)`

ตั้งค่าว่าจะจัดเรียงคอลัมน์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์หรือไม่

หากเปิดใช้การจัดเรียง เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ ระบบจะจัดเรียงแถวโดยอัตโนมัติ ลักษณะการทำงานเริ่มต้นคือเปิดใช้การจัดเรียง

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`enableSorting`	`Boolean`	`true` เพื่อเปิดใช้การจัดเรียงโดยการคลิกส่วนหัวของคอลัมน์ หรือ `false` หากไม่ต้องการเปิดใช้

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setDataSourceUrl(url)`

ตั้งค่า URL แหล่งข้อมูลที่ใช้ในการดึงข้อมูลจากแหล่งข้อมูลภายนอก เช่น Google ชีต หากระบุ URL ของแหล่งข้อมูลและ DataTable ระบบจะไม่สนใจ URL ของแหล่งข้อมูล

ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลได้ในเอกสารประกอบของ Google Charts

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`url`	`String`	URL ของแหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setDataTable(tableBuilder)`

ตั้งค่าตารางข้อมูลที่จะใช้กับแผนภูมิโดยใช้ DataTableBuilder นี่เป็นเมธอดที่สะดวกสำหรับการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียก build()

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`tableBuilder`	`DataTableBuilder`	เครื่องมือสร้างตารางข้อมูล ระบบจะสร้างตารางข้อมูลใหม่ทันทีเป็นส่วนหนึ่งของการเรียกใช้นี้ ดังนั้นการอัปเดตเครื่องมือสร้างเพิ่มเติมจะไม่แสดงในแผนภูมิ

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setDataTable(table)`

ตั้งค่าตารางข้อมูลซึ่งมีเส้นสำหรับแผนภูมิ รวมถึงป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริงและมีป้ายกำกับแกนนอน ตามด้วยคอลัมน์จำนวนเท่าใดก็ได้ โดยคอลัมน์ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นแยกกัน

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`table`	`DataTableSource`	ตารางข้อมูลที่จะใช้กับแผนภูมิ

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setDataViewDefinition(dataViewDefinition)`

กำหนดคำจำกัดความของมุมมองข้อมูลที่จะใช้สําหรับแผนภูมิ

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`dataViewDefinition`	`DataViewDefinition`	ออบเจ็กต์คําจํากัดความมุมมองข้อมูลที่กําหนดมุมมองที่ควรมาจากแหล่งข้อมูลหนึ่งๆ สําหรับการวาดแผนภูมิ

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setDimensions(width, height)`

กำหนดมิติข้อมูลของแผนภูมิ

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`width`	`Integer`	ความกว้างของแผนภูมิในหน่วยพิกเซล
`height`	`Integer`	ความสูงของแผนภูมิในหน่วยพิกเซล

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setFirstRowNumber(number)`

กำหนดหมายเลขแถวสำหรับแถวแรกในตารางข้อมูล

หมายเลขแถวเริ่มต้นของแถวแรกคือ 1

// Creates a table chart builder and sets the first row to be 2.
const builder = Charts.newTableChart();
builder.setFirstRowNumber(2);

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`number`	`Integer`	หมายเลขแถวของแถวแรกในตารางข้อมูล

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setInitialSortingAscending(column)`

กำหนดดัชนีของคอลัมน์ที่ควรจัดเรียงตารางในตอนแรก (จากน้อยไปมาก)

คอลัมน์ดังกล่าวจัดเรียงจากน้อยไปมากและมีลูกศรเล็กๆ กำกับอยู่

// Creates a table chart builder and sorts it by the second column (ascending).
const builder = Charts.newTableChart();
builder.setInitialSortingAscending(2);

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`column`	`Integer`	หมายเลขคอลัมน์ที่ควรจัดเรียงตารางในตอนแรก

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setInitialSortingDescending(column)`

กำหนดดัชนีของคอลัมน์ที่ควรจัดเรียงตารางในตอนแรก (จากมากไปน้อย)

คอลัมน์จะจัดเรียงจากมากไปน้อยและมีลูกศรเล็กๆ กำกับอยู่

// Creates a table chart builder and sorts it by the second column (descending).
const builder = Charts.newTableChart();
builder.setInitialSortingDescending(2);

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`column`	`Integer`	หมายเลขคอลัมน์ที่ควรจัดเรียงตารางในตอนแรก

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`setOption(option, value)`

ตั้งค่าตัวเลือกขั้นสูงสําหรับแผนภูมินี้ ดูตัวเลือกที่ใช้ได้สําหรับแผนภูมินี้ วิธีการนี้จะไม่มีผลหากตัวเลือกที่ระบุไม่ถูกต้อง

// Build a table chart which renders HTML.
const builder = Charts.newTableChart();
builder.setOption('allowHtml', {@code true});
const chart = builder.build();

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`option`	`String`	ตัวเลือกที่จะตั้งค่า
`value`	`Object`	ค่าที่จะตั้ง

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`showRowNumberColumn(showRowNumber)`

กำหนดว่าจะแสดงหมายเลขแถวเป็นคอลัมน์แรกของตารางหรือไม่

ลักษณะการทำงานเริ่มต้นจะไม่แสดงหมายเลขแถว

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`showRowNumber`	`Boolean`	`true` หากต้องการให้คอลัมน์แรกของตารางแสดงหมายเลขแถว `false` มิเช่นนั้น

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

`useAlternatingRowStyle(alternate)`

ตั้งค่าว่าจะกำหนดสไตล์สีสลับให้กับแถวคี่และคู่ของแผนภูมิตารางหรือไม่

ลักษณะการทำงานเริ่มต้นคือแถวที่มีรูปแบบสีสลับกัน

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`alternate`	`Boolean`	`true` หากควรสลับรูปแบบสี `false` ไม่เช่นนั้น

รีเทิร์น

TableChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม