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

  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 ที่เกี่ยวข้อง โดยแต่ละแถว/คอลัมน์ในตาราง 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 สําหรับคลาสดังกล่าวในหน้าเว็บ รองรับชื่อพร็อพเพอร์ตี้ต่อไปนี้

  • headerRow - กําหนดชื่อคลาสให้กับแถวส่วนหัวของตาราง (องค์ประกอบ <tr>)
  • tableRow - กําหนดชื่อคลาสให้กับแถวที่ไม่ใช่ส่วนหัว (องค์ประกอบ <tr>)
  • oddTableRow - กําหนดชื่อคลาสให้กับแถวในตารางคี่ (องค์ประกอบ <tr>) หมายเหตุ: ต้องตั้งตัวเลือกRowStyle สลับเป็น "จริง"
  • selectedTableRow - กําหนดชื่อคลาสให้กับแถวในตารางที่เลือก (องค์ประกอบ <tr>)
  • hoverTableRow - กําหนดชื่อคลาสให้กับแถวในตารางที่วางเมาส์เหนือ (องค์ประกอบ <tr>)
  • headerCell - กําหนดชื่อคลาสให้กับเซลล์ทั้งหมดในแถวส่วนหัว (องค์ประกอบ <td>)
  • tableCell - กําหนดชื่อคลาสให้กับเซลล์ในตารางที่ไม่ใช่ส่วนหัวทั้งหมด (องค์ประกอบ <td>)
  • rowNumberCell - กําหนดชื่อคลาสให้กับเซลล์ในคอลัมน์หมายเลขแถว (องค์ประกอบ <td>) หมายเหตุ: ต้องตั้งค่าตัวเลือก ShowRowNumber เป็น "จริง"

ตัวอย่าง: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

หมายเหตุ: ใน CSS องค์ประกอบบางอย่างจะลบล้างองค์ประกอบอื่นๆ เช่น หากคุณระบุสีพื้นหลังสําหรับองค์ประกอบ <tr> และองค์ประกอบ <td> ระบบจะให้ความสําคัญกับสีพื้นหลังมากกว่าองค์ประกอบก่อนหน้า โปรดระบุสไตล์ CSS ที่เกี่ยวข้องทั้งหมดใน cssClassNames เพื่อหลีกเลี่ยงความขัดแย้ง

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
หมายเลขแถวแรก

หมายเลขแถวสําหรับแถวแรกในตารางข้อมูล ใช้เมื่อ ShowRowNumber เป็นจริงเท่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
คอลัมน์ที่ตรึงไว้

จํานวนคอลัมน์จากด้านซ้ายที่จะถูกตรึง คอลัมน์เหล่านี้จะยังคงอยู่เมื่อเลื่อนคอลัมน์ที่เหลือในแนวนอน หาก showRowNumber คือ false การตั้งค่า frozenColumns เป็น 0 จะแสดงเหมือนกับที่ตั้งไว้เป็น null แต่หากตั้งค่า showRowNumber เป็น true คอลัมน์หมายเลขแถวจะถูกระงับ

ประเภท: ตัวเลข
ค่าเริ่มต้น: Null
ความสูง

กําหนดความสูงขององค์ประกอบคอนเทนเนอร์ของการแสดงภาพ คุณใช้หน่วย HTML มาตรฐานได้ (เช่น "100px", "80em", "60") หากไม่ได้ระบุหน่วย ระบบจะถือว่าตัวเลขเป็นพิกเซล หากไม่ได้ระบุ เบราว์เซอร์จะปรับความสูงโดยอัตโนมัติเพื่อให้พอดีกับตาราง ลดขนาดลงมากที่สุดเท่าที่จะทําได้ หากตั้งค่าน้อยกว่าความสูงที่จําเป็น ตารางจะเพิ่มแถบเลื่อนแนวตั้ง (แถวส่วนหัวก็ค้างด้วย) หากตั้งค่าเป็น '100%' ตารางจะขยายเป็นองค์ประกอบคอนเทนเนอร์ให้ได้มากที่สุด

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
เพจ

และวิธีเปิดใช้การแบ่งหน้าผ่านข้อมูล เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้

  • 'enable' - ตารางจะมีปุ่มไปข้างหน้าและย้อนกลับ การคลิกปุ่มเหล่านี้จะดําเนินการการแบ่งหน้าและเปลี่ยนหน้าที่แสดง คุณอาจต้องการตั้งค่าตัวเลือก pageSize ด้วย
  • "event" - ตารางจะมีปุ่มไปข้างหน้าและหน้าย้อนกลับ แต่การคลิกปุ่มดังกล่าวจะทริกเกอร์เหตุการณ์ "หน้าเว็บ" และไม่เปลี่ยนหน้าที่แสดง ควรใช้ตัวเลือกนี้เมื่อโค้ดใช้ตรรกะการเปลี่ยนหน้าของตนเอง ดูตัวอย่าง TableQueryWrapper สําหรับตัวอย่างวิธีจัดการเหตุการณ์การแบ่งหน้าด้วยตนเอง
  • "ปิดใช้" - [ค่าเริ่มต้น] ไม่รองรับการแบ่งหน้า
    • ประเภท: สตริง
    ค่าเริ่มต้น: "ปิดใช้"
ขนาดหน้า

จํานวนแถวในแต่ละหน้าเมื่อเปิดใช้การแบ่งหน้าด้วยตัวเลือกหน้า

ประเภท: ตัวเลข
ค่าเริ่มต้น: 10
ปุ่มการแบ่งหน้า

ตั้งค่าตัวเลือกที่ระบุสําหรับปุ่มการแบ่งหน้า โดยมีตัวเลือกดังต่อไปนี้

  • "ทั้งคู่" - เปิดใช้ปุ่มก่อนหน้าและปุ่มถัดไป
  • "prev" - เปิดใช้เฉพาะปุ่มก่อนหน้า
  • "next" - เปิดใช้เฉพาะปุ่มถัดไปเท่านั้น
  • "auto" - ปุ่มเปิดใช้ตามหน้าปัจจุบัน ในหน้าแรกจะแสดงเฉพาะเท่านั้น ในหน้าสุดท้าย ระบบจะแสดงเฉพาะหน้าก่อนหน้า ไม่เช่นนั้นระบบจะเปิดใช้ทั้ง 2 อย่าง
  • number - จํานวนปุ่มการแบ่งหน้าที่จะแสดง ตัวเลขที่อาจไม่เหมาะสมจะลบล้างหมายเลขที่คํานวณแล้วจาก pageSize
ประเภท: สตริงหรือตัวเลข
ค่าเริ่มต้น: "อัตโนมัติ"
ตาราง RTL

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
เลื่อนไปทางซ้ายทางด้านซ้าย

กําหนดตําแหน่งการเลื่อนในแนวนอน หน่วยเป็นพิกเซล หากตารางมีแถบเลื่อนแนวนอนเนื่องจากคุณตั้งค่าพร็อพเพอร์ตี้ความกว้างไว้ ตารางจะเลื่อนผ่านจํานวนพิกเซลที่เลยคอลัมน์ด้านซ้ายสุด

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
แสดงหมายเลขแถว

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
จัดเรียง

หากวิธีจัดเรียงคอลัมน์เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ หากเปิดใช้การจัดเรียง ให้พิจารณาตั้งค่าพร็อพเพอร์ตี้การจัดเรียงAscending และจัดเรียงคอลัมน์ด้วย เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้

  • "enable" - [ค่าเริ่มต้น] ผู้ใช้สามารถคลิกส่วนหัวของคอลัมน์เพื่อจัดเรียงตามคอลัมน์ที่คลิก เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ แถวจะถูกจัดเรียงโดยอัตโนมัติ และทริกเกอร์เหตุการณ์ "จัดเรียง"
  • "event" - เมื่อผู้ใช้คลิกส่วนหัวของคอลัมน์ ระบบจะทริกเกอร์เหตุการณ์ "จัดเรียง" แต่ระบบจะไม่จัดเรียงแถวโดยอัตโนมัติ ควรใช้ตัวเลือกนี้เมื่อหน้าเว็บใช้การจัดเรียงของตนเอง ดูตัวอย่าง TableQueryWrapper สําหรับตัวอย่างวิธีจัดการเหตุการณ์การจัดเรียงด้วยตนเอง
  • 'ปิดใช้' - การคลิกส่วนหัวของคอลัมน์จะไม่มีผลใดๆ
ประเภท: สตริง
ค่าเริ่มต้น: 'เปิดใช้'
จัดเรียงจาก Z ถึง A

ลําดับที่จัดเรียงคอลัมน์เริ่มต้น "จริง" สําหรับน้อยไปมาก และ "เท็จ" สําหรับมากไปหาน้อย ระบบจะละเว้นหากไม่ได้ระบุ sortColumn

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
จัดเรียงคอลัมน์

ดัชนีของคอลัมน์ในตารางข้อมูล ที่มีการจัดเรียงตารางในตอนแรก คอลัมน์จะมีลูกศรเล็กๆ กํากับลําดับการจัดเรียง

ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
หน้าเริ่มต้น

หน้าแรกของตารางที่จะแสดง ใช้เฉพาะเมื่อ page อยู่ในโหมด/เปิดใช้

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ความกว้าง

ตั้งค่าความกว้างขององค์ประกอบคอนเทนเนอร์ของการแสดงภาพ คุณใช้หน่วย HTML มาตรฐานได้ (เช่น "100px", "80em", "60") หากไม่ได้ระบุหน่วย ระบบจะถือว่าตัวเลขเป็นพิกเซล หากไม่ได้ระบุ เบราว์เซอร์จะปรับความกว้างโดยอัตโนมัติเพื่อให้พอดีกับตาราง ลดขนาดลงมากที่สุดเท่าที่จะทําได้ หากตั้งค่าน้อยกว่าความกว้างที่ต้องการ ตารางจะเพิ่มแถบเลื่อนแนวนอน หากตั้งค่าเป็น '100%' ตารางจะขยายไปสู่องค์ประกอบคอนเทนเนอร์ให้มากที่สุด

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ

เมธอด

วิธีการ
draw(data, options)

วาดตาราง

ประเภทการคืนสินค้า: ไม่มี
getSelection()

การใช้งาน getSelection มาตรฐาน องค์ประกอบการเลือกคือองค์ประกอบแถวทั้งหมด แสดงแถวที่เลือกได้มากกว่า 1 แถว ดัชนีแถวในออบเจ็กต์การเลือกหมายถึงตารางข้อมูลต้นฉบับโดยไม่คํานึงถึงการโต้ตอบของผู้ใช้ (การจัดเรียง การแบ่งหน้า ฯลฯ)

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

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
getSortInfo()

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

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

ประเภทการแสดงผล: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้
  • column - (ตัวเลข) ดัชนีของคอลัมน์ที่มีการจัดเรียงตาราง
  • ascending - (บูลีน) จริงหากจัดเรียงจากน้อยไปมาก เท็จ หากมากไปน้อย
  • sortedIndexes - (อาร์เรย์ที่เป็นตัวเลข) โดยอาร์เรย์ของตัวเลข โดยที่ดัชนีในอาร์เรย์คือหมายเลขแถวที่มีการจัดเรียง (ในตารางที่มองเห็นได้) และค่านั้นเป็นดัชนีของแถวนั้นในตารางข้อมูลที่สําคัญ (ไม่ใช่การจัดเรียง)
setSelection(selection)

การใช้งาน setSelection() มาตรฐาน แต่จะเลือกได้เฉพาะทั้งแถวหรือหลายแถวเท่านั้น แถวแถวในออบเจ็กต์การเลือกจะอ้างอิงตารางข้อมูลเดิมโดยไม่คํานึงถึงการโต้ตอบของผู้ใช้ (การจัดเรียง การแบ่งหน้า ฯลฯ)

ประเภทการคืนสินค้า: ไม่มี
clearChart()

ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด

ประเภทการคืนสินค้า: ไม่มี

เหตุการณ์

ชื่อ
เลือก

เหตุการณ์การเลือกมาตรฐาน แต่เลือกทั้งแถวได้เท่านั้น

พร็อพเพอร์ตี้: ไม่มี
เพจ

ทํางานเมื่อผู้ใช้คลิกปุ่มการนําทางหน้าเว็บ

พร็อพเพอร์ตี้: page: ตัวเลข ดัชนีของหน้าเว็บที่จะไปยัง
จัดเรียง

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

พร็อพเพอร์ตี้: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้
  • column - (ตัวเลข) ดัชนีของคอลัมน์ที่มีการจัดเรียงตาราง
  • ascending - (บูลีน) จริงหากจัดเรียงจากน้อยไปมาก เท็จ หากมากไปน้อย
  • sortedIndexes - (อาร์เรย์ที่เป็นตัวเลข) โดยอาร์เรย์ของตัวเลข โดยที่ดัชนีในอาร์เรย์คือหมายเลขแถวที่มีการจัดเรียง (ในตารางที่มองเห็นได้) และค่าจะเป็นดัชนีของแถวนั้นในตารางข้อมูลที่สําคัญ (ไม่ได้จัดเรียง)
พร้อม

แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่จะเรียกใช้เมธอดการวาด และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น

พร็อพเพอร์ตี้: ไม่มี

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

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

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

ตัวจัดรูปแบบตาราง
รูปแบบตารางตาราง google.visualization.arrowFormat
รูปแบบตาราง google.visualization.BarFormat
รูปแบบสีตาราง google.visualization.ColorFormat
รูปแบบตาราง google.visualization.DateFormat
รูปแบบตาราง google.visualization.NumberFormat
รูปแบบตาราง google.visualization.PatternFormat

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

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

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