Class TableChartBuilder

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 เป็นคอลัมน์ขวาสุด และคอลัมน์สุดท้ายเป็นคอลัมน์ซ้ายสุด

การดำเนินการนี้จะไม่ส่งผลต่อดัชนีคอลัมน์ในข้อมูลพื้นฐาน แต่จะส่งผลต่อลำดับการแสดงผลเท่านั้น การแสดงภาษาแบบสองทิศทาง (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 - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง