ภาพรวม
ตารางที่จัดเรียงและแบ่งหน้าได้ จัดรูปแบบเซลล์ในตารางโดยใช้สตริงรูปแบบ หรือแทรก HTML เป็นค่าเซลล์โดยตรง ค่าตัวเลขอยู่ในแนวทางที่ถูกต้อง ค่าบูลีนจะแสดงเป็นเครื่องหมายถูก ผู้ใช้สามารถเลือกแถวเดียวด้วยแป้นพิมพ์หรือเมาส์ ผู้ใช้จะจัดเรียงแถวได้โดยคลิกที่ส่วนหัวของคอลัมน์ แถวส่วนหัวจะยังคงเหมือนเดิมเมื่อผู้ใช้เลื่อน ตารางจะเริ่มเหตุการณ์จํานวนหนึ่งที่สอดคล้องกับการโต้ตอบของผู้ใช้
ตัวอย่าง
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "table"
google.charts.load('current', {packages: ['table']});
ชื่อคลาสของการแสดงภาพคือ google.visualization.Table
var visualization = new google.visualization.Table(container);
รูปแบบข้อมูล
ระบบจะแปลง DataTable เป็นตาราง HTML ที่เกี่ยวข้อง โดยแต่ละแถว/คอลัมน์ในตาราง Data จะแปลงเป็นแถว/คอลัมน์ในตาราง HTML แต่ละคอลัมน์ต้องเป็นประเภทข้อมูลเดียวกัน และรองรับข้อมูลการแสดงภาพมาตรฐานทุกประเภท (สตริง บูลีน ตัวเลข ฯลฯ)
พร็อพเพอร์ตี้ที่กําหนดเอง
คุณกําหนดพร็อพเพอร์ตี้ที่กําหนดเองต่อไปนี้ให้กับองค์ประกอบตารางข้อมูลได้โดยใช้เมธอด setProperty()
ของ DataTable
ชื่อพร็อพเพอร์ตี้ | ใช้กับ | คำอธิบาย |
---|---|---|
ชื่อคลาส | เซลล์ | ชื่อคลาสสตริงที่จะกําหนดให้เซลล์เดียว ใช้ฟีเจอร์นี้เพื่อกําหนดการจัดรูปแบบ CSS ให้กับแต่ละเซลล์ |
รูปแบบ | เซลล์ | สตริงรูปแบบเพื่อกําหนดอินไลน์ให้กับเซลล์ การดําเนินการนี้จะลบล้างรูปแบบคลาส CSS ที่ใช้กับเซลล์นั้น คุณต้องตั้งค่าพร็อพเพอร์ตี้ allowHtml=true เพื่อให้ทํางานได้ ตัวอย่าง: 'border: 1px solid green;' |
ตัวอย่าง
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
allowHtml |
หากตั้งค่าเป็น "จริง" ค่าของรูปแบบที่มีแท็ก HTML จะแสดงผลเป็น HTML หากตั้งค่าเป็น "เท็จ" ตัวจัดรูปแบบที่กําหนดเองส่วนใหญ่จะทํางานไม่ถูกต้อง ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
สลับรูปแบบแถว |
กําหนดว่าจะกําหนดรูปแบบสีแบบสลับกับแถวคี่และแถวคู่หรือไม่ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
ชื่อคลาส CSS |
ออบเจ็กต์ที่ชื่อพร็อพเพอร์ตี้แต่ละชื่ออธิบายองค์ประกอบของตาราง และค่าพร็อพเพอร์ตี้เป็นสตริง ซึ่งจะกําหนดคลาสที่กําหนดให้กับองค์ประกอบในตารางนั้น ใช้พร็อพเพอร์ตี้นี้เพื่อกําหนด CSS ที่กําหนดเองให้องค์ประกอบที่เฉพาะเจาะจงของตาราง หากต้องการใช้พร็อพเพอร์ตี้นี้ ให้กําหนดออบเจ็กต์ โดยที่ชื่อพร็อพเพอร์ตี้จะระบุองค์ประกอบของตาราง และค่าพร็อพเพอร์ตี้เป็นสตริง โดยระบุชื่อคลาสที่จะกําหนดให้องค์ประกอบนั้น จากนั้นคุณต้องกําหนดรูปแบบ CSS สําหรับคลาสดังกล่าวในหน้าเว็บ รองรับชื่อพร็อพเพอร์ตี้ต่อไปนี้
ตัวอย่าง:
หมายเหตุ: ใน CSS องค์ประกอบบางอย่างจะลบล้างองค์ประกอบอื่นๆ เช่น หากคุณระบุสีพื้นหลังสําหรับองค์ประกอบ ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
หมายเลขแถวแรก |
หมายเลขแถวสําหรับแถวแรกในตารางข้อมูล ใช้เมื่อ ShowRowNumber เป็นจริงเท่านั้น ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
คอลัมน์ที่ตรึงไว้ |
จํานวนคอลัมน์จากด้านซ้ายที่จะถูกตรึง คอลัมน์เหล่านี้จะยังคงอยู่เมื่อเลื่อนคอลัมน์ที่เหลือในแนวนอน หาก ประเภท: ตัวเลข
ค่าเริ่มต้น: Null
|
ความสูง |
กําหนดความสูงขององค์ประกอบคอนเทนเนอร์ของการแสดงภาพ คุณใช้หน่วย HTML มาตรฐานได้ (เช่น "100px", "80em", "60") หากไม่ได้ระบุหน่วย ระบบจะถือว่าตัวเลขเป็นพิกเซล หากไม่ได้ระบุ เบราว์เซอร์จะปรับความสูงโดยอัตโนมัติเพื่อให้พอดีกับตาราง ลดขนาดลงมากที่สุดเท่าที่จะทําได้ หากตั้งค่าน้อยกว่าความสูงที่จําเป็น ตารางจะเพิ่มแถบเลื่อนแนวตั้ง (แถวส่วนหัวก็ค้างด้วย) หากตั้งค่าเป็น '100%' ตารางจะขยายเป็นองค์ประกอบคอนเทนเนอร์ให้ได้มากที่สุด ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
เพจ |
และวิธีเปิดใช้การแบ่งหน้าผ่านข้อมูล เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ปิดใช้"
|
ขนาดหน้า |
จํานวนแถวในแต่ละหน้าเมื่อเปิดใช้การแบ่งหน้าด้วยตัวเลือกหน้า ประเภท: ตัวเลข
ค่าเริ่มต้น: 10
|
ปุ่มการแบ่งหน้า |
ตั้งค่าตัวเลือกที่ระบุสําหรับปุ่มการแบ่งหน้า โดยมีตัวเลือกดังต่อไปนี้
ประเภท: สตริงหรือตัวเลข
ค่าเริ่มต้น: "อัตโนมัติ"
|
ตาราง RTL |
เพิ่มการสนับสนุนพื้นฐานสําหรับภาษาแบบขวาไปซ้าย (เช่น อาหรับ หรือฮิบรู) โดยการกลับลําดับคอลัมน์ของตารางเพื่อให้คอลัมน์ 0 เป็นคอลัมน์ทางขวาสุด และคอลัมน์สุดท้ายจะเป็นคอลัมน์ซ้ายสุด การดําเนินการนี้จะไม่ส่งผลต่อดัชนีคอลัมน์ในข้อมูลพื้นฐาน แต่เป็นเพียงลําดับของการแสดง การแสดงภาพตารางแบบ 2 ทิศทาง (BiDi) อย่างสมบูรณ์ไม่ได้รับการรองรับโดยการแสดงผลตารางแม้ว่าจะใช้ตัวเลือกนี้ก็ตาม ตัวเลือกนี้จะละเว้นหากคุณเปิดใช้การแบ่งหน้า (โดยใช้ตัวเลือกหน้า) หรือหากตารางมีแถบเลื่อนเนื่องจากคุณได้เลือกตัวเลือกความสูงและความกว้างที่มีขนาดเล็กกว่าขนาดตารางที่ต้องการ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
เลื่อนไปทางซ้ายทางด้านซ้าย |
กําหนดตําแหน่งการเลื่อนในแนวนอน หน่วยเป็นพิกเซล หากตารางมีแถบเลื่อนแนวนอนเนื่องจากคุณตั้งค่าพร็อพเพอร์ตี้ความกว้างไว้ ตารางจะเลื่อนผ่านจํานวนพิกเซลที่เลยคอลัมน์ด้านซ้ายสุด ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
แสดงหมายเลขแถว |
หากตั้งค่าเป็น "จริง" จะแสดงหมายเลขแถวเป็นคอลัมน์แรกของตาราง ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
จัดเรียง |
หากวิธีจัดเรียงคอลัมน์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ หากเปิดใช้การจัดเรียง ให้พิจารณาตั้งค่าพร็อพเพอร์ตี้การจัดเรียงAscending และจัดเรียงคอลัมน์ด้วย เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: 'เปิดใช้'
|
จัดเรียงจาก Z ถึง A |
ลําดับที่จัดเรียงคอลัมน์เริ่มต้น "จริง" สําหรับน้อยไปมาก และ "เท็จ" สําหรับมากไปหาน้อย ระบบจะละเว้นหากไม่ได้ระบุ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
จัดเรียงคอลัมน์ |
ดัชนีของคอลัมน์ในตารางข้อมูล ที่มีการจัดเรียงตารางในตอนแรก คอลัมน์จะมีลูกศรเล็กๆ กํากับลําดับการจัดเรียง ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
|
หน้าเริ่มต้น |
หน้าแรกของตารางที่จะแสดง ใช้เฉพาะเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ความกว้าง |
ตั้งค่าความกว้างขององค์ประกอบคอนเทนเนอร์ของการแสดงภาพ คุณใช้หน่วย HTML มาตรฐานได้ (เช่น "100px", "80em", "60") หากไม่ได้ระบุหน่วย ระบบจะถือว่าตัวเลขเป็นพิกเซล หากไม่ได้ระบุ เบราว์เซอร์จะปรับความกว้างโดยอัตโนมัติเพื่อให้พอดีกับตาราง ลดขนาดลงมากที่สุดเท่าที่จะทําได้ หากตั้งค่าน้อยกว่าความกว้างที่ต้องการ ตารางจะเพิ่มแถบเลื่อนแนวนอน หากตั้งค่าเป็น '100%' ตารางจะขยายไปสู่องค์ประกอบคอนเทนเนอร์ให้มากที่สุด ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
เมธอด
วิธีการ | |
---|---|
draw(data, options) |
วาดตาราง ประเภทการคืนสินค้า: ไม่มี
|
getSelection() |
การใช้งาน getSelection มาตรฐาน องค์ประกอบการเลือกคือองค์ประกอบแถวทั้งหมด แสดงแถวที่เลือกได้มากกว่า 1 แถว ดัชนีแถวในออบเจ็กต์การเลือกหมายถึงตารางข้อมูลต้นฉบับโดยไม่คํานึงถึงการโต้ตอบของผู้ใช้ (การจัดเรียง การแบ่งหน้า ฯลฯ) โปรดทราบว่าปุ่มสลับการเลือกคือ การคลิกเซลล์ในครั้งแรกที่เลือก การคลิกเซลล์อีกครั้งจะเป็นการยกเลิกการเลือกเซลล์นั้น ส่งผลให้เกิดเหตุการณ์การเลือก แต่ไม่มีรายการที่เลือกในออบเจ็กต์การเลือกที่ดึงมา ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
getSortInfo() |
เรียกใช้วิธีการนี้เพื่อดึงข้อมูลเกี่ยวกับสถานะการจัดเรียงปัจจุบันของตารางที่จัดเรียงข้อมูลแล้ว (โดยทั่วไปจะเป็นผู้ใช้ที่คลิกส่วนหัวของคอลัมน์เพื่อจัดเรียงแถวตามคอลัมน์ที่เฉพาะเจาะจง) หากคุณปิดใช้การจัดเรียงไว้ วิธีนี้จะใช้งานไม่ได้ หากคุณไม่ได้จัดเรียงข้อมูลในโค้ด หรือผู้ใช้ไม่ได้จัดเรียงข้อมูลโดยการเลือกโค้ด ระบบจะส่งค่าการจัดเรียงเริ่มต้น ประเภทการแสดงผล: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้
|
setSelection(selection) |
การใช้งาน ประเภทการคืนสินค้า: ไม่มี
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
ชื่อ | |
---|---|
เลือก |
เหตุการณ์การเลือกมาตรฐาน แต่เลือกทั้งแถวได้เท่านั้น พร็อพเพอร์ตี้: ไม่มี
|
เพจ |
ทํางานเมื่อผู้ใช้คลิกปุ่มการนําทางหน้าเว็บ พร็อพเพอร์ตี้:
page : ตัวเลข ดัชนีของหน้าเว็บที่จะไปยัง |
จัดเรียง |
ทริกเกอร์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ และตัวเลือกการจัดเรียงไม่ใช่ "ปิดใช้" พร็อพเพอร์ตี้: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้
|
พร้อม |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่จะเรียกใช้เมธอดการวาด และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น พร็อพเพอร์ตี้: ไม่มี
|
ตัวจัดรูปแบบ
หมายเหตุ: การแสดงภาพตารางมีชุดออบเจ็กต์การจัดรูปแบบซึ่งถูกแทนที่โดยตัวจัดรูปแบบทั่วไปซึ่งมีลักษณะการทํางานเหมือนกัน แต่ใช้ได้ในการแสดงภาพ
ตารางต่อไปนี้แสดงการจัดรูปแบบตารางแบบเดิมและการจัดรูปแบบทั่วไปที่เทียบเท่า คุณควรใช้ตัวจัดรูปแบบทั่วไปเมื่อเขียนโค้ดใหม่
ตัวจัดรูปแบบตาราง | |
---|---|
รูปแบบตารางตาราง | google.visualization.arrowFormat |
รูปแบบตาราง | google.visualization.BarFormat |
รูปแบบสีตาราง | google.visualization.ColorFormat |
รูปแบบตาราง | google.visualization.DateFormat |
รูปแบบตาราง | google.visualization.NumberFormat |
รูปแบบตาราง | google.visualization.PatternFormat |
สําคัญ: เครื่องมือจัดรูปแบบมักใช้ HTML เพื่อจัดรูปแบบข้อความ ดังนั้นจึงควรตั้งค่าตัวเลือก allowHtml
เป็น true
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ