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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
enablePagingBooleantrue หากควรเปิดใช้การแบ่งหน้า 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);

พารามิเตอร์

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

รีเทิร์น

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

พารามิเตอร์

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

รีเทิร์น

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

enableRtlTable(rtlEnabled)

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

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

พารามิเตอร์

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

รีเทิร์น

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

enableSorting(enableSorting)

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

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

พารามิเตอร์

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

รีเทิร์น

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

setDataSourceUrl(url)

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

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

พารามิเตอร์

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

รีเทิร์น

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

setDataTable(tableBuilder)

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

พารามิเตอร์

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

รีเทิร์น

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

setDataTable(table)

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

พารามิเตอร์

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

รีเทิร์น

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

setDataViewDefinition(dataViewDefinition)

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

พารามิเตอร์

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

รีเทิร์น

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

setDimensions(width, height)

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

พารามิเตอร์

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

รีเทิร์น

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

setFirstRowNumber(number)

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

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

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

พารามิเตอร์

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

รีเทิร์น

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

setInitialSortingAscending(column)

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

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

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

พารามิเตอร์

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

รีเทิร์น

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

setInitialSortingDescending(column)

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

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

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

พารามิเตอร์

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

รีเทิร์น

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

setOption(option, value)

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

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
optionStringตัวเลือกที่จะตั้งค่า
valueObjectค่าที่จะตั้ง

รีเทิร์น

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

showRowNumberColumn(showRowNumber)

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

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

พารามิเตอร์

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

รีเทิร์น

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

useAlternatingRowStyle(alternate)

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

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

พารามิเตอร์

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

รีเทิร์น

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