หน้านี้ได้รับการแปลโดย Cloud Translation API

การแสดงภาพ: ตาราง

ภาพรวม
ตัวอย่าง
กำลังโหลด
รูปแบบข้อมูล
1. พร็อพเพอร์ตี้ที่กำหนดเอง
ตัวเลือกการกำหนดค่า
เมธอด
เหตุการณ์
เครื่องมือจัดรูปแบบ
นโยบายข้อมูล

ภาพรวม

ตารางที่จัดเรียงและแบ่งหน้าได้ คุณจะจัดรูปแบบเซลล์ของตารางได้โดยใช้สตริงรูปแบบ หรือโดยการแทรก 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 ที่สอดคล้องกัน โดยแปลงแต่ละแถว/คอลัมน์ในตาราง DataTable เป็นแถว/คอลัมน์ในตาราง HTML แต่ละคอลัมน์ต้องเป็นประเภทข้อมูลเดียวกัน และระบบรองรับข้อมูลการแสดงภาพแบบมาตรฐานทั้งหมด (สตริง บูลีน ตัวเลข ฯลฯ)

พร็อพเพอร์ตี้ที่กำหนดเอง

คุณกำหนดพร็อพเพอร์ตี้ที่กำหนดเองต่อไปนี้ให้กับองค์ประกอบตารางข้อมูลได้โดยใช้เมธอด setProperty() ของ DataTable

ชื่อพร็อพเพอร์ตี้	ใช้กับ	คำอธิบาย
className	เซลล์	ชื่อคลาสสตริงที่จะกำหนดให้กับแต่ละเซลล์ ใช้เพื่อกำหนดการจัดรูปแบบ CSS ให้กับแต่ละเซลล์
รูปแบบ	เซลล์	สตริงรูปแบบที่จะกำหนดให้แทรกในบรรทัดให้กับเซลล์ การดำเนินการนี้จะลบล้างรูปแบบคลาส CSS ที่ใช้กับเซลล์นั้น คุณต้องตั้งค่าพร็อพเพอร์ตี้ allowHtml=true จึงจะทำงานได้ ตัวอย่าง: `'border: 1px solid green;'`

ตัวอย่าง

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

ตัวเลือกการกำหนดค่า

ชื่อ
allowHtml	หากตั้งค่าเป็น "จริง" ค่าที่จัดรูปแบบของเซลล์ที่มีแท็ก HTML จะแสดงผลเป็น HTML หากตั้งค่าเป็น "เท็จ" ตัวจัดรูปแบบที่กำหนดเองส่วนใหญ่จะทำงานไม่ถูกต้อง ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
alternatingRowStyle	กำหนดว่าจะกำหนดรูปแบบการสลับสีให้กับแถวคู่และแถวคี่หรือไม่ ประเภท: บูลีน ค่าเริ่มต้น: true
cssClassNames	ออบเจ็กต์ที่แต่ละชื่อพร็อพเพอร์ตี้อธิบายองค์ประกอบตาราง และค่าพร็อพเพอร์ตี้เป็นสตริงที่กำหนดคลาสที่จะกำหนดให้กับองค์ประกอบตารางนั้น ใช้พร็อพเพอร์ตี้นี้เพื่อกำหนด CSS ที่กำหนดเองให้กับองค์ประกอบที่เฉพาะเจาะจงของตาราง หากต้องการใช้พร็อพเพอร์ตี้นี้ ให้กำหนดออบเจ็กต์ โดยชื่อพร็อพเพอร์ตี้จะระบุองค์ประกอบตาราง และค่าพร็อพเพอร์ตี้เป็นสตริงซึ่งระบุชื่อคลาสที่จะกำหนดให้กับองค์ประกอบนั้น จากนั้นคุณต้องกำหนดรูปแบบ CSS สำหรับคลาสนั้นในหน้าเว็บ ชื่อพร็อพเพอร์ตี้ที่รองรับมีดังนี้ `headerRow` - กำหนดชื่อคลาสให้กับแถวส่วนหัวของตาราง (องค์ประกอบ `<tr>`) `tableRow` - กำหนดชื่อคลาสให้กับแถวที่ไม่ใช่ส่วนหัว (องค์ประกอบ `<tr>`) `oddTableRow` - กำหนดชื่อคลาสให้กับแถวตารางคี่ (องค์ประกอบ `<tr>` รายการ) หมายเหตุ: ต้องตั้งค่าตัวเลือก SelectnatingRowStyle เป็น "จริง" `selectedTableRow` - กำหนดชื่อคลาสให้กับแถวในตารางที่เลือก (องค์ประกอบ `<tr>`) `hoverTableRow` - กำหนดชื่อคลาสให้กับแถวในตารางที่วางเมาส์เหนือ (องค์ประกอบ `<tr>`) `headerCell` - กำหนดชื่อคลาสให้กับเซลล์ทั้งหมดในแถวส่วนหัว (องค์ประกอบ `<td>`) `tableCell` - กำหนดชื่อคลาสให้กับเซลล์ในตารางที่ไม่ใช่ส่วนหัวทั้งหมด (องค์ประกอบ `<td>`) `rowNumberCell` - กำหนดชื่อคลาสให้กับเซลล์ในคอลัมน์หมายเลขแถว (องค์ประกอบ `<td>`) หมายเหตุ: ต้องตั้งค่าตัวเลือก showRowNumber เป็น "จริง" ตัวอย่าง: `var cssClassNames = {headerRow: 'bigAndBoldClass', hoverTableRow: 'highlightClass'};` หมายเหตุ: ใน CSS องค์ประกอบบางอย่างจะลบล้างองค์ประกอบอื่นๆ เช่น หากคุณระบุสีพื้นหลังสำหรับองค์ประกอบ `<tr>` และองค์ประกอบ `<td>` สีหลังจะมีความสำคัญเหนือกว่าองค์ประกอบเดิม โปรดระบุสไตล์ CSS ที่เกี่ยวข้องทั้งหมดใน `cssClassNames` เพื่อหลีกเลี่ยงความขัดแย้ง ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
firstRowNumber	หมายเลขแถวสำหรับแถวแรกในตาราง dataTable ใช้เฉพาะเมื่อ showRowNumber เป็นจริงเท่านั้น ประเภท: ตัวเลข ค่าเริ่มต้น: 1
frozenColumns	จำนวนคอลัมน์จากด้านซ้ายที่จะถูกตรึง คอลัมน์เหล่านี้จะยังคงอยู่ในตำแหน่งเดิมเมื่อเลื่อนคอลัมน์ที่เหลือในแนวนอน หาก `showRowNumber` คือ `false` การตั้งค่า `frozenColumns` เป็น 0 จะปรากฏเหมือนกับที่ตั้งค่าเป็น `null` แต่หากตั้งค่า `showRowNumber` เป็น `true` คอลัมน์หมายเลขแถวจะถูกระงับ ประเภท: ตัวเลข ค่าเริ่มต้น: null
ส่วนสูง	กำหนดความสูงขององค์ประกอบคอนเทนเนอร์ของการแสดงภาพ คุณใช้หน่วย HTML มาตรฐานได้ (เช่น "100px", "80em", "60") หากไม่ได้ระบุหน่วย ระบบจะถือว่าตัวเลขเป็นพิกเซล หากไม่ระบุ เบราว์เซอร์จะปรับความสูงให้พอดีกับตารางโดยอัตโนมัติ โดยจะย่อขนาดลงให้ได้มากที่สุดเท่าที่จะเป็นไปได้ หากกำหนดน้อยกว่าความสูงที่กำหนด ตารางจะเพิ่มแถบเลื่อนแนวตั้ง (แถวส่วนหัวถูกตรึงไว้ด้วย) หากตั้งค่าเป็น "100%" ตารางจะขยายไปยังองค์ประกอบคอนเทนเนอร์ให้ได้มากที่สุด ประเภท: สตริง ค่าเริ่มต้น: อัตโนมัติ
เพจ	เปิดใช้การแบ่งหน้าข้อมูลหรือไม่ และวิธีเปิดใช้ เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้ "enable" - ตารางจะมีปุ่ม Page-Forward และ Page-back การคลิกปุ่มเหล่านี้จะทำการสลับหน้าและเปลี่ยนหน้าที่แสดง คุณอาจต้องการตั้งค่าตัวเลือก pageSize ด้วย "เหตุการณ์" - ตารางจะมีปุ่มไปข้างหน้าและหน้าที่ย้อนกลับ แต่การคลิกปุ่มดังกล่าว จะทริกเกอร์เหตุการณ์ "หน้าเว็บ" และจะไม่เปลี่ยนแปลงหน้าที่แสดง ควรใช้ตัวเลือกนี้เมื่อโค้ดใช้ตรรกะการพลิกหน้าของตนเอง ดูตัวอย่าง TableQueryWrapper สําหรับตัวอย่างวิธีจัดการเหตุการณ์การแบ่งหน้าด้วยตนเอง 'disable' - [ค่าเริ่มต้น] ไม่สนับสนุนการแบ่งหน้า ประเภท: สตริง ค่าเริ่มต้น: "disable"
pageSize	จำนวนแถวในแต่ละหน้า เมื่อเปิดใช้การแบ่งหน้าด้วยตัวเลือกหน้าเว็บ ประเภท: ตัวเลข ค่าเริ่มต้น: 10
pagingButtons	ตั้งค่าตัวเลือกที่ระบุสำหรับปุ่มการแบ่งหน้า โดยมีตัวเลือกดังต่อไปนี้ "ทั้งสองแบบ" - เปิดใช้งานปุ่มก่อนหน้าและถัดไป "prev" - เปิดใช้เฉพาะปุ่มก่อนหน้าเท่านั้น "ถัดไป" - เปิดใช้เฉพาะปุ่มถัดไปเท่านั้น "auto" - ปุ่มต่างๆ จะใช้งานได้ตามหน้าปัจจุบัน ในหน้าแรกเท่านั้นที่แสดงอยู่ถัดไป ในหน้าสุดท้ายจะแสดงเฉพาะส่วนก่อนหน้า มิเช่นนั้นระบบจะเปิดใช้ทั้ง 2 อย่าง number - จำนวนปุ่มการแบ่งหน้าที่จะแสดง ตัวเลขที่ชัดเจนนี้จะลบล้าง ตัวเลขที่คำนวณจาก pageSize ประเภท: สตริงหรือหมายเลข ค่าเริ่มต้น: "auto"
rtlTable	เพิ่มการรองรับพื้นฐานสำหรับภาษาที่อ่านจากขวาไปซ้าย (เช่น อาหรับหรือฮีบรู) โดยกลับลำดับคอลัมน์ของตาราง เพื่อให้คอลัมน์ 0 เป็นคอลัมน์ด้านขวาสุด และคอลัมน์สุดท้ายคือคอลัมน์ด้านซ้ายสุด การดำเนินการนี้ไม่ส่งผลต่อดัชนีคอลัมน์ในข้อมูลที่สำคัญ แต่ส่งผลเฉพาะกับลำดับของการแสดงผลเท่านั้น การแสดงภาพตารางไม่รองรับการแสดงภาษาแบบ 2 ทิศทาง (BiDi) เต็มรูปแบบแม้ว่าจะใช้ตัวเลือกนี้ก็ตาม ระบบจะไม่สนใจตัวเลือกนี้หากคุณเปิดใช้การแบ่งหน้า (โดยใช้ตัวเลือกหน้า) หรือหากตารางมีแถบเลื่อนเนื่องจากคุณได้ระบุตัวเลือกความสูงและความกว้างที่เล็กกว่าขนาดตารางที่กำหนด ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
scrollLeftStartPosition	กำหนดตำแหน่งการเลื่อนแนวนอนในหน่วยพิกเซล หากตารางมีแถบเลื่อนแนวนอนเนื่องจากคุณตั้งค่าพร็อพเพอร์ตี้ความกว้างไว้ ตารางจะเปิดขึ้นโดยเลื่อนผ่านไปหลายพิกเซลผ่านคอลัมน์ด้านซ้ายสุด ประเภท: ตัวเลข ค่าเริ่มต้น: 0
showRowNumber	หากตั้งค่าเป็น "จริง" จะแสดงหมายเลขแถวเป็นคอลัมน์แรกของตาราง ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
จัดเรียง	วิธีการจัดเรียงคอลัมน์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ หากเปิดใช้การจัดเรียง ให้พิจารณาตั้งค่าพร็อพเพอร์ตี้ SortAscending และ SortColumn ด้วย เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้ "enable" - [Default] ผู้ใช้จะคลิกส่วนหัวของคอลัมน์เพื่อจัดเรียงตามคอลัมน์ที่มีการคลิกได้ เมื่อผู้ใช้คลิกที่ส่วนหัวคอลัมน์ ระบบจะจัดเรียงแถวโดยอัตโนมัติและทริกเกอร์เหตุการณ์ "จัดเรียง" "event" - เมื่อผู้ใช้คลิกที่ส่วนหัวของคอลัมน์ ระบบจะทริกเกอร์เหตุการณ์ "จัดเรียง" แต่จะไม่มีการจัดเรียงแถวโดยอัตโนมัติ ควรใช้ตัวเลือกนี้เมื่อหน้าเว็บใช้การจัดเรียงของตนเอง ดู ตัวอย่าง TableQueryWrapper เพื่อดูตัวอย่างวิธีจัดการเหตุการณ์การจัดเรียงด้วยตนเอง "ปิดใช้" - การคลิกส่วนหัวของคอลัมน์จะไม่มีผล ประเภท: สตริง ค่าเริ่มต้น: "enable"
sortAscending	ลำดับการจัดเรียงคอลัมน์การจัดเรียงเริ่มต้น True สำหรับน้อยไปมาก, False สำหรับมากไปน้อย ไม่สนใจหากไม่ได้ระบุ `sortColumn` ประเภท: บูลีน ค่าเริ่มต้น: true
sortColumn	ดัชนีของคอลัมน์ในตารางข้อมูล ซึ่งเป็นการจัดเรียงตารางในตอนแรก คอลัมน์จะมีลูกศรเล็กๆ ที่ระบุลำดับการจัดเรียง ประเภท: ตัวเลข ค่าเริ่มต้น: -1
startPage	หน้าแรกของตารางที่แสดง ใช้เฉพาะเมื่อ `page` อยู่ในโหมดเปิดใช้/เหตุการณ์ ประเภท: ตัวเลข ค่าเริ่มต้น: 0
ความกว้าง	กำหนดความกว้างขององค์ประกอบคอนเทนเนอร์ของการแสดงภาพ คุณใช้หน่วย HTML มาตรฐานได้ (เช่น "100px", "80em", "60") หากไม่ได้ระบุหน่วย ระบบจะถือว่าตัวเลขเป็นพิกเซล หากไม่ระบุ เบราว์เซอร์จะปรับความกว้างให้พอดีกับตารางโดยอัตโนมัติ โดยจะย่อขนาดลงให้มากที่สุดเท่าที่จะทำได้ หากกำหนดน้อยกว่าความกว้างที่กำหนด ตารางจะเพิ่มแถบเลื่อนแนวนอน หากตั้งค่าเป็น "100%" ตารางจะขยายไปยังองค์ประกอบคอนเทนเนอร์ให้ได้มากที่สุด ประเภท: สตริง ค่าเริ่มต้น: อัตโนมัติ

วิธีการ

วิธีการ
`draw(data, options)`	วาดตาราง ประเภทการคืนสินค้า: ไม่มี
`getSelection()`	การใช้ getSelection มาตรฐาน องค์ประกอบการเลือกเป็นองค์ประกอบแถวทั้งหมด แสดงผลแถวที่เลือกได้มากกว่า 1 แถว ดัชนีแถวในออบเจ็กต์การเลือกจะอ้างอิงตารางข้อมูลต้นฉบับโดยไม่คำนึงถึงการโต้ตอบของผู้ใช้ (จัดเรียง การแบ่งหน้า ฯลฯ) โปรดทราบว่าการเปิด/ปิดการเลือก: การคลิกเซลล์ในครั้งแรกจะเลือกเซลล์นั้น การคลิกเซลล์อีกครั้งจะเป็นการยกเลิกการเลือก ซึ่งจะส่งผลให้เกิดเหตุการณ์การเลือก แต่จะไม่มีการเลือกรายการที่เลือกในออบเจ็กต์การเลือกที่ดึงมา ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
`getSortInfo()`	เรียกใช้เมธอดนี้เพื่อเรียกข้อมูลเกี่ยวกับสถานะการจัดเรียงปัจจุบันของตารางที่มีการจัดเรียง (โดยปกติผู้ใช้มักจะคลิกส่วนหัวของคอลัมน์เพื่อจัดเรียงแถวตามคอลัมน์ที่ระบุ) หากคุณปิดใช้การจัดเรียง วิธีการนี้จะไม่สามารถใช้งานได้ หากคุณไม่ได้จัดเรียงข้อมูลในโค้ด หรือผู้ใช้ไม่ได้จัดเรียงข้อมูลโดยเลือกโค้ด ระบบจะส่งคืนค่าการจัดเรียงเริ่มต้น ประเภทผลลัพธ์: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้ `column` - (ตัวเลข) ดัชนีคอลัมน์ที่จัดเรียงตาราง `ascending` - (บูลีน) true ถ้าการจัดเรียงเป็นค่าจากน้อยไปมาก และเป็น false หากจัดเรียงจากมากไปน้อย `sortedIndexes` - (อาร์เรย์ตัวเลข) อาร์เรย์ของตัวเลข โดยที่ดัชนีในอาร์เรย์คือหมายเลขแถวที่จัดเรียงแล้ว (ในตารางที่มองเห็นได้) และค่าคือดัชนีของแถวนั้นในตารางข้อมูลที่สำคัญ (ไม่ได้จัดเรียง)
`setSelection(selection)`	การใช้งาน `setSelection()` แบบมาตรฐาน แต่เลือกได้ทั้งแถวหรือหลายแถวเท่านั้น ดัชนีแถวในออบเจ็กต์การเลือกจะอ้างอิงตารางข้อมูลต้นฉบับโดยไม่คำนึงถึงการโต้ตอบของผู้ใช้ (จัดเรียง การแบ่งหน้า ฯลฯ) ประเภทการคืนสินค้า: ไม่มี
`clearChart()`	ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

ชื่อ
เลือก	เหตุการณ์การเลือกแบบมาตรฐาน แต่เลือกได้เพียงทั้งแถวเท่านั้น ที่พัก: ไม่มี
เพจ	ทริกเกอร์เมื่อผู้ใช้คลิกปุ่มการนำทางหน้าเว็บ พร็อพเพอร์ตี้: `page`: ตัวเลข ดัชนีของหน้าที่จะไปยังส่วนต่างๆ
จัดเรียง	ทริกเกอร์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์และตัวเลือกการจัดเรียงไม่ใช่ "ปิดใช้" คุณสมบัติ: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้ `column` - (ตัวเลข) ดัชนีคอลัมน์ที่จัดเรียงตาราง `ascending` - (บูลีน) true ถ้าการจัดเรียงเป็นค่าจากน้อยไปมาก และเป็น false หากจัดเรียงจากมากไปน้อย `sortedIndexes` - (อาร์เรย์ตัวเลข) อาร์เรย์ของตัวเลข โดยที่ดัชนีในอาร์เรย์คือหมายเลขแถวที่จัดเรียงแล้ว (ในตารางที่มองเห็นได้) และค่าคือดัชนีของแถวนั้นในตารางข้อมูลที่สำคัญ (ไม่ได้จัดเรียง)
พร้อม	แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนที่จะเรียกวิธีการวาด และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น ที่พัก: ไม่มี

ตัวจัดรูปแบบ

หมายเหตุ: การแสดงภาพตารางมีชุดออบเจ็กต์ตัวจัดรูปแบบที่มีตัวจัดรูปแบบทั่วไปมาแทนที่ ซึ่งมีลักษณะการทำงานแบบเดียวกัน แต่ใช้ในการแสดงภาพใดก็ได้

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

ตัวจัดรูปแบบตาราง
TableArrowFormat	google.visualization.ArrowFormat
TableBarFormat	google.visualization.BarFormat
TableColorFormat	google.visualization.ColorFormat
TableDateFormat	google.visualization.DateFormat
TableNumberFormat	google.visualization.NumberFormat
TablePatternFormat	google.visualization.PatternFormat

สำคัญ: ตัวจัดรูปแบบมักจะใช้ HTML เพื่อจัดรูปแบบข้อความ คุณจึงควรตั้งค่าตัวเลือก allowHtml เป็น true

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ