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