Class TableChartBuilder

TableChartBuilder

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

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

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

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

var 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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
enablePaging	Boolean	true หากควรเปิดใช้การแบ่งหน้า มิฉะนั้นจะเป็น false

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

enablePaging(pageSize)

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

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

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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
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.
var builder = Charts.newTableChart();
builder.enablePaging(5, 2);

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

enableRtlTable(rtlEnabled)

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

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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
rtlEnabled	Boolean	true หากควรเปิดใช้การสนับสนุนแบบขวาไปซ้าย false มิฉะนั้น

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

enableSorting(enableSorting)

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

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setDataSourceUrl(url)

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

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setDataTable(tableBuilder)

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setDataTable(table)

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setDataViewDefinition(dataViewDefinition)

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setDimensions(width, height)

ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
width	Integer	ความกว้างของแผนภูมิเป็นพิกเซล
height	Integer	ความสูงของแผนภูมิเป็นพิกเซล

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setFirstRowNumber(number)

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

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

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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
number	Integer	หมายเลขแถวสำหรับแถวแรกในตารางข้อมูล

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setInitialSortingAscending(column)

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

ระบบปฏิบัติการของคอลัมน์จะจัดเรียงจากน้อยไปหามากและมีเครื่องหมายลูกศรเล็กๆ ระบุไว้

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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
column	Integer	จำนวนคอลัมน์ตามที่ควรจัดเรียงตารางในเบื้องต้น

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setInitialSortingDescending(column)

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

ระบบปฏิบัติการของคอลัมน์จะจัดเรียงจากมากไปน้อยและมีเครื่องหมายลูกศรเล็กๆ ระบุไว้

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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
column	Integer	จำนวนคอลัมน์ตามที่ควรจัดเรียงตารางในเบื้องต้น

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

setOption(option, value)

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

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

showRowNumberColumn(showRowNumber)

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

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

พารามิเตอร์

ชื่อ	Type	คำอธิบาย
showRowNumber	Boolean	true หากคอลัมน์แรกของตารางควรแสดงหมายเลขแถว false ในกรณีอื่นๆ

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน

---

useAlternatingRowStyle(alternate)

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

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

พารามิเตอร์

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

รีเทิร์น

TableChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน