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

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

ภาพรวม

ตารางที่จัดเรียงและแบ่งหน้าได้ คุณจะจัดรูปแบบเซลล์ของตารางได้โดยใช้สตริงรูปแบบ หรือโดยการแทรก 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

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

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