เอกสารอ้างอิง Google Visualization API

หน้านี้แสดงรายการออบเจ็กต์ที่ Google Visualization API แสดง รวมถึงวิธีการมาตรฐานที่การแสดงภาพทั้งหมดแสดง

หมายเหตุ: เนมสเปซของ Google Visualization API คือ google.visualization.*

  1. คลาส DataTable
  2. คลาส DataView
  3. คลาส ChartWrapper
  4. ชั้นเรียน ChartEditor
  5. วิธีการจัดการข้อมูล
    1. group()
    2. join()
  6. ตัวจัดรูปแบบ
    1. ArrowFormat
    2. BarFormat
    3. ColorFormat
    4. DateFormat
    5. NumberFormat
    6. PatternFormat
  7. ชั้นเรียน GadgetHelper
  8. คลาสการค้นหา
    1. การค้นหา
    2. QueryResponse
  9. คลาสการแสดงข้อผิดพลาด
  10. เหตุการณ์
    1. google.visualization.events.addListener()
    2. google.visualization.events.addOneTimeListener()
    3. google.visualization.events.removeListener()
    4. google.visualization.events.removeAllListeners()
    5. google.visualization.events.trigger()
  11. พร็อพเพอร์ตี้และเมธอดการแสดงภาพมาตรฐาน
    1. เครื่องมือสร้าง
    2. draw()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
  12. วิธีการแบบคงที่ต่างๆ
    1. arrayToDataTable()
    2. drawChart()
    3. drawToolbar()

หมายเหตุเกี่ยวกับอาร์เรย์

บางเบราว์เซอร์จัดการเครื่องหมายจุลภาคต่อท้ายในอาร์เรย์ JavaScript ได้ไม่ถูกต้อง ดังนั้นโปรดอย่าใช้เครื่องหมายจุลภาค แต่หากเป็นค่าว่างในช่วงกลางของอาร์เรย์ก็ไม่เป็นไร โปรดดูตัวอย่างต่อไปนี้

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

คลาสตารางข้อมูล

แสดงตารางค่าแบบ 2 มิติที่เปลี่ยนแปลงได้ หากต้องการทำสำเนาแบบอ่านอย่างเดียวของ DataTable (เลือกกรองเพื่อแสดงค่า แถว หรือคอลัมน์ที่เฉพาะเจาะจง) ให้สร้าง DataView

แต่ละคอลัมน์จะได้รับการกำหนดประเภทข้อมูล รวมถึงพร็อพเพอร์ตี้ที่ไม่บังคับหลายรายการ เช่น รหัส ป้ายกำกับ และสตริงรูปแบบ

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

ดูเพิ่มเติมที่ QueryResponse.getDataTable

เครื่องมือสร้าง

ไวยากรณ์

DataTable(opt_data, opt_version)

opt_data
[ไม่บังคับ] ข้อมูลที่ใช้เริ่มต้นตาราง ซึ่งอาจเป็น JSON ที่แสดงผลโดยการเรียกใช้ DataTable.toJSON() ในตารางที่มีการป้อนข้อมูล หรือออบเจ็กต์ JavaScript ที่มีข้อมูลที่ใช้ในการเริ่มต้นตาราง โครงสร้างของออบเจ็กต์ลิเทอรัล JavaScript มีคำอธิบายที่นี่ หากไม่ระบุพารามิเตอร์นี้ ระบบจะแสดงผลตารางข้อมูลใหม่ที่ว่างเปล่า
opt_version
[ไม่บังคับ] ค่าตัวเลขที่ระบุเวอร์ชันของโปรโตคอลการใช้สาย โดยมีเพียงผู้ติดตั้งใช้งานแหล่งข้อมูลและเครื่องมือแผนภูมิเท่านั้นที่ใช้ เวอร์ชันปัจจุบันคือ 0.6

รายละเอียด

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

แต่ละเซลล์ในตารางจะมีค่าอยู่ เซลล์อาจมีค่า Null หรือค่าของประเภทที่ระบุโดยคอลัมน์ คุณจะเก็บข้อมูลเวอร์ชัน "ที่จัดรูปแบบ" ไว้ในเซลล์หรือไม่ก็ได้ ซึ่งเป็นข้อมูลในรูปแบบสตริงที่มีการจัดรูปแบบเพื่อการแสดงผลด้วยการแสดงข้อมูลผ่านภาพ การแสดงข้อมูลผ่านภาพสามารถใช้รูปแบบที่จัดรูปแบบสำหรับการแสดงผลได้ (แต่ไม่จำเป็น) แต่จะใช้ข้อมูลนั้นในการจัดเรียงหรือการคำนวณทุกครั้ง (เช่น การระบุตำแหน่งในกราฟเพื่อวางจุด) เช่น อาจกำหนดค่า "ต่ำ" "กลาง" และ "สูง" เป็นค่าที่จัดรูปแบบเป็นค่าเซลล์ที่เป็นตัวเลขเป็น 1, 2 และ 3

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

หากคุณเปลี่ยนค่าใน DataTable หลังจากส่งผ่านค่าไปยังเมธอด draw() ของการแสดงภาพ การเปลี่ยนแปลงจะไม่เปลี่ยนแปลงแผนภูมิโดยทันที คุณต้องเรียกใช้ draw() อีกครั้งเพื่อแสดงการเปลี่ยนแปลง

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

ตัวอย่าง

ตัวอย่างต่อไปนี้สาธิตการสร้างและป้อนข้อมูล DataTable ด้วยสตริงตามตัวอักษรด้วยข้อมูลเดียวกันกับที่แสดงในตัวอย่าง JavaScript ด้านบน 

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

ตัวอย่างต่อไปนี้จะสร้าง DataTable ใหม่ที่ว่างเปล่า จากนั้นป้อนข้อมูลดังกล่าวด้วยตนเองด้วยข้อมูลเดียวกันกับด้านบน 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);
ฉันควรสร้าง DataTable ใน JavaScript หรือสัญกรณ์ลิงก์ออบเจ็กต์ไหม

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

  • การสร้างและเติมข้อมูลในตารางใน JavaScript โดยการเรียกใช้ addColumn(), addRow() และ addRows() เป็นโค้ดที่อ่านได้ง่าย วิธีนี้มีประโยชน์เมื่อคุณจะป้อนรหัสเอง ซึ่งช้ากว่าการใช้สัญลักษณ์ออบเจ็กต์ลิเทอรัล (อธิบายต่อไป) แต่ในตารางขนาดเล็ก (เช่น 1,000 เซลล์) คุณอาจไม่เห็นความแตกต่าง มากนัก
  • การประกาศโดยตรงของออบเจ็กต์ DataTable ที่ใช้สัญกรณ์ออบเจ็กต์ Literal จะเร็วกว่ามากในตารางขนาดใหญ่ อย่างไรก็ตาม การใช้ไวยากรณ์ที่ถูกต้องอาจยุ่งยากซับซ้อน ให้ใช้ตัวเลือกนี้หากคุณสามารถสร้างไวยากรณ์ตามตัวอักษรของออบเจ็กต์ในโค้ดได้ ซึ่งจะช่วยลดโอกาสที่จะเกิดข้อผิดพลาด

 

วิธีการ

วิธีการ ผลลัพธ์ คำอธิบาย

addColumn(type, opt_label, opt_id)

หรือ

addColumn(description_object)

 ตัวเลข

เพิ่มคอลัมน์ใหม่ในตารางข้อมูล และแสดงดัชนีของคอลัมน์ใหม่ ทุกเซลล์ของคอลัมน์ใหม่จะได้รับการกำหนดค่า null วิธีการนี้มีลายเซ็น 2 ลายเซ็น ได้แก่

ลายเซ็นแรกมีพารามิเตอร์ต่อไปนี้

  • type - สตริงที่มีประเภทข้อมูลของค่าในคอลัมน์ ซึ่งอาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้ 'string', 'number', 'boolean', 'date', 'datetime', และ 'timeofday'.
  • opt_label - [ไม่บังคับ] สตริงที่มีป้ายกำกับของคอลัมน์ โดยทั่วไปแล้ว ป้ายกำกับคอลัมน์จะแสดงเป็นส่วนหนึ่งของการแสดงภาพ เช่น เป็นส่วนหัวของคอลัมน์ในตาราง หรือเป็นป้ายกำกับคำอธิบายในแผนภูมิวงกลม หากไม่ได้ระบุค่า ระบบจะกำหนดสตริงว่าง
  • opt_id - [ไม่บังคับ] สตริงที่มีตัวระบุที่ไม่ซ้ำกันสำหรับคอลัมน์ หากไม่ได้ระบุค่า ระบบจะกำหนดสตริงว่าง

ลายเซ็นที่สองมีพารามิเตอร์ออบเจ็กต์เดี่ยวที่มีสมาชิกต่อไปนี้

  • type - สตริงที่อธิบายประเภทข้อมูลคอลัมน์ ค่าเดียวกับ type ด้านบน
  • label - [ไม่บังคับ สตริง] ป้ายกำกับสำหรับคอลัมน์
  • id - [ไม่บังคับ สตริง] รหัสสำหรับคอลัมน์
  • role - [ไม่บังคับ สตริง] บทบาทสำหรับคอลัมน์
  • pattern - [ไม่บังคับ, สตริง] สตริงรูปแบบตัวเลข (หรือวันที่) ที่ระบุวิธีแสดงค่าคอลัมน์

ดูเพิ่มเติม getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole

addRow(opt_cellArray) ตัวเลข

เพิ่มแถวใหม่ในตารางข้อมูล และแสดงดัชนีของแถวใหม่

  • opt_cellArray [optional] ออบเจ็กต์แถวในรูปแบบ JavaScript ซึ่งระบุข้อมูลสำหรับแถวใหม่ หากไม่ได้รวมพารามิเตอร์นี้ไว้ เมธอดนี้จะเพิ่มแถวใหม่ที่ไม่มีข้อมูลไปยังจุดสิ้นสุดของตาราง พารามิเตอร์นี้เป็นอาร์เรย์ของค่าเซลล์ หากคุณต้องการระบุค่าสำหรับเซลล์เท่านั้น ให้ระบุค่าของเซลล์ (เช่น 55 หรือ 'hello'); หากต้องการระบุค่าที่จัดรูปแบบและ/หรือพร็อพเพอร์ตี้สำหรับเซลล์ ให้ใช้ออบเจ็กต์เซลล์ (เช่น {v:55, f:'50-Five'}) คุณอาจรวมค่าง่ายๆ และออบเจ็กต์เซลล์ในการเรียกใช้เมธอดเดียวกันได้) ใช้ null หรือรายการอาร์เรย์ที่ว่างเปล่าสำหรับเซลล์ว่าง

ตัวอย่างเช่น

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.
addRows(numOrArray) ตัวเลข

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

  • numOrArray - ตัวเลขหรืออาร์เรย์ก็ได้ ดังนี้
    • ตัวเลข - ตัวเลขที่ระบุจำนวนแถวใหม่ที่ยังไม่ได้ป้อนข้อมูลที่จะเพิ่ม
    • Array - อาร์เรย์ของออบเจ็กต์ row ที่ใช้ป้อนข้อมูลชุดแถวใหม่ แต่ละแถวคือออบเจ็กต์ตามที่อธิบายไว้ใน addRow() ใช้ null หรือรายการอาร์เรย์ที่ว่างเปล่าสำหรับเซลล์ว่าง

ตัวอย่างเช่น

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

ดูเพิ่มเติมที่ insertRows
clone() DataTable ส่งคืนการโคลนตารางข้อมูล ผลลัพธ์ที่ได้คือสำเนาเชิงลึกของตารางข้อมูล ยกเว้นคุณสมบัติของเซลล์ พร็อพเพอร์ตี้แถว คุณสมบัติของตาราง และพร็อพเพอร์ตี้คอลัมน์ ซึ่งเป็นสำเนาแบบตื้น ซึ่งหมายความว่าพร็อพเพอร์ตี้ที่ไม่พื้นฐานถูกคัดลอกโดยการอ้างอิง แต่พร็อพเพอร์ตี้พื้นฐานจะถูกคัดลอกตามค่า
getColumnId(columnIndex) สตริง แสดงผลตัวระบุของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์ในตารางที่สำคัญ
สำหรับตารางข้อมูลที่ดึงข้อมูลโดยคำค้นหา แหล่งข้อมูลจะกำหนดตัวระบุคอลัมน์และใช้เพื่ออ้างอิงคอลัมน์ได้เมื่อใช้ภาษาคำค้นหา
ดูเพิ่มเติมที่ Query.setQuery
getColumnIndex(columnIdentifier) สตริง ตัวเลข แสดงผลดัชนีของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์ รหัส หรือป้ายกำกับ หากมีอยู่ในตารางนี้ หากไม่ใช่ -1 เมื่อ columnIdentifier เป็นสตริง ระบบจะใช้เพื่อหาคอลัมน์ด้วยรหัสก่อนตามด้วยป้ายกำกับ
ดูเพิ่มเติมที่ getColumnId, getColumnLabel
getColumnLabel(columnIndex) สตริง แสดงผลป้ายกำกับของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์ในตารางที่สำคัญ
โดยทั่วไปป้ายกำกับคอลัมน์จะแสดงเป็นส่วนหนึ่งของการแสดงภาพ เช่น ป้ายกำกับคอลัมน์อาจแสดงเป็นส่วนหัวของคอลัมน์ในตาราง หรือเป็นป้ายกำกับคำอธิบายในแผนภูมิวงกลม
สำหรับตารางข้อมูลที่ดึงข้อมูลตามการค้นหา ระบบจะตั้งค่าป้ายกำกับคอลัมน์โดยแหล่งข้อมูล หรือตามอนุประโยค label ของภาษาที่ใช้ค้นหา
ดูเพิ่มเติมที่ setColumnLabel
getColumnPattern(columnIndex) สตริง

แสดงผลรูปแบบการจัดรูปแบบที่ใช้ในการจัดรูปแบบค่าของคอลัมน์ที่ระบุ

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล

สำหรับตารางข้อมูลที่ดึงข้อมูลตามการค้นหา ระบบจะตั้งค่ารูปแบบคอลัมน์โดยแหล่งข้อมูล หรือตามอนุประโยค format ของภาษาที่ใช้ค้นหา ตัวอย่างของรูปแบบคือ '#,##0.00' ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบได้ที่ข้อมูลอ้างอิงภาษาของการค้นหา

getColumnProperties(columnIndex) ออบเจ็กต์

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

  • columnIndex คือดัชนีตัวเลขของคอลัมน์ที่จะดึงข้อมูลพร็อพเพอร์ตี้
getColumnProperty(columnIndex, name) อัตโนมัติ

แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ null หากไม่มีการตั้งค่าพร็อพเพอร์ตี้ดังกล่าวสำหรับคอลัมน์ที่ระบุ ประเภทการแสดงผลจะแตกต่างกันไป ขึ้นอยู่กับพร็อพเพอร์ตี้

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • name คือชื่อพร็อพเพอร์ตี้ในรูปแบบสตริง

ดูเพิ่มเติมที่ setColumnProperty setColumnProperties

getColumnRange(columnIndex) ออบเจ็กต์

แสดงผลค่าต่ำสุดและสูงสุดในคอลัมน์ที่ระบุ ออบเจ็กต์ที่แสดงผลมีพร็อพเพอร์ตี้ min และ max หากช่วงไม่มีค่า min และ max จะมี null

columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล

getColumnRole(columnIndex) สตริง แสดงผล role ของคอลัมน์ที่ระบุ
getColumnType(columnIndex) สตริง

แสดงผลประเภทของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล

ประเภทคอลัมน์ที่แสดงผลอาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้ 'string', 'number', 'boolean', 'date', 'datetime', และ 'timeofday'

getDistinctValues(columnIndex) อาร์เรย์ของวัตถุ

แสดงผลค่าที่ไม่ซ้ำกันในคอลัมน์ใดคอลัมน์หนึ่งโดยเรียงลำดับจากน้อยไปหามาก

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล

ประเภทของออบเจ็กต์ที่แสดงผลเหมือนกับที่แสดงผลโดยเมธอด getValue

getFilteredRows(filters) อาร์เรย์ของวัตถุ

แสดงผลดัชนีแถวสำหรับแถวที่ตรงกับตัวกรองที่ระบุทั้งหมด ระบบจะแสดงดัชนีตามลำดับจากน้อยไปมาก เอาต์พุตของวิธีการนี้เป็นอินพุตของ DataView.setRows() เพื่อเปลี่ยนชุดแถวที่แสดงในการแสดงภาพได้

filters - อาร์เรย์ของออบเจ็กต์ที่อธิบายค่าเซลล์ที่ยอมรับได้ วิธีนี้จะแสดงดัชนีแถวหากตรงกับตัวกรองที่กำหนดทั้งหมด ตัวกรองแต่ละรายการคือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ column ที่เป็นตัวเลขซึ่งระบุดัชนีของคอลัมน์ในแถวที่ต้องการประเมิน บวกกับค่าใดค่าหนึ่งต่อไปนี้

  • พร็อพเพอร์ตี้ value ที่มีค่าต้องตรงกับเซลล์ในคอลัมน์ที่ระบุทุกประการ ค่าต้องเป็นประเภทเดียวกับคอลัมน์ หรือ
  • พร็อพเพอร์ตี้ต่อไปนี้รายการใดรายการหนึ่งหรือทั้ง 2 รายการ ซึ่งเป็นประเภทเดียวกับคอลัมน์ที่กำลังกรอง
    • minValue - ค่าต่ำสุดสำหรับเซลล์ ค่าของเซลล์ในคอลัมน์ที่ระบุต้องมากกว่าหรือเท่ากับค่านี้
    • maxValue - ค่าสูงสุดสำหรับเซลล์ ค่าของเซลล์ในคอลัมน์ที่ระบุต้องน้อยกว่าหรือเท่ากับค่านี้
    ค่า Null หรือที่ไม่ระบุสำหรับ minValue (หรือ maxValue) หมายความว่าจะไม่มีการบังคับใช้ขอบเขตล่าง (หรือบน) ของช่วง

พร็อพเพอร์ตี้ที่ไม่บังคับอีกรายการ test ระบุฟังก์ชันที่จะใช้ร่วมกับการกรองค่าหรือช่วง จะมีการเรียกฟังก์ชันด้วยค่าเซลล์ ดัชนีแถวและคอลัมน์ และตารางข้อมูล โดยควรแสดงค่า "เท็จ" หากควรแยกแถวออกจากผลลัพธ์

ตัวอย่าง: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) จะแสดงผลอาร์เรย์ที่มีดัชนีแถวทั้งหมดที่ 4 (ดัชนีคอลัมน์ 3) เท่ากับ 42 โดยเรียงลำดับจากน้อยไปหามาก และคอลัมน์ที่ 3 (ดัชนีคอลัมน์ 2) อยู่ระหว่าง "bar" และ "foo" (รวม)
getFormattedValue(rowIndex, columnIndex) สตริง

แสดงผลค่าที่จัดรูปแบบของเซลล์ในดัชนีแถวและคอลัมน์ที่ระบุ

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • ColumnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบค่าคอลัมน์ได้ที่ข้อมูลอ้างอิงภาษาของการค้นหา

ดูเพิ่มเติมที่ setFormattedValue
getNumberOfColumns() ตัวเลข แสดงผลจำนวนคอลัมน์ในตาราง
getNumberOfRows() ตัวเลข แสดงผลจำนวนแถวในตาราง
getProperties(rowIndex, columnIndex) ออบเจ็กต์

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

  • rowIndex คือดัชนีแถวของเซลล์
  • columnIndex คือดัชนีคอลัมน์ของเซลล์
getProperty(rowIndex, columnIndex, name) อัตโนมัติ

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

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้

ดูเพิ่มเติมที่ setCell setProperties setProperty

getRowProperties(rowIndex) ออบเจ็กต์

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

  • rowIndex คือดัชนีของแถวที่จะดึงข้อมูลพร็อพเพอร์ตี้
getRowProperty(rowIndex, name) อัตโนมัติ

แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ null หากไม่มีการตั้งค่าพร็อพเพอร์ตี้ดังกล่าวสำหรับแถวที่ระบุ ประเภทการแสดงผลจะแตกต่างกันไป ขึ้นอยู่กับพร็อพเพอร์ตี้

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้

ดูเพิ่มเติมที่ setRowProperty setRowProperties

getSortedRows(sortColumns) อาร์เรย์ของตัวเลข

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

  • ตัวเลขเดียวระบุดัชนีของคอลัมน์ที่จะใช้จัดเรียง การจัดเรียงจะเรียงจากน้อยไปหามาก ตัวอย่าง: sortColumns(3) จะจัดเรียงตามคอลัมน์ที่ 4 ตามลำดับจากน้อยไปมาก
  • ออบเจ็กต์เดียวที่มีจำนวนดัชนีคอลัมน์ที่จะจัดเรียง และพร็อพเพอร์ตี้บูลีนที่ไม่บังคับ desc หากตั้งค่า desc เป็น "จริง" คอลัมน์ที่เจาะจงจะจัดเรียงตามลำดับจากมากไปน้อย หรือมิฉะนั้นจะจัดเรียงจากน้อยไปมาก ตัวอย่าง: sortColumns({column: 3}) จะจัดเรียงตามคอลัมน์ที่ 4 จากน้อยไปมาก sortColumns({column: 3, desc: true}) จะจัดเรียงตามคอลัมน์ที่ 4 จากมากไปน้อย
  • อาร์เรย์ตัวเลขของดัชนีคอลัมน์ที่จะจัดเรียง ตัวเลขแรกคือคอลัมน์หลักที่ต้องจัดเรียง ตัวเลขที่ 2 จะเป็นคอลัมน์รอง และเรียงต่อไปเรื่อยๆ ซึ่งหมายความว่าเมื่อค่า 2 ค่าในคอลัมน์แรกเท่ากัน ระบบจะเปรียบเทียบค่าในคอลัมน์ถัดไป และเป็นเช่นนี้ต่อไปเรื่อยๆ ตัวอย่าง: sortColumns([3, 1, 6]) จะจัดเรียงตามคอลัมน์ที่ 4 (ตามลำดับจากน้อยไปหามาก) ก่อนตามมาด้วยคอลัมน์ที่ 2 (ตามลำดับจากน้อยไปมาก) และตามคอลัมน์ที่ 7 (ตามลำดับจากน้อยไปมาก)
  • อาร์เรย์ของออบเจ็กต์ แต่ละรายการมีจำนวนดัชนีคอลัมน์สำหรับจัดเรียง และพร็อพเพอร์ตี้บูลีนที่ไม่บังคับ desc หากตั้งค่า desc เป็น "จริง" คอลัมน์ที่เจาะจงจะจัดเรียงตามลำดับจากมากไปน้อย (ค่าเริ่มต้นคือน้อยไปหามาก) ออบเจ็กต์แรกคือคอลัมน์หลักที่ต้องจัดเรียง ส่วนออบเจ็กต์ที่ 2 จะเป็นคอลัมน์รอง เป็นต้น ซึ่งหมายความว่าเมื่อค่า 2 ค่าในคอลัมน์แรกเท่ากัน ระบบจะเปรียบเทียบค่าในคอลัมน์ถัดไป และเป็นเช่นนี้ต่อไปเรื่อยๆ ตัวอย่าง: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) จะจัดเรียงคอลัมน์ก่อนตามคอลัมน์ที่ 4 (ตามลําดับจากน้อยไปมาก) ตามด้วยคอลัมน์ 2 ในลําดับจากมากไปน้อย และคอลัมน์ 7 ตามลําดับจากมากไปน้อย

ค่าที่แสดงผลคืออาร์เรย์ของตัวเลข แต่ละตัวเลขคือดัชนีของแถว DataTable การทำซ้ำในแถว DataTable ตามลําดับของอาร์เรย์ที่แสดงผลจะทำให้แถวมีลําดับตาม sortColumns ที่ระบุ คุณใช้เอาต์พุตเป็นอินพุตของ DataView.setRows() เพื่อเปลี่ยนชุดแถวที่แสดงในการแสดงภาพได้อย่างรวดเร็ว

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

ตัวอย่าง: หากต้องการทำซ้ำในแถวที่เรียงลำดับตามคอลัมน์ที่ 3 ให้ใช้

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}
getTableProperties ออบเจ็กต์ แสดงแผนที่ของคุณสมบัติทั้งหมดสำหรับตาราง
getTableProperty(name) อัตโนมัติ

แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ null หากไม่มีการตั้งค่าพร็อพเพอร์ตี้ดังกล่าวสำหรับตาราง ประเภทการแสดงผลจะแตกต่างกันไป ขึ้นอยู่กับพร็อพเพอร์ตี้

  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้

ดูเพิ่มเติมที่ setTableProperties setTableProperty

getValue(rowIndex, columnIndex) ออบเจ็กต์

แสดงผลค่าของเซลล์ในดัชนีแถวและคอลัมน์ที่ระบุ

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล

ประเภทของค่าที่แสดงผลจะขึ้นอยู่กับประเภทคอลัมน์ (ดู getColumnType) ดังนี้

  • หากประเภทคอลัมน์คือ "string" ค่าจะเป็นสตริง
  • ถ้าประเภทคอลัมน์คือ "ตัวเลข" ค่านั้นจะเป็นตัวเลข
  • หากประเภทคอลัมน์เป็น "บูลีน" ค่าจะเป็นบูลีน
  • หากประเภทคอลัมน์คือ "date" หรือ "datetime" ค่าจะเป็นออบเจ็กต์วันที่
  • หากประเภทคอลัมน์คือ "timeofday" ค่าจะเป็นอาร์เรย์ของตัวเลข 4 ตัว ได้แก่ [hours, minutes, seconds, มิลลิวินาที]
  • หากค่าของเซลล์เป็นค่าว่าง จะแสดงเป็น null
insertColumn(columnIndex, type [,label [,id]]) ไม่มี

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

  • columnIndex คือตัวเลขที่มีดัชนีที่กำหนดของคอลัมน์ใหม่
  • type ควรเป็นสตริงที่มีประเภทข้อมูลเป็นค่าในคอลัมน์ ซึ่งอาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้ 'string', 'number', 'boolean', 'date', 'datetime', และ 'timeofday'.
  • label ควรเป็นสตริงที่มีป้ายกำกับของคอลัมน์ โดยทั่วไปแล้ว ป้ายกำกับคอลัมน์จะแสดงเป็นส่วนหนึ่งของการแสดงภาพ เช่น เป็นส่วนหัวของคอลัมน์ในตาราง หรือเป็นป้ายกำกับคำอธิบายในแผนภูมิวงกลม หากไม่ได้ระบุค่า ระบบจะกำหนดสตริงว่าง
  • id ควรเป็นสตริงที่มีตัวระบุที่ไม่ซ้ำกันสำหรับคอลัมน์ หากไม่ได้ระบุค่า ระบบจะกำหนดสตริงว่าง

ดูเพิ่มเติมที่ addColumn
insertRows(rowIndex, numberOrArray) ไม่มี

แทรกจำนวนแถวที่ระบุที่ดัชนีแถวที่ระบุ

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

ดูเพิ่มเติมที่ addRows
removeColumn(columnIndex) ไม่มี

นำคอลัมน์ในดัชนีที่ระบุออก

  • columnIndex ควรเป็นตัวเลขที่มีดัชนีคอลัมน์ที่ถูกต้อง

ดูเพิ่มเติมที่ removeColumns
removeColumns(columnIndex, numberOfColumns) ไม่มี

นำจำนวนคอลัมน์ที่ระบุออกโดยเริ่มจากคอลัมน์ในดัชนีที่ระบุ

  • numberOfColumns คือจำนวนคอลัมน์ที่จะนำออก
  • columnIndex ควรเป็นตัวเลขที่มีดัชนีคอลัมน์ที่ถูกต้อง

ดูเพิ่มเติมที่ removeColumn
removeRow(rowIndex) ไม่มี

นำแถวที่ดัชนีที่ระบุออก

  • rowIndex ควรเป็นตัวเลขที่มีดัชนีแถวที่ถูกต้อง

ดูเพิ่มเติมที่ removeRows
removeRows(rowIndex, numberOfRows) ไม่มี

นำจำนวนแถวที่ระบุซึ่งเริ่มต้นจากแถวที่ดัชนีที่ระบุออก

  • numberOfRows คือจำนวนแถวที่จะนำออก
  • rowIndex ควรเป็นตัวเลขที่มีดัชนีแถวที่ถูกต้อง

โปรดดู removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]) ไม่มี

ตั้งค่า ค่าที่จัดรูปแบบ และ/หรือคุณสมบัติของเซลล์

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • value [ไม่บังคับ] คือค่าที่กำหนดให้เซลล์ที่ระบุ หากต้องการหลีกเลี่ยงการเขียนทับค่านี้ ให้ตั้งค่าพารามิเตอร์นี้เป็น undefined หากต้องการล้างค่านี้ ให้ตั้งค่าเป็น null ประเภทของค่าจะขึ้นอยู่กับประเภทคอลัมน์ (ดู getColumnType()) ดังนี้
    • หากประเภทคอลัมน์คือ "สตริง" ค่าควรเป็นสตริง
    • หากประเภทคอลัมน์คือ "ตัวเลข" ค่าควรเป็นตัวเลข
    • หากประเภทคอลัมน์เป็น "บูลีน" ค่าควรเป็นบูลีน
    • หากประเภทคอลัมน์คือ "date" หรือ "datetime" ค่าควรเป็นออบเจ็กต์วันที่
    • หากประเภทคอลัมน์คือ "timeofday" ค่าควรเป็นอาร์เรย์ของตัวเลข 4 หลัก ได้แก่ [hours,minute, seconds, มิลลิวินาที]
  • formattedValue [ไม่บังคับ] เป็นสตริงที่มีค่ามีรูปแบบเป็นสตริง หากต้องการหลีกเลี่ยงการเขียนทับค่านี้ ให้ตั้งค่าพารามิเตอร์นี้เป็น undefined หากต้องการล้างค่านี้และให้ API ใช้การจัดรูปแบบเริ่มต้นกับ value ตามที่จำเป็น ให้ตั้งค่าเป็น null หากต้องการตั้งค่ารูปแบบที่ว่างเปล่าอย่างชัดเจน ให้ตั้งค่าเป็นสตริงว่าง โดยปกติแล้ว ค่าที่จัดรูปแบบจะใช้โดยการแสดงภาพเพื่อแสดงป้ายกำกับค่า ตัวอย่างเช่น ค่าที่จัดรูปแบบจะปรากฏเป็นข้อความป้ายกำกับภายในแผนภูมิวงกลม
  • properties [ไม่บังคับ] เป็น Object (การแมปชื่อ/ค่า) ที่มีพร็อพเพอร์ตี้เพิ่มเติมสำหรับเซลล์นี้ หากต้องการหลีกเลี่ยงการเขียนทับค่านี้ ให้ตั้งค่าพารามิเตอร์นี้เป็น undefined หากต้องการล้างค่านี้ ให้ตั้งค่าเป็น null การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

ดูเพิ่มเติม setValue(), setFormattedValue(), setProperty(), setProperties()

setColumnLabel(columnIndex, label) ไม่มี

ตั้งค่าป้ายกำกับของคอลัมน์

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • label เป็นสตริงที่มีป้ายกำกับที่จะกำหนดให้กับคอลัมน์ โดยทั่วไปแล้ว ป้ายกำกับคอลัมน์จะแสดงเป็นส่วนหนึ่งของการแสดงภาพ เช่น ป้ายกำกับคอลัมน์อาจแสดงเป็นส่วนหัวของคอลัมน์ในตาราง หรือเป็นป้ายกำกับคำอธิบายในแผนภูมิวงกลม

ดูเพิ่มเติมที่ getColumnLabel
setColumnProperty(columnIndex, name, value) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้คอลัมน์เดียว การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้
  • value คือค่าทุกประเภทที่จะกำหนดให้กับพร็อพเพอร์ตี้ที่มีชื่อซึ่งระบุไว้ของคอลัมน์ที่ระบุ

ดูเพิ่มเติมที่setColumnProperties getColumnProperty

setColumnProperties(columnIndex, properties) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้ของคอลัมน์หลายรายการ การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • properties เป็น Object (การแมปชื่อ/ค่า) ที่มีพร็อพเพอร์ตี้เพิ่มเติมสำหรับคอลัมน์นี้ หากระบุ null แล้ว ระบบจะนำพร็อพเพอร์ตี้เพิ่มเติมทั้งหมดของคอลัมน์ดังกล่าวออก

ดูเพิ่มเติมที่ setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) ไม่มี

ตั้งค่าที่จัดรูปแบบของเซลล์

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • formattedValue เป็นสตริงที่มีค่าที่จัดรูปแบบสำหรับการแสดงผล หากต้องการล้างค่านี้และให้ API ใช้การจัดรูปแบบเริ่มต้นกับค่าเซลล์ตามที่จำเป็น ให้ตั้งค่าเป็น formattedValue null หากต้องการกำหนดค่าการจัดรูปแบบที่ว่างเปล่าอย่างชัดแจ้ง ให้ตั้งค่าเป็นสตริงว่างเปล่า

ดูเพิ่มเติมที่ getFormattedValue
setProperty(rowIndex, columnIndex, name, value) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้ของเซลล์ การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้
  • value เป็นค่าทุกประเภทที่จะกำหนดให้พร็อพเพอร์ตี้ที่มีชื่อที่ระบุของเซลล์ที่ระบุ

ดูเพิ่มเติมที่ setCell setProperties getProperty

setProperties(rowIndex, columnIndex, properties) ไม่มี

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

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล
  • properties เป็น Object (การแมปชื่อ/ค่า) ที่มีพร็อพเพอร์ตี้เพิ่มเติมสำหรับเซลล์นี้ หากระบุ null แล้ว ระบบจะนำพร็อพเพอร์ตี้เพิ่มเติมทั้งหมดของเซลล์ออก

ดูเพิ่มเติมที่ setCell setProperty getProperty

setRowProperty(rowIndex, name, value) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้ของแถว การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้
  • value เป็นค่าทุกประเภทที่จะกำหนดให้พร็อพเพอร์ตี้ที่มีชื่อที่ระบุของแถวที่ระบุ

ดูเพิ่มเติมที่ setRowProperties getRowProperty

setRowProperties(rowIndex, properties) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้หลายรายการของแถว การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • properties เป็น Object (การแมปชื่อ/ค่า) ที่มีพร็อพเพอร์ตี้เพิ่มเติมสำหรับแถวนี้ หากระบุ null แล้ว ระบบจะนำพร็อพเพอร์ตี้เพิ่มเติมทั้งหมดของแถวนั้นออก

ดูเพิ่มเติมที่ setRowProperty getRowProperty

setTableProperty(name, value) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้ตารางรายการเดียว การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้ตาราง แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • name เป็นสตริงที่มีชื่อพร็อพเพอร์ตี้
  • value คือค่าทุกประเภทที่จะกำหนดให้กับพร็อพเพอร์ตี้ที่มีชื่อที่ระบุของตาราง

ดูเพิ่มเติมที่ setTableProperties getTableProperty

setTableProperties(properties) ไม่มี

ตั้งค่าพร็อพเพอร์ตี้ของตารางหลายรายการ การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้ตาราง แถว คอลัมน์ หรือเซลล์เพื่อแก้ไขการแสดงผลหรือลักษณะการทำงาน โปรดดูเอกสารประกอบเกี่ยวกับการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ

  • properties เป็น Object (การแมปชื่อ/ค่า) ที่มีพร็อพเพอร์ตี้เพิ่มเติมสำหรับตาราง หากระบุ null แล้ว ระบบจะนำพร็อพเพอร์ตี้เพิ่มเติมทั้งหมดของตารางออก

ดูเพิ่มเติมที่ setTableProperty getTableProperty

setValue(rowIndex, columnIndex, value) ไม่มี

ตั้งค่าเซลล์ นอกจากการเขียนทับค่าเซลล์ที่มีอยู่แล้ว เมธอดนี้จะล้างค่าและพร็อพเพอร์ตี้ที่จัดรูปแบบของเซลล์ด้วย

  • rowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล
  • columnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล วิธีนี้ไม่อนุญาตให้คุณกำหนดค่าที่จัดรูปแบบสำหรับเซลล์นี้ ซึ่งต้องเรียกใช้ setFormattedValue()
  • value คือค่าที่กําหนดให้กับเซลล์ที่ระบุ ประเภทของค่าที่แสดงผลจะขึ้นอยู่กับประเภทคอลัมน์ (ดู getColumnType) ดังนี้
    • หากประเภทคอลัมน์คือ "สตริง" ค่าควรเป็นสตริง
    • หากประเภทคอลัมน์คือ "ตัวเลข" ค่าควรเป็นตัวเลข
    • หากประเภทคอลัมน์เป็น "บูลีน" ค่าควรเป็นบูลีน
    • หากประเภทคอลัมน์คือ "date" หรือ "datetime" ค่าควรเป็นออบเจ็กต์วันที่
    • หากประเภทคอลัมน์คือ "timeofday" ค่าควรเป็นอาร์เรย์ของตัวเลข 4 หลัก ได้แก่ [hours,minute, seconds, มิลลิวินาที]
    • สำหรับคอลัมน์ทุกประเภท ค่านี้จะตั้งเป็น null ได้

และดูที่ setCell, setFormattedValue, setProperty, setProperties

sort(sortColumns) ไม่มี จัดเรียงแถวตามคอลัมน์การจัดเรียงที่ระบุ เมธอดนี้แก้ไข DataTable ดู getSortedRows() สำหรับคำอธิบาย รายละเอียดของการจัดเรียง วิธีนี้ไม่แสดงผลข้อมูลที่จัดเรียง
ดูเพิ่มเติม getSortedRows
ตัวอย่าง: หากต้องการจัดเรียงตามคอลัมน์ที่ 3 แล้วจัดเรียงตามคอลัมน์ที่ 2 ให้ใช้รูปแบบ data.sort([{column: 2}, {column: 1}]);
toJSON() สตริง แสดงผลการแทน JSON ของ DataTable ที่ส่งไปยังตัวสร้าง DataTable ได้ เช่น 
{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

รูปแบบพารามิเตอร์ข้อมูล JavaScript แบบตรงตัวของเครื่องมือสร้าง

คุณเริ่มต้น DataTable ได้โดยการส่งออบเจ็กต์ลิเทอรัลสตริง JavaScript ไปยังพารามิเตอร์ data เราจะเรียกออบเจ็กต์นี้ว่าออบเจ็กต์ data คุณเขียนโค้ดออบเจ็กต์นี้ได้ด้วยตนเองตามคำอธิบายด้านล่าง หรือใช้ไลบรารี Python ตัวช่วยหากรู้วิธีใช้ Python และเว็บไซต์ของคุณใช้ Python ได้ อย่างไรก็ตาม หากคุณต้องการสร้างออบเจ็กต์ด้วยตนเอง ส่วนนี้จะอธิบายไวยากรณ์

ก่อนอื่น มาดูตัวอย่างออบเจ็กต์ JavaScript แบบง่ายที่อธิบายตารางที่มี 3 แถวและ 3 คอลัมน์ (ประเภทสตริง ตัวเลข และวันที่) 

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

ตอนนี้เรามาอธิบายไวยากรณ์กัน

ออบเจ็กต์ data ประกอบด้วยพร็อพเพอร์ตี้ระดับบนสุดที่จำเป็น 2 รายการ ได้แก่ cols และ rows และพร็อพเพอร์ตี้ p ที่ไม่บังคับซึ่งเป็นแผนที่ของค่าที่กำหนดเอง

หมายเหตุ: ชื่อพร็อพเพอร์ตี้และค่าคงที่ของสตริงทั้งหมดที่แสดงจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ นอกจากนี้ พร็อพเพอร์ตี้ที่อธิบายว่าเป็นการใช้ค่าสตริงควรใส่ค่าไว้ในเครื่องหมายคำพูด ตัวอย่างเช่น หากต้องการระบุพร็อพเพอร์ตี้ประเภทเป็นตัวเลข จะแสดงเป็น type: 'number' แต่ค่านั้นเป็นตัวเลข จะแสดงเช่นนี้: v: 42

พร็อพเพอร์ตี้ cols

cols คืออาร์เรย์ของออบเจ็กต์ที่อธิบายรหัสและประเภทของแต่ละคอลัมน์ แต่ละพร็อพเพอร์ตี้คือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้ (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)

  • type [จำเป็น] ประเภทข้อมูลของข้อมูลในคอลัมน์ รองรับค่าสตริงต่อไปนี้ (ตัวอย่างเช่น มีพร็อพเพอร์ตี้ v: อธิบายภายหลัง)
    • 'boolean' - ค่าบูลีนของ JavaScript ("จริง" หรือ "เท็จ") ค่าตัวอย่าง: v:'true'
    • "number" - ค่าตัวเลข JavaScript ค่าตัวอย่าง: v:7 , v:3.14, v:-55
    • 'string' - ค่าสตริง JavaScript ค่าตัวอย่าง: v:'hello'
    • "date" - ออบเจ็กต์วันที่ของ JavaScript (เดือนแบบศูนย์) ที่มีการตัดเวลา ค่าตัวอย่าง: v:new Date(2008, 0, 15)
    • 'datetime' - ออบเจ็กต์วันที่ของ JavaScript ที่รวมเวลา ค่าตัวอย่าง: v:new Date(2008, 0, 15, 14, 30, 45)
    • "timeofday" - อาร์เรย์ของตัวเลข 3 ตัวและตัวเลือกที่ 4 (ไม่บังคับ) แสดงชั่วโมง (0 หมายถึงเที่ยงคืน) นาที วินาที และมิลลิวินาที (ไม่บังคับ) ค่าตัวอย่าง: v:[8, 15, 0], v: [6, 12, 1, 144]
  • id [Optional] รหัสสตริงของคอลัมน์ ต้องไม่ซ้ำกันในตาราง ใช้อักขระที่เป็นตัวอักษรและตัวเลขคละกันแบบพื้นฐาน เพื่อที่หน้าเว็บโฮสต์จะได้ไม่ต้องใช้ Escape ประสิทธิภาพสูงเพื่อเข้าถึงคอลัมน์ใน JavaScript โปรดระวังอย่าเลือกคำหลัก JavaScript ตัวอย่าง: id:'col_1'
  • label [Optional] ค่าสตริงที่การแสดงข้อมูลผ่านภาพบางรายการแสดงสำหรับคอลัมน์นี้ ตัวอย่าง: label:'Height'
  • pattern [ไม่บังคับ] รูปแบบสตริงที่แหล่งข้อมูลใช้เพื่อจัดรูปแบบค่าคอลัมน์ตัวเลข วันที่ หรือเวลา ชื่อนี้ใช้สำหรับการอ้างอิงเท่านั้น คุณอาจไม่จำเป็นต้องอ่านรูปแบบ และไม่จำเป็นต้องมี ไคลเอ็นต์การแสดงภาพของ Google ไม่ได้ใช้ค่านี้ (อ่านค่าที่มีการจัดรูปแบบของเซลล์) หาก DataTable มาจากแหล่งข้อมูลเพื่อตอบสนองการค้นหาที่มีอนุประโยค format รูปแบบที่คุณระบุในวลีนั้นอาจแสดงในค่านี้ มาตรฐานรูปแบบที่แนะนำคือ ICU DecimalFormat และ SimpleDateFormat
  • p [ไม่บังคับ] ออบเจ็กต์ที่เป็นแผนที่ค่าที่กำหนดเองที่ใช้กับเซลล์ ค่าเหล่านี้เป็นประเภท JavaScript ใดก็ได้ หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับเซลล์ ก็จะอธิบายพร็อพเพอร์ตี้นั้น มิเช่นนั้นระบบจะไม่สนใจพร็อพเพอร์ตี้นี้ เช่น p:{style: 'border: 1px solid green;'}

cols ตัวอย่าง

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows พร็อพเพอร์ตี้

พร็อพเพอร์ตี้ rows มีอาร์เรย์ของออบเจ็กต์แถว

ออบเจ็กต์แถวแต่ละรายการมีพร็อพเพอร์ตี้ที่จำเป็น 1 รายการที่ชื่อ c ซึ่งเป็นอาร์เรย์ของเซลล์ในแถวนั้น และยังมีพร็อพเพอร์ตี้ p ที่ไม่บังคับซึ่งกำหนดแมปค่าที่กำหนดเองที่กำหนดเองเพื่อกำหนดให้กับทั้งแถว หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับแถว ระบบจะอธิบายพร็อพเพอร์ตี้นั้น มิฉะนั้นระบบจะไม่สนใจพร็อพเพอร์ตี้นี้

ออบเจ็กต์เซลล์

แต่ละเซลล์ในตารางมีการอธิบายโดยออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

  • v [ไม่บังคับ] ค่าของเซลล์ ประเภทข้อมูลควรตรงกับประเภทข้อมูลคอลัมน์ หากเซลล์เป็นค่าว่าง พร็อพเพอร์ตี้ v ควรเป็นค่าว่าง แต่ยังมีพร็อพเพอร์ตี้ f และ p ได้อยู่
  • f [ไม่บังคับ] เวอร์ชันสตริงของค่า v ซึ่งจัดรูปแบบสำหรับการแสดงผล โดยปกติค่าต่างๆ จะตรงกัน แต่ไม่จำเป็นต้องระบุ ดังนั้น หากคุณระบุ Date(2008, 0, 1) สำหรับ v คุณควรระบุ "1 มกราคม 2008" หรือสตริงดังกล่าวสำหรับพร็อพเพอร์ตี้นี้ ระบบจะไม่ตรวจสอบค่านี้กับค่า v การแสดงภาพจะไม่ใช้ค่านี้ในการคำนวณ แต่จะใช้เป็นป้ายกำกับสำหรับการแสดงผลเท่านั้น หากไม่ระบุ ระบบจะสร้างเวอร์ชันสตริงของ v โดยอัตโนมัติโดยใช้ตัวจัดรูปแบบเริ่มต้น คุณจะแก้ไขค่า f ได้โดยใช้ตัวจัดรูปแบบของคุณเอง หรือจะตั้งค่าด้วย setFormattedValue() หรือ setCell() หรือดึงข้อมูลด้วย getFormattedValue() ก็ได้
  • p [ไม่บังคับ] ออบเจ็กต์ที่เป็นแผนที่ค่าที่กำหนดเองที่ใช้กับเซลล์ ค่าเหล่านี้เป็นประเภท JavaScript ใดก็ได้ หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับเซลล์ ก็จะอธิบายพร็อพเพอร์ตี้นั้น คุณเรียกดูพร็อพเพอร์ตี้เหล่านี้ได้โดยใช้เมธอด getProperty() และ getProperties() เช่น p:{style: 'border: 1px solid green;'}

เซลล์ในอาร์เรย์แถวควรเรียงลำดับตามคำอธิบายคอลัมน์ใน cols หากต้องการระบุเซลล์ที่เป็นค่าว่าง ให้ระบุ null, เว้นเซลล์ในอาร์เรย์ว่างไว้ หรือละเว้นสมาชิกอาร์เรย์ต่อท้าย ดังนั้น หากต้องการระบุแถวที่มีค่า Null สำหรับ 2 เซลล์แรก คุณอาจระบุ [ , , {cell_val}] หรือ [null, null, {cell_val}]

ต่อไปนี้คือตัวอย่างออบเจ็กต์ตารางที่มี 3 คอลัมน์ซึ่งมีข้อมูล 3 แถว

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

พร็อพเพอร์ตี้ p

พร็อพเพอร์ตี้ p ระดับตารางคือแมปของค่าที่กําหนดเองที่ใช้กับ DataTable ทั้งหมด ค่าเหล่านี้เป็นประเภท JavaScript ใดก็ได้ หากการแสดงข้อมูลผ่านภาพรองรับพร็อพเพอร์ตี้ระดับตารางข้อมูล พร็อพเพอร์ตี้จะอธิบายพร็อพเพอร์ตี้ดังกล่าว มิฉะนั้น พร็อพเพอร์ตี้นี้จะพร้อมใช้ในแอปพลิเคชัน เช่น p:{className: 'myDataTable'}

คลาส DataView

มุมมองอ่านอย่างเดียวของ DataTable ที่เกี่ยวข้อง DataView อนุญาตให้เลือกเฉพาะชุดย่อยของคอลัมน์และ/หรือแถว นอกจากนี้ยังช่วยให้เรียงลำดับคอลัมน์/แถวใหม่ และทำซ้ำคอลัมน์/แถวได้

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

  • การเพิ่มหรือการนำคอลัมน์ออกจากตารางที่สำคัญจะไม่มีผลต่อข้อมูลพร็อพเพอร์ตี้ และอาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิดในข้อมูลพร็อพเพอร์ตี้ คุณจะต้องสร้าง DataView ใหม่จาก DataTable เพื่อรับการเปลี่ยนแปลงเหล่านี้
  • การเพิ่มหรือนำแถวออกจากตารางที่สำคัญนั้นปลอดภัย และการเปลี่ยนแปลงจะส่งผลไปยังมุมมองทันที (แต่คุณต้องเรียกใช้ draw() ในการแสดงภาพหลังจากการเปลี่ยนแปลงนี้เพื่อให้ระบบแสดงผลชุดแถวใหม่) โปรดทราบว่าหากมุมมองของคุณได้กรองแถวออกด้วยการเรียกใช้เมธอด setRows() or hideRows() รายการใดรายการหนึ่ง และคุณเพิ่มหรือนำแถวออกจากตารางที่สำคัญ ลักษณะการทำงานจะไม่เป็นไปตามที่คาดไว้ คุณต้องสร้าง DataView ใหม่เพื่อแสดงตารางใหม่
  • การเปลี่ยนค่าเซลล์ในเซลล์ที่มีอยู่จะปลอดภัย และระบบจะเผยแพร่การเปลี่ยนแปลงไปยัง DataView ทันที (แต่คุณต้องเรียกใช้ draw() ในการแสดงภาพหลังจากการเปลี่ยนแปลงนี้เพื่อให้ระบบแสดงผลค่าเซลล์ใหม่)

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

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

เมื่อแก้ไข DataView ด้วยการซ่อนหรือแสดงแถวหรือคอลัมน์ การแสดงภาพจะไม่ได้รับผลกระทบจนกว่าคุณจะเรียกใช้ draw() ในการแสดงภาพอีกครั้ง

คุณรวม DataView.getFilteredRows() กับ DataView.setRows() เพื่อสร้าง DataView ที่มีข้อมูลชุดย่อยที่น่าสนใจได้ ดังที่แสดงด้านล่างนี้ 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

ผู้ผลิต

การสร้างอินสแตนซ์ DataView ใหม่มี 2 วิธีดังนี้

เครื่องมือสร้าง 1

var myView = new google.visualization.DataView(data)
data
DataTable หรือ DataView ที่ใช้เริ่มต้นมุมมอง โดยค่าเริ่มต้น มุมมองจะมีคอลัมน์และแถวทั้งหมดในตารางหรือมุมมองข้อมูลที่สำคัญ ตามลำดับเดิม หากต้องการซ่อนหรือแสดงแถวหรือคอลัมน์ในมุมมองนี้ ให้เรียกเมธอด set...() หรือ hide...() ที่เหมาะสม

ดูเพิ่มเติม

setColumns(), hideColumns(), setRows(), hideRows()

 

เครื่องมือสร้าง 2

ตัวสร้างนี้สร้าง DataView ใหม่โดยกำหนด DataView ที่เป็นอนุกรมให้กับ DataTable ซึ่งจะช่วยคุณสร้าง DataView ที่คุณเรียงอันดับโดยใช้ DataView.toJSON() ขึ้นใหม่ 

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
ข้อมูล
ออบเจ็กต์ DataTable ที่คุณใช้สร้าง DataView ซึ่ง เรียกใช้ DataView.toJSON() หากตารางนี้แตกต่างจากตารางเดิม คุณจะได้รับผลลัพธ์ที่คาดเดาไม่ได้
viewAsJson
สตริง JSON ที่แสดงผลโดย DataView.toJSON() นี่คือคําอธิบายแถวที่จะแสดงหรือซ่อนจากตารางข้อมูล data

วิธีการ

วิธีการ ผลลัพธ์ คำอธิบาย
ดูคำอธิบายเป็นภาษาDataTable เหมือนกับเมธอด DataTable ที่เทียบเท่ากัน เว้นแต่ว่าดัชนีแถว/คอลัมน์จะอ้างอิงดัชนีในมุมมอง ไม่ใช่ในตาราง/มุมมองที่เกี่ยวข้อง
getTableColumnIndex(viewColumnIndex) ตัวเลข

แสดงผลดัชนีในตาราง (หรือมุมมอง) ของคอลัมน์ที่ระบุโดยดัชนีในมุมมองนี้ viewColumnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่เมธอด getNumberOfColumns() แสดงผล แสดงผล -1 หากเป็นคอลัมน์ที่สร้างขึ้น

ตัวอย่าง: หากมีการเรียก setColumns([3, 1, 4]) ก่อนหน้านี้ getTableColumnIndex(2) จะส่งกลับ 4

getTableRowIndex(viewRowIndex) ตัวเลข

แสดงผลดัชนีในตารางพื้นฐาน (หรือมุมมอง) ของแถวที่ระบุโดยดัชนีในมุมมองนี้ viewRowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่เมธอด getNumberOfRows() แสดงผล

ตัวอย่าง: หากมีการเรียก setRows([3, 1, 4]) ก่อนหน้านี้ getTableRowIndex(2) จะส่งกลับ 4

getViewColumnIndex(tableColumnIndex) ตัวเลข

แสดงผลดัชนีในมุมมองนี้ที่แมปกับคอลัมน์ที่ระบุโดยดัชนีในตาราง (หรือมุมมอง) ที่เกี่ยวข้อง หากมีดัชนีดังกล่าวมากกว่า 1 รายการ จะแสดงดัชนีแรก (เล็กที่สุด) หากไม่มีดัชนีดังกล่าว (คอลัมน์ที่ระบุไม่อยู่ในมุมมอง) แสดงผล -1 tableColumnIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนคอลัมน์ที่แสดงผลโดยเมธอด getNumberOfColumns() ของตาราง/มุมมองที่สำคัญ

ตัวอย่าง: หากมีการเรียก setColumns([3, 1, 4]) ก่อนหน้านี้ getViewColumnIndex(4) จะส่งกลับ 2

getViewColumns() อาร์เรย์ของตัวเลข

แสดงผลคอลัมน์ในมุมมองนี้ตามลำดับ กล่าวคือ หากคุณเรียกใช้ setColumns ด้วยอาร์เรย์ แล้วเรียกใช้ getViewColumns() ก็ควรจะได้อาร์เรย์ที่เหมือนกัน

getViewRowIndex(tableRowIndex) ตัวเลข

แสดงผลดัชนีในมุมมองนี้ที่แมปกับแถวที่ระบุโดยดัชนีในตาราง (หรือมุมมอง) ที่เกี่ยวข้อง หากมีดัชนีดังกล่าวมากกว่า 1 รายการ จะแสดงดัชนีแรก (เล็กที่สุด) หากไม่มีดัชนีดังกล่าว (แถวที่ระบุไม่อยู่ในมุมมอง) แสดงผล -1 tableRowIndex ควรเป็นตัวเลขที่มากกว่าหรือเท่ากับ 0 และน้อยกว่าจำนวนแถวที่แสดงผลโดยเมธอด getNumberOfRows() ของตาราง/มุมมองที่สำคัญ

ตัวอย่าง: หากมีการเรียก setRows([3, 1, 4]) ก่อนหน้านี้ getViewRowIndex(4) จะส่งกลับ 2

getViewRows() อาร์เรย์ของตัวเลข

แสดงผลแถวในมุมมองนี้ตามลำดับ กล่าวคือ ถ้าคุณเรียก setRows ด้วยอาร์เรย์ แล้วเรียก getViewRows() คุณควรได้รับอาร์เรย์ที่เหมือนกัน

hideColumns(columnIndexes) ไม่มี

ซ่อนคอลัมน์ที่ระบุจากมุมมองปัจจุบัน columnIndexes คืออาร์เรย์ของตัวเลขที่แสดงถึงดัชนีของคอลัมน์ที่จะซ่อน ดัชนีเหล่านี้เป็นหมายเลขดัชนีในตาราง/มุมมองที่เกี่ยวข้อง ตัวเลขใน columnIndexes ไม่จำเป็นต้องเรียงตามลำดับ (กล่าวคือ [3,4,1] ก็ได้) คอลัมน์ที่เหลือจะมีลำดับดัชนีอยู่เมื่อคุณทำซ้ำ การป้อนหมายเลขดัชนีของคอลัมน์ที่ซ่อนอยู่แล้วไม่ใช่ข้อผิดพลาด แต่การป้อนดัชนีที่ไม่มีในตาราง/มุมมองที่สำคัญจะทำให้เกิดข้อผิดพลาด หากต้องการเลิกซ่อนคอลัมน์ โปรดเรียกใช้ setColumns()

ตัวอย่าง: หากคุณมีตารางที่มี 10 คอลัมน์ และคุณเรียกใช้ setColumns([2,7,1,7,9]) ตามด้วย hideColumns([7,9]) คอลัมน์ในมุมมองจะเป็น [2,1]

hideRows(min, max) ไม่มี

ซ่อนแถวทั้งหมดที่มีดัชนีที่อยู่ระหว่างค่าต่ำสุดและสูงสุด (รวม) จากมุมมองปัจจุบัน นี่เป็นไวยากรณ์ตามความสะดวกสำหรับ hideRows(rowIndexes) ด้านบน เช่น hideRows(5, 10) จะมีค่าเท่ากับ hideRows([5, 6, 7, 8, 9, 10])

hideRows(rowIndexes) ไม่มี

ซ่อนแถวที่ระบุจากมุมมองปัจจุบัน rowIndexes คืออาร์เรย์ของตัวเลขที่แสดงถึงดัชนีของแถวที่จะซ่อน ดัชนีเหล่านี้เป็นหมายเลขดัชนีในตาราง/มุมมองที่เกี่ยวข้อง ตัวเลขใน rowIndexes ไม่จำเป็นต้องเรียงตามลำดับ (กล่าวคือ [3,4,1] ก็ได้) ส่วนแถวที่เหลือจะคงลำดับดัชนีไว้ การป้อนหมายเลขดัชนีสำหรับแถวที่ซ่อนอยู่แล้วไม่ใช่ข้อผิดพลาด แต่การป้อนดัชนีที่ไม่มีอยู่ในตาราง/มุมมองที่สำคัญจะทำให้เกิดข้อผิดพลาด หากต้องการเลิกซ่อนแถว โปรดเรียกใช้ setRows()

ตัวอย่าง: หากคุณมีตารางที่มี 10 แถว และเรียก setRows([2,7,1,7,9]) ตามด้วย hideRows([7,9]) แถวในมุมมองนั้นจะเป็น [2,1]

setColumns(columnIndexes) ไม่มี

ระบุคอลัมน์ที่สามารถมองเห็นได้ในมุมมองนี้ ระบบจะซ่อนคอลัมน์ที่ไม่ได้ระบุไว้ นี่คืออาร์เรย์ของดัชนีคอลัมน์ในตาราง/มุมมองที่สำคัญ หรือคอลัมน์ที่คำนวณ หากไม่ได้เรียกใช้เมธอดนี้ ค่าเริ่มต้นคือแสดงคอลัมน์ทั้งหมด นอกจากนี้ อาร์เรย์อาจมีรายการซ้ำเพื่อแสดงคอลัมน์เดียวกันหลายๆ ครั้ง คอลัมน์จะแสดงตามลำดับที่ระบุ

  • columnIndexes - อาร์เรย์ของจำนวนและ/หรือออบเจ็กต์ (อาจผสมกันได้)
    • ตัวเลขระบุดัชนีของคอลัมน์ข้อมูลต้นฉบับที่จะรวมในมุมมอง นำข้อมูลมาโดยที่ไม่มีการแก้ไข หากต้องการกำหนดบทบาทหรือพร็อพเพอร์ตี้คอลัมน์เพิ่มเติมอย่างชัดแจ้ง ให้ระบุออบเจ็กต์ที่มีพร็อพเพอร์ตี้ sourceColumn
    • ออบเจ็กต์ระบุคอลัมน์ที่คำนวณ คอลัมน์ที่คำนวณแล้วจะสร้างค่าแบบเรียลไทม์สำหรับแต่ละแถว แล้วเพิ่มลงในมุมมอง ออบเจ็กต์ต้องมีพร็อพเพอร์ตี้ต่อไปนี้
      • calc [function] - ฟังก์ชันที่จะถูกเรียกแต่ละแถวในคอลัมน์เพื่อคำนวณค่าของเซลล์นั้น ลายเซ็นของฟังก์ชันคือ func(dataTable, row) โดยที่ dataTable คือต้นทาง DataTable และ row คือดัชนีของแถวข้อมูลต้นทาง ฟังก์ชันควรแสดงผลค่าเดี่ยวของประเภทที่ระบุโดย type
      • type [string] - ประเภท JavaScript ของค่าที่ฟังก์ชัน calc แสดงผล
      • label [ไม่บังคับ, string] - ป้ายกำกับที่ไม่บังคับซึ่งจะกำหนดให้กับคอลัมน์ที่สร้างขึ้นนี้ หากไม่ระบุ คอลัมน์ข้อมูลพร็อพเพอร์ตี้จะไม่มีป้ายกำกับ
      • id [ไม่บังคับ, สตริง] - รหัสที่ไม่บังคับซึ่งจะกำหนดให้กับคอลัมน์ที่สร้างขึ้นนี้
      • sourceColumn - [ไม่บังคับ, number] คอลัมน์แหล่งที่มาที่จะใช้เป็นค่า หากระบุ ไม่ต้องระบุพร็อพเพอร์ตี้ calc หรือ type ซึ่งคล้ายกับการส่งตัวเลขแทนที่จะเป็นออบเจ็กต์ แต่คุณจะระบุบทบาทและพร็อพเพอร์ตี้สำหรับคอลัมน์ใหม่ได้
      • properties [ไม่บังคับ, object] - ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่กำหนดเองที่จะกำหนดให้กับคอลัมน์นี้ หากไม่ระบุ คอลัมน์ข้อมูลพร็อพเพอร์ตี้จะไม่มีพร็อพเพอร์ตี้
      • role [ไม่บังคับ, สตริง] - บทบาทที่จะกำหนดให้กับคอลัมน์นี้ หากไม่ระบุ ระบบจะไม่นำเข้าบทบาทที่มีอยู่

ตัวอย่าง

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}
setRows(min, max) ไม่มี

ตั้งค่าแถวในมุมมองนี้เป็นดัชนีทั้งหมด (ในตาราง/มุมมองที่สำคัญ) ที่อยู่ระหว่างค่าต่ำสุดและสูงสุด (รวม) นี่เป็นไวยากรณ์ตามความสะดวกของ setRows(rowIndexes) ด้านล่าง เช่น setRows(5, 10) เทียบเท่ากับ setRows([5, 6, 7, 8, 9, 10])

setRows(rowIndexes) ไม่มี

ตั้งค่าแถวที่แสดงในมุมมองนี้ โดยอิงตามหมายเลขดัชนีจากตาราง/มุมมองที่สำคัญ rowIndexes ควรเป็นอาร์เรย์ของหมายเลขดัชนีที่ระบุแถวที่จะแสดงในมุมมอง อาร์เรย์จะระบุลำดับในการแสดงแถว และทำซ้ำแถวได้ โปรดทราบว่าจะแสดงเฉพาะแถวที่ระบุใน rowIndexes วิธีนี้จะล้างแถวอื่นๆ ทั้งหมดออกจากมุมมอง อาร์เรย์อาจมีรายการซ้ำ ซึ่งจะทำซ้ำแถวที่ระบุในมุมมองนี้อย่างมีประสิทธิภาพ (เช่น setRows([3, 4, 3, 2]) จะทำให้แถว 3 แสดง 2 ครั้งในมุมมองนี้) ดังนั้นอาร์เรย์จะมีการแมปแถวจากตาราง/มุมมองที่สำคัญกับมุมมองนี้ คุณใช้ getFilteredRows() หรือ getSortedRows() เพื่อสร้างอินพุตสำหรับวิธีนี้ได้

ตัวอย่าง: หากต้องการสร้างมุมมองที่มีแถว 3 และเป็น 0 ของตาราง/มุมมองที่สำคัญ ให้ทำดังนี้ view.setRows([3, 0])

toDataTable() DataTable แสดงผลออบเจ็กต์ DataTable ที่มีแถวและคอลัมน์ที่มองเห็นได้ของ DataView
toJSON() string แสดงผลแทนสตริงของ DataView นี้ สตริงนี้ไม่มีข้อมูลจริง มีเฉพาะการตั้งค่าเฉพาะ DataView เช่น แถวและคอลัมน์ที่มองเห็นได้ คุณสามารถจัดเก็บสตริงนี้และส่งไปยัง ตัวสร้าง DataView.fromJSON() แบบคงที่เพื่อสร้างมุมมองนี้อีกครั้ง ซึ่งไม่รวมคอลัมน์ที่สร้างขึ้น

คลาส Wrapper ของแผนภูมิ

คลาส ChartWrapper ใช้ในการรวมแผนภูมิและจัดการการโหลด การวาด และการค้นหาแหล่งข้อมูลทั้งหมดสำหรับแผนภูมิของคุณ ชั้นเรียนจะแสดงวิธีการที่สะดวกสำหรับการตั้งค่าในแผนภูมิและวาดแผนภูมิ คลาสนี้ทำให้การอ่านจากแหล่งข้อมูลง่ายขึ้น เนื่องจากคุณไม่ต้องสร้างเครื่องจัดการ Callback ของการค้นหา และยังใช้เพื่อบันทึกแผนภูมิไว้ใช้ซ้ำได้ง่ายๆ ด้วย

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

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

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

ผู้ผลิต

ChartWrapper(opt_spec)
opt_spec
[ไม่บังคับ] - ออบเจ็กต์ JSON ที่กำหนดแผนภูมิ หรือเวอร์ชันสตริงต่อเนื่องของออบเจ็กต์นั้น รูปแบบของออบเจ็กต์นี้แสดงอยู่ในเอกสารประกอบของ DrawChart() หากไม่ได้ระบุ คุณต้องตั้งค่าพร็อพเพอร์ตี้ที่เหมาะสมทั้งหมดโดยใช้เมธอด set... ที่ออบเจ็กต์นี้เปิดเผย

วิธีการ

ChartWrapper จะแสดงเมธอดเพิ่มเติมต่อไปนี้

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(opt_container_ref) ไม่มี

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

  • opt_container_ref [ไม่บังคับ] - การอ้างอิงถึงองค์ประกอบคอนเทนเนอร์ที่ถูกต้องในหน้า หากระบุไว้ จะมีการวาดแผนภูมิจากจุดนั้น หากไม่ตรง จะมีการวาดแผนภูมิในองค์ประกอบที่มีรหัสที่ระบุโดย containerId
toJSON() สตริง แสดงผลเวอร์ชันสตริงของการแสดงแผนภูมิ JSON
clone() ChartWrapper แสดงผลสำเนาเชิงลึกของ Wrapper แผนภูมิ
getDataSourceUrl() สตริง หากแผนภูมินี้รับข้อมูลจากแหล่งข้อมูล จะแสดงผล URL ของแหล่งข้อมูลนี้ หากไม่ จะแสดงผลเป็น Null
getDataTable() google.visualization.DataTable

หากแผนภูมินี้รับข้อมูลจาก DataTable ที่กำหนดไว้เฉพาะเครื่อง ระบบจะส่งคืนค่าการอ้างอิงไปยัง DataTable ของแผนภูมิ หากแผนภูมินี้ได้รับข้อมูลจากแหล่งข้อมูล แผนภูมิจะแสดงผลค่า Null

การเปลี่ยนแปลงที่คุณทำกับออบเจ็กต์ที่แสดงผลจะแสดงเป็นแผนภูมิเมื่อคุณเรียกใช้ ChartWrapper.draw() ครั้งถัดไป

getChartType() สตริง ชื่อคลาสของแผนภูมิที่รวม หากเป็นแผนภูมิของ Google ชื่อจะไม่เข้าเกณฑ์เป็น google.visualization ตัวอย่างเช่น หากเป็นแผนภูมิทรีแม็ปก็จะแสดงผลเป็น "Treemap" แทนที่จะเป็น "google.visualization.treemap"
getChartName() สตริง แสดงผลชื่อแผนภูมิที่กำหนดโดย setChartName()
getChart() การอ้างอิงวัตถุแผนภูมิ แสดงผลการอ้างอิงไปยังแผนภูมิที่สร้างโดย ChartWrapper นี้ เช่น google.visualization.BarChart หรือ google.visualization.ColumnChart การดำเนินการนี้จะแสดงผลเป็น Null จนกว่าคุณจะเรียกใช้ draw() ในออบเจ็กต์ ChartWrapper และมีการส่งเหตุการณ์พร้อมแสดง เมธอดที่เรียกใช้ในออบเจ็กต์ที่แสดงผลจะแสดงในหน้าเว็บ
getContainerId() สตริง รหัสองค์ประกอบคอนเทนเนอร์ DOM ของแผนภูมิ
getQuery() สตริง สตริงการค้นหาสำหรับแผนภูมินี้ (หากมี) และค้นหาแหล่งข้อมูล
getRefreshInterval() ตัวเลข ช่วงเวลารีเฟรชสำหรับแผนภูมินี้ หากแผนภูมินี้ค้นหาแหล่งข้อมูล 0 หมายถึงไม่มีการรีเฟรช
getOption(key, opt_default_val) ประเภทใดก็ได้

แสดงค่าตัวเลือกแผนภูมิที่ระบุ

  • key - ชื่อของตัวเลือกที่จะเรียกคืน อาจเป็นชื่อที่เข้าเกณฑ์ เช่น 'vAxis.title'
  • opt_default_value [ไม่บังคับ] - หากไม่ได้กำหนดค่าไว้หรือค่าว่าง ระบบจะแสดงผลค่านี้
getOptions() ออบเจ็กต์ แสดงออบเจ็กต์ตัวเลือกสำหรับแผนภูมินี้
getView() ออบเจ็กต์หรืออาร์เรย์ แสดงผลออบเจ็กต์เริ่มต้น DataView ในรูปแบบเดียวกับ dataview.toJSON() หรืออาร์เรย์ของออบเจ็กต์ดังกล่าว
setDataSourceUrl(url) ไม่มี ตั้งค่า URL ของแหล่งข้อมูลที่จะใช้กับแผนภูมินี้ หากคุณตั้งค่าตารางข้อมูลสำหรับออบเจ็กต์นี้ด้วย ระบบจะไม่สนใจ URL ของแหล่งข้อมูล
setDataTable(table) ไม่มี ตั้งค่าตารางข้อมูลสำหรับแผนภูมิ ส่งผ่านค่าใดค่าหนึ่งต่อไปนี้ ได้แก่ null, ออบเจ็กต์ DataTable, การแสดง JSON ของ DataTable หรืออาร์เรย์ที่อยู่ตามไวยากรณ์ของ arrayToDataTable()
setChartType(type) ไม่มี ตั้งค่าประเภทของแผนภูมิ ส่งชื่อคลาสของแผนภูมิที่รวมเข้าด้วยกัน หากเป็น Google แผนภูมิ โปรดอย่ามีคุณสมบัติเป็น google.visualization ตัวอย่างเช่น สำหรับแผนภูมิวงกลม ให้ส่งใน "PieChart"
setChartName(name) ไม่มี ตั้งชื่อแผนภูมิตามต้องการ ส่วนนี้จะไม่ปรากฏที่ใดเลยในแผนภูมิ เว้นแต่แผนภูมิที่กําหนดเองได้รับการออกแบบมาให้ใช้อย่างชัดเจน
setContainerId(id) ไม่มี ตั้งค่ารหัสขององค์ประกอบ DOM ที่มีสำหรับแผนภูมิ
setQuery(query_string) ไม่มี ตั้งค่าสตริงการค้นหา หากแผนภูมินี้ค้นหาแหล่งข้อมูล และต้องตั้งค่า URL แหล่งข้อมูลด้วยหากระบุค่านี้
setRefreshInterval(interval) ไม่มี ตั้งค่าช่วงเวลารีเฟรชสำหรับแผนภูมินี้ หากแผนภูมินี้ค้นหาแหล่งข้อมูล และต้องตั้งค่า URL แหล่งข้อมูลด้วยหากระบุค่านี้ 0 หมายถึงไม่มีการรีเฟรช
setOption(key, value) ไม่มี ตั้งค่าตัวเลือกแผนภูมิค่าเดียว โดย key คือชื่อตัวเลือก และ value คือ ค่า หากต้องการยกเลิกตัวเลือก ให้ส่งค่า Null โปรดทราบว่าคีย์อาจเป็นชื่อที่เข้าเกณฑ์ เช่น 'vAxis.title'
setOptions(options_obj) ไม่มี ตั้งค่าออบเจ็กต์ตัวเลือกทั้งหมดสำหรับแผนภูมิ
setView(view_spec) ไม่มี ตั้งค่าออบเจ็กต์เริ่มต้น DataView ซึ่งทำหน้าที่เป็นตัวกรองของข้อมูลพื้นฐาน Wrapper แผนภูมิต้องมีข้อมูลสำคัญจาก DataTable หรือแหล่งข้อมูลเพื่อใช้ มุมมองนี้ คุณจะส่งในสตริงหรือออบเจ็กต์เริ่มต้น DataView ก็ได้ ตามที่ dataview.toJSON() แสดงผล คุณยังส่งอาร์เรย์ของออบเจ็กต์เริ่มต้น DataView ได้ด้วย ซึ่งในกรณีนี้ DataView แรกในอาร์เรย์จะมีการนำไปใช้กับข้อมูลเบื้องหลังเพื่อสร้างตารางข้อมูลใหม่ และ DataView รายการที่ 2 จะใช้กับตารางข้อมูลที่เป็นผลมาจากการใช้ DataView แรก และอื่นๆ

กิจกรรม

ออบเจ็กต์ ChartWrapper จะแสดงเหตุการณ์ต่อไปนี้ โปรดทราบว่าคุณต้องเรียกใช้ ChartWrapper.draw() ก่อน ระบบจึงจะส่งเหตุการณ์ได้

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
error เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ รหัส, ข้อความ
ready แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น ไม่มี
select เริ่มทำงานเมื่อผู้ใช้คลิกแท่งหรือคำอธิบาย เมื่อเลือกองค์ประกอบของแผนภูมิ ระบบจะเลือกเซลล์ที่เกี่ยวข้องในตารางข้อมูล และเมื่อเลือกคำอธิบาย ระบบจะเลือกคอลัมน์ที่เกี่ยวข้องในตารางข้อมูล หากต้องการดูสิ่งที่เลือก โปรดโทรหา ChartWrapper.getChart(). getSelection() โปรดทราบว่าระบบจะแสดงข้อมูลนี้เมื่อแผนภูมิประเภทที่สําคัญแสดงเหตุการณ์การเลือกเท่านั้น ไม่มี

ตัวอย่าง

ข้อมูลโค้ด 2 รายการต่อไปนี้จะสร้างแผนภูมิเส้นที่เทียบเท่า ตัวอย่างที่ 1 ใช้รูปแบบตัวอักษร JSON เพื่อกำหนดแผนภูมิ ตัวอย่างที่ 2 ใช้เมธอด ChartWrapper เพื่อตั้งค่าเหล่านี้ 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

แผนภูมิเดียวกัน แต่กำลังใช้เมธอด Setter:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

คลาสเครื่องมือแก้ไขแผนภูมิ

คลาส ChartEditor ใช้สำหรับเปิดกล่องโต้ตอบในหน้าเว็บที่ช่วยให้ผู้ใช้ปรับแต่งการแสดงภาพได้อย่างรวดเร็ว

วิธีใช้ ChartEditor

  1. โหลดแพ็กเกจ charteditor ใน google.charts.load() ให้โหลดแพ็กเกจ "charteditor" คุณไม่จำเป็นต้องโหลดแพ็กเกจสำหรับประเภทแผนภูมิที่คุณแสดงผลในตัวแก้ไข เครื่องมือแก้ไขแผนภูมิจะโหลดแพ็กเกจตามที่คุณต้องการ
  2. สร้างออบเจ็กต์ ChartWrapper ที่กำหนดแผนภูมิให้ผู้ใช้ปรับแต่ง แผนภูมินี้จะแสดงในกล่องโต้ตอบและผู้ใช้ใช้ตัวแก้ไขเพื่อออกแบบแผนภูมิใหม่ เปลี่ยนประเภทแผนภูมิ หรือแม้กระทั่งเปลี่ยนข้อมูลต้นฉบับ
  3. สร้างอินสแตนซ์ ChartEditor ใหม่และลงทะเบียนเพื่อฟังเหตุการณ์ "ok" ระบบจะส่งเหตุการณ์นี้เมื่อผู้ใช้คลิกปุ่ม "ตกลง" บนกล่องโต้ตอบ เมื่อได้รับแล้ว คุณควรเรียกใช้ ChartEditor.getChartWrapper() เพื่อเรียกข้อมูลแผนภูมิที่ผู้ใช้แก้ไข
  4. โทรหา ChartEditor.openDialog() ซึ่งผ่านใน ChartWrapper การดำเนินการนี้จะเปิดกล่องโต้ตอบ ปุ่มกล่องโต้ตอบช่วยให้ผู้ใช้ปิดเครื่องมือแก้ไขได้ อินสแตนซ์ ChartEditor พร้อมใช้งานตราบเท่าที่อยู่ในขอบเขต อินสแตนซ์จะไม่ถูกทำลายโดยอัตโนมัติหลังจากที่ผู้ใช้ปิดกล่องโต้ตอบ
  5. หากต้องการอัปเดตแผนภูมิในโค้ด โปรดโทรไปที่ setChartWrapper()

วิธีการ

วิธีการ ผลลัพธ์ คำอธิบาย
openDialog(chartWrapper, opt_options) null

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

  • chartWrapper - ออบเจ็กต์ ChartWrapper ที่กำหนดแผนภูมิเริ่มต้นที่จะแสดงผลในหน้าต่าง แผนภูมิต้องมี DataTable ที่ป้อน หรือเชื่อมต่อกับแหล่งข้อมูลที่ถูกต้อง ระบบจะคัดลอก Wrapper นี้ไปยังเครื่องมือแก้ไขแผนภูมิเป็นการภายใน การเปลี่ยนแปลงที่คุณทำในภายหลังกับแฮนเดิล ChartWrapper จะไม่แสดงในสำเนาของเครื่องมือแก้ไขแผนภูมิ
  • opt_options - [ไม่บังคับ] ออบเจ็กต์ที่มีตัวเลือกสำหรับเครื่องมือแก้ไขแผนภูมิ โปรดดูตารางตัวเลือกด้านล่าง
getChartWrapper() ChartWrapper แสดงผล ChartWrapper ซึ่งแสดงแผนภูมิพร้อมการแก้ไขผู้ใช้
setChartWrapper(chartWrapper) null

ใช้วิธีนี้เพื่ออัปเดตแผนภูมิที่แสดงผลในตัวแก้ไข

chartWrapper - ออบเจ็กต์ ChartWrapper ที่แสดงถึงแผนภูมิใหม่เพื่อแสดงผล แผนภูมิต้องมี DataTable ที่ป้อน หรือเชื่อมต่อกับแหล่งข้อมูลที่ถูกต้อง

closeDialog() null ปิดกล่องโต้ตอบของเครื่องมือแก้ไขแผนภูมิ

ตัวเลือก

เครื่องมือแก้ไขแผนภูมิรองรับตัวเลือกต่อไปนี้

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
dataSourceInput แฮนเดิลองค์ประกอบหรือ "urlbox" null

ใช้ค่านี้เพื่อให้ผู้ใช้สามารถระบุแหล่งข้อมูลสำหรับแผนภูมิ พร็อพเพอร์ตี้นี้อาจเป็นค่าใดค่าหนึ่งจาก 2 ค่าต่อไปนี้

  • 'urlbox' - แสดง URL แหล่งข้อมูลของแผนภูมิบนกล่องโต้ตอบใน กล่องข้อความที่แก้ไขได้ ผู้ใช้จะแก้ไขข้อมูลนี้ได้และระบบจะวาดแผนภูมิใหม่โดยอิงตามแหล่งข้อมูลใหม่
  • องค์ประกอบ DOM - ให้คุณระบุองค์ประกอบ HTML ที่กำหนดเองเพื่อใช้เลือกแหล่งข้อมูล ส่งแฮนเดิลไปยังองค์ประกอบ HTML โดยอาจเป็นองค์ประกอบที่สร้างขึ้นในโค้ดหรือคัดลอกมาจากหน้าก็ได้ องค์ประกอบนี้จะแสดงในกล่องโต้ตอบ ใช้วิธีนี้เพื่อให้ผู้ใช้เลือกแหล่งข้อมูลของแผนภูมิได้ เช่น สร้างกล่องรายการที่มี URL ของแหล่งข้อมูลหลายรายการหรือชื่อที่เข้าใจง่ายซึ่งผู้ใช้สามารถเลือกได้ องค์ประกอบต้องใช้เครื่องจัดการการเลือกและใช้เพื่อเปลี่ยนแหล่งข้อมูลของแผนภูมิ เช่น เปลี่ยน DataTable ที่สำคัญ หรือแก้ไขช่อง dataSourceUrl ของแผนภูมิ

กิจกรรม

เครื่องมือแก้ไขแผนภูมิจะแสดงเหตุการณ์ต่อไปนี้

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
ok เริ่มทำงานเมื่อผู้ใช้คลิกปุ่ม "ตกลง" บนกล่องโต้ตอบ หลังจากได้รับวิธีการนี้แล้ว คุณควรเรียกใช้ getChartWrapper() เพื่อเรียกข้อมูลแผนภูมิที่กำหนดค่าโดยผู้ใช้ ไม่มี
cancel เริ่มทำงานเมื่อผู้ใช้คลิกปุ่ม "ยกเลิก" บนกล่องโต้ตอบ ไม่มี

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

วิธีการจัดการข้อมูล

เนมสเปซ google.visualization.data มีเมธอดแบบคงที่เพื่อดำเนินการแบบเดียวกับ SQL บนออบเจ็กต์ DataTable เช่น การรวมหรือจัดกลุ่มตามค่าคอลัมน์

เนมสเปซ google.visualization.data จะแสดงเมธอดต่อไปนี้

วิธีการ คำอธิบาย
google.visualization.data.group ดำเนินการ SQL GROUP BY เพื่อแสดงผลตารางที่จัดกลุ่มตามค่าในคอลัมน์ที่ระบุ
google.visualization.data.join รวมตารางข้อมูล 2 ตารางในคอลัมน์คีย์อย่างน้อย 1 คอลัมน์

group()

รับออบเจ็กต์ DataTable ที่มีการป้อนข้อมูลและดำเนินการ GROUP BY ที่คล้ายกับ SQL โดยแสดงผลตารางที่มีแถวที่จัดกลุ่มตามค่าคอลัมน์ที่ระบุ โปรดทราบว่าการดำเนินการนี้จะไม่แก้ไขอินพุต DataTable

ตารางที่แสดงผลมี 1 แถวสำหรับชุดค่าผสมแต่ละชุดในคอลัมน์คีย์ที่ระบุ แต่ละแถวจะมีคอลัมน์คีย์และอีก 1 คอลัมน์ที่มีค่าคอลัมน์รวมจากทุกแถวที่ตรงกับชุดคีย์ (เช่น ผลรวมหรือจำนวนค่าทั้งหมดในคอลัมน์ที่ระบุ)

เนมสเปซ google.visualization.data มีค่าการรวมที่เป็นประโยชน์หลายค่า (เช่น sum และ count) แต่คุณจะกำหนดค่าของคุณเองได้ (เช่น standardDeviation หรือ secondHighest) โดยจะมีคำแนะนำเกี่ยวกับวิธีการกำหนดผู้รวบรวมข้อมูลของคุณเอง หลังคำอธิบายวิธีการ

ไวยากรณ์

google.visualization.data.group(data_table, keys, columns)
data_table
อินพุต DataTable การแก้ไขนี้จะไม่เปลี่ยนแปลงโดยการเรียกใช้ group()
คีย์
อาร์เรย์ของตัวเลขและ/หรือออบเจ็กต์ที่ระบุคอลัมน์ที่จะจัดกลุ่ม ตารางผลลัพธ์จะมีทุกคอลัมน์ในอาร์เรย์นี้ และทุกคอลัมน์ใน columns หากเป็นตัวเลข นี่คือดัชนีคอลัมน์ของอินพุต DataTable เพื่อจัดกลุ่ม หากเป็นออบเจ็กต์ จะมีฟังก์ชันที่แก้ไขคอลัมน์ที่ระบุได้ (เช่น เพิ่ม 1 ให้กับค่าในคอลัมน์นั้น) ออบเจ็กต์ต้องมีพร็อพเพอร์ตี้ต่อไปนี้
  • column - ตัวเลขที่เป็นดัชนีคอลัมน์จาก dt ที่จะนำการเปลี่ยนรูปแบบไปใช้
  • modifier - ฟังก์ชันที่ยอมรับค่า 1 ค่า (ค่าเซลล์ในคอลัมน์นั้นสำหรับแต่ละแถว) และแสดงผลค่าที่แก้ไข ฟังก์ชันนี้ใช้ปรับเปลี่ยนค่าคอลัมน์เพื่อช่วยในการจัดกลุ่ม เช่น การเรียกใช้ฟังก์ชัน "ไตรมาส" ซึ่งคํานวณไตรมาสจากคอลัมน์วันที่ เพื่อให้ API จัดกลุ่มแถวตามไตรมาสได้ ค่าที่คำนวณแล้วจะแสดงในคอลัมน์คีย์ในตารางผลลัพธ์ คุณสามารถประกาศฟังก์ชันนี้ในบรรทัดภายในออบเจ็กต์นี้ หรืออาจเป็นฟังก์ชันที่คุณกําหนดไว้ที่อื่นในโค้ด (ต้องอยู่ภายในขอบเขตการเรียกใช้) API มีฟังก์ชันตัวปรับแต่งแบบง่าย 1 ฟังก์ชัน ดูวิธีการสร้างฟังก์ชันที่มีประโยชน์มากขึ้นของคุณเอง คุณต้องทราบประเภทข้อมูลที่ฟังก์ชันนี้ยอมรับได้ และเรียกใช้เฉพาะข้อมูลในคอลัมน์ประเภทดังกล่าวเท่านั้น นอกจากนี้ คุณต้องทราบประเภทการแสดงผลของฟังก์ชันนี้และประกาศในพร็อพเพอร์ตี้ type ตามที่อธิบายไว้ถัดไปด้วย
  • type - ประเภทที่ตัวแก้ไขฟังก์ชันแสดงผล ชื่อนี้ควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "boolean"
  • label - [ไม่บังคับ] ป้ายกำกับสตริงที่จะกำหนดคอลัมน์นี้ใน DataTable ที่แสดงผล
  • id - [ไม่บังคับ] รหัสสตริงที่จะกำหนดคอลัมน์นี้ใน DataTable ที่แสดงผล

เช่น [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
คอลัมน์
[ไม่บังคับ] ช่วยให้คุณระบุคอลัมน์นอกเหนือจากคอลัมน์หลักที่จะรวมไว้ในตารางเอาต์พุตได้ เนื่องจากแถวทั้งหมดในกลุ่มแถวได้รับการบีบอัดเป็นแถวเอาต์พุตเดียว คุณจึงต้องกำหนดค่าที่จะแสดงสำหรับกลุ่มแถวนั้น เช่น คุณอาจเลือกแสดงค่าคอลัมน์จากแถวแรกในชุด หรือแสดงค่าเฉลี่ยของแถวทั้งหมดในกลุ่มก็ได้ columns คืออาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้ดังต่อไปนี้
  • column - ตัวเลขที่ระบุดัชนีของคอลัมน์ที่จะแสดง
  • aggregation - ฟังก์ชันที่ยอมรับอาร์เรย์ของค่าทั้งหมดของคอลัมน์นี้ในกลุ่มแถวนี้ และแสดงผลค่าเดียวที่จะแสดงในแถวผลลัพธ์ ค่าผลลัพธ์ต้องเป็นประเภทที่พร็อพเพอร์ตี้ type ของออบเจ็กต์ระบุไว้ ด้านล่างนี้เป็นรายละเอียดเกี่ยวกับการสร้างฟังก์ชันการรวมข้อมูลของคุณเอง คุณต้องทราบว่าวิธีการนี้ยอมรับข้อมูลประเภทใดและจะเรียกใช้ข้อมูลในคอลัมน์ของประเภทที่เหมาะสมเท่านั้น API มีฟังก์ชันการรวมที่เป็นประโยชน์มากมาย โปรดดูรายการที่หัวข้อฟังก์ชันการรวมที่ระบุด้านล่าง หรือการสร้างฟังก์ชันการรวมเพื่อดูวิธีเขียนฟังก์ชันการรวมของคุณเอง
  • type - ประเภทการแสดงผลของฟังก์ชันการรวม ชื่อนี้ควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "boolean"
  • label - [ไม่บังคับ] ป้ายกำกับสตริงที่จะใช้กับคอลัมน์นี้ในตารางที่แสดงผล
  • id - [ไม่บังคับ] รหัสสตริงที่จะใช้กับคอลัมน์นี้ในตารางที่แสดงผล

มูลค่าการคืนสินค้า

DataTable ที่มี 1 คอลัมน์สำหรับแต่ละคอลัมน์ที่ระบุไว้ในคีย์ และ 1 คอลัมน์สำหรับแต่ละคอลัมน์ที่แสดงอยู่ในคอลัมน์ ตารางจะจัดเรียงตามแถวสำคัญจากซ้ายไปขวา

ตัวอย่าง

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

ฟังก์ชันตัวปรับแต่งที่มีให้

API มีฟังก์ชันตัวปรับแต่งต่อไปนี้ซึ่งคุณส่งผ่านไปยังคีย์ได้ modifier เพื่อปรับแต่งลักษณะการจัดกลุ่ม

การทำงาน ประเภทอาร์เรย์อินพุต ประเภทการแสดงผล คำอธิบาย
google.visualization.data.month วันที่ ตัวเลข หากระบุวันที่ ฟังก์ชันนี้จะแสดงค่าเดือนแบบ 0 (0, 1, 2 และอื่นๆ)

ฟังก์ชันการรวมข้อมูลที่มีให้

API มีฟังก์ชันการรวมต่อไปนี้ซึ่งคุณส่งผ่านไปยังคอลัมน์ได้ aggregation อาร์เรย์

การทำงาน ประเภทอาร์เรย์อินพุต ประเภทการแสดงผล คำอธิบาย
google.visualization.data.avg ตัวเลข ตัวเลข ค่าเฉลี่ยของอาร์เรย์ที่ส่งผ่าน
google.visualization.data.count ประเภทใดก็ได้ ตัวเลข จำนวนแถวในกลุ่ม ระบบจะนับค่า Null และที่ซ้ำกัน
google.visualization.data.max ตัวเลข, สตริง, วันที่ number, string, Date, null ค่าสูงสุดในอาร์เรย์ สำหรับสตริง นี่คือรายการแรกในรายการที่จัดเรียงแบบพจนานุกรม ส่วนค่าวันที่คือวันที่ล่าสุด ระบบจะไม่สนใจค่า Null แสดงผล Null หากไม่มีจำนวนสูงสุด
google.visualization.data.min ตัวเลข, สตริง, วันที่ number, string, Date, null ค่าต่ำสุดในอาร์เรย์ สำหรับสตริง นี่คือรายการสุดท้ายในรายการที่จัดเรียงแบบพจนานุกรม ส่วนค่าวันที่จะเป็นวันที่แรกสุด ระบบจะไม่สนใจค่า Null แสดงผล Null หากไม่มีค่าขั้นต่ำ
google.visualization.data.sum ตัวเลข ตัวเลข ผลรวมของค่าทั้งหมดในอาร์เรย์

การสร้างฟังก์ชันตัวปรับแต่ง

คุณจะสร้างฟังก์ชันตัวปรับแต่งเพื่อดำเนินการเปลี่ยนรูปแบบค่าคีย์แบบง่ายๆ ก่อนที่ฟังก์ชัน group() จะจัดกลุ่มแถวได้ ฟังก์ชันนี้ใช้ค่าเซลล์เพียงค่าเดียวและดำเนินการกับค่าดังกล่าว (เช่น เพิ่ม 1 ลงในค่า) แล้วแสดงผลค่า ประเภทอินพุตและการส่งกลับไม่จำเป็นต้องเป็นประเภทเดียวกัน แต่ผู้โทรต้องทราบประเภทอินพุตและเอาต์พุต ต่อไปนี้คือตัวอย่างของฟังก์ชันที่ยอมรับวันที่และแสดงผลไตรมาส 

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

การสร้างฟังก์ชันการรวม

คุณสร้างฟังก์ชันการรวมที่ยอมรับชุดของคอลัมน์ในกลุ่มแถวและแสดงผลตัวเลขเดียวได้ เช่น การแสดงผลจำนวนหรือค่าเฉลี่ยของค่า ต่อไปนี้คือการใช้งานฟังก์ชันการรวมจำนวนที่มีให้ ซึ่งจะแสดงผลจำนวนแถวที่อยู่ในกลุ่มแถว 

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

Join()

วิธีนี้จะรวมตารางข้อมูล 2 ตาราง (ออบเจ็กต์ DataTable หรือ DataView) เข้าเป็นตารางผลลัพธ์เดียว ซึ่งคล้ายกับคำสั่ง JOIN ของ SQL คุณระบุคู่คอลัมน์อย่างน้อย 1 คู่ (คอลัมน์ key) ระหว่าง 2 ตาราง และตารางเอาต์พุตจะมีแถวตามวิธีการผนวกที่คุณระบุ กล่าวคือ เฉพาะแถวที่คีย์ทั้ง 2 ตรงกันเท่านั้น แถวทั้งหมดจากตารางเดียว หรือทุกแถวจากทั้ง 2 ตาราง ไม่ว่าคีย์จะตรงกันหรือไม่ก็ตาม ตารางผลลัพธ์จะมีเฉพาะคอลัมน์หลักและคอลัมน์เพิ่มเติมที่คุณระบุ โปรดทราบว่า dt2 มีคีย์ซ้ำกันไม่ได้ แต่ dt1 มีไม่ได้ คำว่า "คีย์" หมายถึงชุดค่าผสมของค่าคอลัมน์คีย์ทั้งหมด ไม่ใช่ค่าคอลัมน์ของคีย์ที่เฉพาะเจาะจง ดังนั้นหากแถวมีค่าของเซลล์ A | B | C และคอลัมน์ 0 และ 1 เป็นคอลัมน์คีย์ คีย์สำหรับแถวนั้นจะเป็น AB

ไวยากรณ์

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);
dt1
ป้อนข้อมูล DataTable เพื่อรวม dt2
dt2
ป้อนข้อมูล DataTable ให้รวมเข้ากับ dt1 ตารางนี้มีคีย์ที่เหมือนกันหลายรายการไม่ได้ (เมื่อคีย์เป็นชุดค่าผสมของค่าคอลัมน์คีย์)
joinMethod
สตริงที่ระบุประเภทการผนวก หาก dt1 มีหลายแถวที่ตรงกับแถว dt2 ตารางเอาต์พุตจะรวมแถว dt1 ที่ตรงกันทั้งหมด เลือกจากค่าต่อไปนี้
  • "เต็ม" - ตารางเอาต์พุตจะมีแถวทั้งหมดจากทั้ง 2 ตาราง ไม่ว่าคีย์จะตรงกันหรือไม่ก็ตาม แถวที่ไม่ตรงกันจะมีรายการเซลล์ที่เป็นค่าว่าง โดยแถวที่ตรงกันจะผนวกกัน
  • "ภายใน" - จำนวนรวมทั้งหมดที่กรองให้รวมเฉพาะแถวที่ตรงกับคีย์
  • "left" - ตารางเอาต์พุตจะรวมแถวทั้งหมดจาก dt1 ไม่ว่าจะมีแถวที่ตรงกันจาก dt2 หรือไม่ก็ตาม
  • "right" - ตารางเอาต์พุตจะรวมแถวทั้งหมดจาก dt2 ไม่ว่าจะมีแถวที่ตรงกันจาก dt1 หรือไม่ก็ตาม
คีย์
อาร์เรย์ของคอลัมน์คีย์ที่จะเปรียบเทียบจากทั้ง 2 ตาราง แต่ละคู่เป็นอาร์เรย์ 2 เอลิเมนต์ อันแรกเป็นคีย์ใน dt1 ส่วนอันที่ 2 เป็นคีย์ใน dt2 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกำกับได้ โปรดดู getColumnIndex
คอลัมน์ต้องเป็นประเภทเดียวกันในทั้ง 2 ตาราง คีย์ที่ระบุทั้งหมดต้องตรงกันตามกฎที่กำหนดโดย joinMethod จึงจะรวมแถวจากตารางได้ คอลัมน์คีย์จะรวมอยู่ในตารางเอาต์พุตเสมอ เฉพาะ dt1 ซึ่งเป็นตารางทางซ้ายมือเท่านั้นที่จะมีคีย์ที่ซ้ำกันได้ คีย์ใน dt2 ต้องไม่ซ้ำกัน คำว่า "คีย์" ในที่นี้หมายถึงชุดคอลัมน์คีย์ที่ไม่ซ้ำกัน ไม่ใช่ค่าแต่ละคอลัมน์ เช่น หากคอลัมน์คีย์คือ A และ B ตารางต่อไปนี้จะมีเฉพาะค่าคีย์ที่ไม่ซ้ำกัน (และใช้เป็น dt2 ได้)
A B
เจน สีแดง
เจน สีน้ำเงิน
เฟรด สีแดง
ตัวอย่าง: [[0,0], [2,1]] เปรียบเทียบค่าจากคอลัมน์แรกในทั้ง 2 ตารางกับคอลัมน์ที่ 3 จาก dt1 กับคอลัมน์ที่ 2 จาก dt1
dt1Columns
อาร์เรย์ของคอลัมน์จาก dt1 ที่จะรวมไว้ในตารางเอาต์พุต นอกเหนือจากคอลัมน์คีย์ของ dt1 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกำกับได้ โปรดดู getColumnIndex
dt2Columns
อาร์เรย์ของคอลัมน์จาก dt2 ที่จะรวมไว้ในตารางเอาต์พุต นอกเหนือจากคอลัมน์คีย์ของ dt2 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกำกับได้ โปรดดู getColumnIndex

มูลค่าการคืนสินค้า

DataTable ที่มีคอลัมน์คีย์ dt1Columns และ dt1Columns ตารางนี้จัดเรียงตามคอลัมน์หลักจากซ้ายไปขวา เมื่อ joinMethod มีค่าเป็น "terior" แล้ว ควรเติมข้อมูลเซลล์คีย์ทั้งหมด สำหรับวิธีการผนวกแบบอื่นๆ หากไม่พบคีย์ที่ตรงกัน ตารางจะมีค่า Null สำหรับเซลล์คีย์ที่ไม่ตรงกัน

ตัวอย่าง

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

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

Google Visualization API มีตัวจัดรูปแบบที่สามารถใช้เพื่อจัดรูปแบบข้อมูลในการแสดงภาพอีกครั้งได้ ตัวจัดรูปแบบเหล่านี้จะเปลี่ยนค่าที่จัดรูปแบบของคอลัมน์ที่ระบุในแถวทั้งหมด โปรดทราบว่า

  • ตัวจัดรูปแบบจะแก้ไขเฉพาะค่าที่จัดรูปแบบแล้วเท่านั้น ไม่ใช่ค่าที่อยู่เบื้องหลัง เช่น ค่าที่แสดงจะเป็น "฿30,000.00" แต่มูลค่าที่อยู่เบื้องหลังยังคงเป็น "1000"
  • ตัวจัดรูปแบบจะมีผลทีละ 1 คอลัมน์เท่านั้น หากต้องการจัดรูปแบบหลายคอลัมน์ใหม่ ให้ใช้ตัวจัดรูปแบบกับแต่ละคอลัมน์ที่ต้องการเปลี่ยนแปลง
  • หากคุณใช้ตัวจัดรูปแบบที่ผู้ใช้กำหนดด้วย ตัวจัดรูปแบบของ Google Visualization บางรุ่นจะลบล้างตัวจัดรูปแบบที่ผู้ใช้กำหนดทั้งหมด

    • การจัดรูปแบบจริงที่ใช้กับข้อมูลได้มาจากภาษาที่โหลด API ไว้ ดูรายละเอียดเพิ่มเติมได้ที่ การโหลดแผนภูมิที่มีภาษาเฉพาะ

    สำคัญ: ตัวจัดรูปแบบใช้ได้กับ DataTable เท่านั้น โดยจะใช้กับ DataView ไม่ได้ (ออบเจ็กต์ DataView รายการเป็นแบบอ่านอย่างเดียว)

    ขั้นตอนทั่วไปในการใช้ตัวจัดรูปแบบมีดังนี้

    1. รับออบเจ็กต์ DataTable ที่สร้างขึ้น
    2. สำหรับแต่ละคอลัมน์ที่ต้องการจัดรูปแบบใหม่ ให้ทำดังนี้
      1. สร้างออบเจ็กต์ที่ระบุตัวเลือกทั้งหมดสำหรับผู้จัดรูปแบบ นี่คือออบเจ็กต์ JavaScript พื้นฐานที่มีชุดพร็อพเพอร์ตี้และค่า ดูเอกสารประกอบของเครื่องมือจัดรูปแบบเพื่อดูพร็อพเพอร์ตี้ที่รองรับ (หรือคุณจะส่งผ่านออบเจ็กต์รูปแบบสัญกรณ์ออบเจ็กต์ที่ระบุตัวเลือกของคุณก็ได้)
      2. สร้างตัวจัดรูปแบบโดยการส่งผ่านในออบเจ็กต์ตัวเลือก
      3. เรียกใช้ formatter.format(table, colIndex) โดยส่งผ่าน DataTable และหมายเลขคอลัมน์ (แบบศูนย์) ของข้อมูลที่จะจัดรูปแบบใหม่ โปรดทราบว่าคุณใช้เครื่องมือจัดรูปแบบได้ 1 ตัวกับแต่ละคอลัมน์เท่านั้น การใช้ตัวจัดรูปแบบที่ 2 จะเป็นการเขียนทับเอฟเฟกต์ของคอลัมน์แรก
        สำคัญ: ตัวจัดรูปแบบจำนวนมากต้องใช้แท็ก HTML เพื่อแสดงการจัดรูปแบบพิเศษ หากการแสดงข้อมูลผ่านภาพรองรับตัวเลือก allowHtml คุณควรตั้งค่าให้เป็นจริง

    ตัวอย่างการเปลี่ยนค่าวันที่ที่จัดรูปแบบของคอลัมน์วันที่ให้ใช้รูปแบบวันที่แบบยาว ("1 มกราคม 2009") มีดังนี้ 

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

    ตัวจัดรูปแบบส่วนใหญ่จะแสดง 2 วิธีต่อไปนี้

    วิธีการ คำอธิบาย
    google.visualization.formatter_name(options)

    ตัวสร้าง โดยที่ formatter_name เป็นชื่อ Formatterclass ที่เฉพาะเจาะจง

    • options - ออบเจ็กต์ JavaScript ทั่วไปที่ระบุตัวเลือกสำหรับการจัดรูปแบบดังกล่าว ออบเจ็กต์นี้เป็นออบเจ็กต์ทั่วไปที่มีคู่พร็อพเพอร์ตี้/ค่า โดยมีพร็อพเพอร์ตี้เฉพาะสำหรับตัวจัดรูปแบบดังกล่าว ดูเอกสารประกอบของรูปแบบเฉพาะเพื่อดูข้อมูลตัวเลือกที่รองรับ ต่อไปนี้คือตัวอย่าง 2 วิธีในการเรียกใช้เครื่องมือสร้างสำหรับออบเจ็กต์ DateFormat โดยส่งในพร็อพเพอร์ตี้ 2 รายการ 
    // Object literal technique
var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5});

// Equivalent property setting technique
var options = new Object();
options['formatType'] = 'long';
options['timeZone'] = -5;
var formatter = new google.visualization.DateFormat(options);
    format(data, colIndex)

    จัดรูปแบบข้อมูลในคอลัมน์ที่ระบุใหม่

    • data - DataTable ที่มีข้อมูลที่จะจัดรูปแบบใหม่ คุณใช้ DataView ที่นี่ไม่ได้
    • colIndex - ดัชนีฐาน 0 ของคอลัมน์เพื่อจัดรูปแบบ หากต้องการจัดรูปแบบหลายคอลัมน์ คุณต้องเรียกใช้เมธอดนี้หลายครั้งโดยใช้ค่า colIndex ต่างกัน

     

    Google Visualization API มีตัวจัดรูปแบบต่อไปนี้

    ชื่อตัวจัดรูปแบบ คำอธิบาย
    ArrowFormat เพิ่มลูกศรขึ้นหรือลงเพื่อบ่งบอกว่าค่าเซลล์อยู่สูงหรือต่ำกว่าค่าที่ระบุ
    BarFormat เพิ่มแถบสี ทิศทางและสีที่ระบุว่าค่าของเซลล์สูงกว่าหรือต่ำกว่าค่าที่ระบุ
    ColorFormat ใส่สีเซลล์โดยพิจารณาว่าค่าอยู่ในช่วงที่ระบุหรือไม่
    DateFormat จัดรูปแบบค่าวันที่หรือวันที่และเวลาในรูปแบบต่างๆ เช่น "1 มกราคม 2009" "1/1/09" และ "1 ม.ค. 2009"
    NumberFormat จัดรูปแบบค่าตัวเลขในด้านต่างๆ
    PatternFormat เชื่อมค่าเซลล์ในแถวเดียวกันไปยังเซลล์ที่ระบุพร้อมข้อความที่กำหนดเอง

    ArrowFormat

    เพิ่มลูกศรขึ้นหรือลงลงในเซลล์ตัวเลข โดยขึ้นอยู่กับว่าค่าสูงกว่าหรือต่ำกว่าค่าฐานที่ระบุ หากเท่ากับค่าฐาน ระบบจะไม่แสดงลูกศร

    ตัวเลือก

    ArrowFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

    Option คำอธิบาย
    base

    ตัวเลขที่ระบุค่าฐาน ซึ่งใช้เพื่อเปรียบเทียบกับค่าเซลล์ หากค่าของเซลล์สูงกว่า เซลล์จะมีลูกศรขึ้นสีเขียว หากค่าของเซลล์ต่ำกว่า จะมีลูกศรลงสีแดง หากค่าเดียวกันจะไม่มีลูกศร

    รหัสตัวอย่าง

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

    BarFormat

    เพิ่มแถบสีลงในเซลล์ตัวเลข ซึ่งระบุว่าค่าของเซลล์นั้นสูงกว่าหรือต่ำกว่าค่าฐานที่ระบุ

    ตัวเลือก

    BarFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

    Option

    ตัวอย่าง

    คำอธิบาย
    base ตัวเลขซึ่งเป็นค่าฐานที่จะใช้เปรียบเทียบค่าเซลล์ หากค่าเซลล์สูงกว่า ค่าจะถูกวาดทางด้านขวาของฐาน หากค่าต่ำกว่า ค่าจะถูกวาดไปทางซ้าย ค่าเริ่มต้นคือ 0
    colorNegative สตริงที่ระบุส่วนค่าลบของแท่ง ค่าที่เป็นไปได้คือ "แดง" "เขียว" และ "น้ำเงิน" โดยค่าเริ่มต้นคือ "แดง"
    colorPositive สตริงที่ระบุสีของส่วนค่าบวกของแท่ง ค่าที่เป็นไปได้คือ "แดง" "เขียว" และ "น้ำเงิน" ค่าเริ่มต้นคือ "สีน้ำเงิน"
    drawZeroLine บูลีนที่ระบุว่าจะวาดเส้นฐานสีเข้มขนาด 1 พิกเซลหรือไม่เมื่อมีค่าลบ แถบสีเข้มจะช่วยเพิ่มประสิทธิภาพการสแกนแถบสีด้วยภาพ ค่าเริ่มต้นคือ "false"
    max ค่าจำนวนสูงสุดของช่วงแท่ง ค่าเริ่มต้นคือค่าสูงสุดในตาราง
    min ค่าจำนวนต่ำสุดของช่วงแท่ง ค่าเริ่มต้นคือค่าต่ำสุดในตาราง
    showValue หากเป็น "จริง" จะแสดงค่าและแถบ หากเป็น "เท็จ" จะแสดงเฉพาะแถบ ค่าเริ่มต้นคือ True
    width ความหนาของแต่ละแท่งในหน่วยพิกเซล ค่าเริ่มต้นคือ 100

    รหัสตัวอย่าง

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    ColorFormat

    กำหนดสีให้กับพื้นหน้าหรือพื้นหลังของเซลล์ตัวเลขโดยขึ้นอยู่กับค่าของเซลล์ ตัวจัดรูปแบบนี้ผิดปกติเนื่องจากไม่มีตัวเลือกในตัวสร้าง คุณควรเรียกใช้ addRange() หรือ addGradientRange() กี่ครั้งก็ได้เพื่อเพิ่มช่วงสีก่อนที่จะเรียกใช้ format() ระบุสีในรูปแบบ HTML ที่ยอมรับในรูปแบบใดก็ได้ เช่น "สีดำ", "#000000" หรือ "#000"

    วิธีการ

    ColorFormat รองรับเมธอดต่อไปนี้

    วิธีการ คำอธิบาย
    google.visualization.ColorFormat() เครื่องมือสร้าง ไม่รับอาร์กิวเมนต์
    addRange(from, to, color, bgcolor)

    ระบุสีพื้นหน้าและ/หรือสีพื้นหลังของเซลล์โดยขึ้นอยู่กับค่าของเซลล์ เซลล์ที่มีค่าในช่วง from ที่ระบุเป็น to ที่กำหนดจะได้รับการกำหนดเป็น color และ bgcolor สิ่งสำคัญที่ควรทราบคือช่วงดังกล่าวเป็นค่าที่ไม่รวม เนื่องจากการสร้างช่วงจาก 1—1,000 และช่วงวินาทีจาก 1,000 โดยที่ 2,000 จะไม่ครอบคลุมค่า 1,000

    • from - [String, Number, Date, DateTime หรือ TimeOfDay] ขอบเขตล่าง (รวม) ของช่วง หรือ Null หากค่าเป็น Null จะจับคู่กับ -∞ ระบบจะเปรียบเทียบขอบเขตสตริงตามตัวอักษรกับค่าสตริง
    • to - [สตริง ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน] ขอบเขตสูง (ไม่รวม) ของช่วง หรือค่าว่าง หากเป็นค่าว่าง ค่าดังกล่าวจะจับคู่กับ +∞ ระบบจะเปรียบเทียบขอบเขตสตริงตามตัวอักษรกับค่าสตริง
    • color - สีที่จะนำไปใช้กับข้อความในเซลล์ที่ตรงกัน ค่าอาจเป็นค่า "#RRGGBB" หรือค่าคงที่ของสีที่กำหนด (เช่น "#FF0000" หรือ "สีแดง")
    • bgcolor - สีที่จะใช้กับพื้นหลังของเซลล์ที่ตรงกัน ค่าอาจเป็น "#RRGGBB" หรือค่าคงที่ของสีที่กำหนดไว้ (เช่น "#FF0000" หรือ "สีแดง")
    addGradientRange(from, to, color, fromBgColor, toBgColor)

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

    • from - [ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน] ขอบเขตล่าง (รวม) ของช่วง หรือค่าว่าง หากเป็นค่าว่าง ค่าดังกล่าวจะตรงกับค่า -∞
    • to - [ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน] ขอบเขตที่สูงกว่า (ไม่รวม) ของช่วง หรือค่าว่าง หากเป็นค่าว่าง ค่าดังกล่าวจะมีค่าเท่ากับ +∞
    • color - สีที่จะนำไปใช้กับข้อความในเซลล์ที่ตรงกัน สีนี้จะเหมือนกันในทุกเซลล์ ไม่ว่าจะมีค่าอะไรก็ตาม
    • fromBgColor - สีพื้นหลังของเซลล์ที่มีค่าการไล่ระดับสีต่ำที่สุด ค่าอาจเป็นค่า "#RRGGBB" หรือค่าคงที่ของสีที่กำหนด (เช่น "#FF0000" หรือ "สีแดง")
    • toBgColor - สีพื้นหลังของเซลล์ที่มีค่าที่อยู่ปลายการไล่ระดับสีระดับสูง ค่าอาจเป็นค่า "#RRGGBB" หรือค่าคงที่ของสีที่กำหนด (เช่น "#FF0000" หรือ "สีแดง")

     
    format(dataTable, columnIndex) เมธอด format() มาตรฐานเพื่อใช้การจัดรูปแบบกับคอลัมน์ที่ระบุ

    รหัสตัวอย่าง

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    DateFormat

    จัดรูปแบบค่า Date ของ JavaScript ได้หลายวิธี เช่น "1 มกราคม 2016" "1/1/16" และ "1 ม.ค. 2016"

    ตัวเลือก

    DateFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

    Option คำอธิบาย
    formatType

    ตัวเลือกการจัดรูปแบบด่วนสำหรับวันที่ ระบบรองรับค่าสตริงต่อไปนี้ ซึ่งจะจัดรูปแบบวันที่ 28 กุมภาพันธ์ 2016 ใหม่ตามที่แสดงไว้

    • "short" - รูปแบบแบบสั้น เช่น "28/2/16"
    • "medium" - รูปแบบสื่อ เช่น "28 กุมภาพันธ์ 2016"
    • "long" - รูปแบบยาว เช่น "28 กุมภาพันธ์ 2016"

    คุณไม่สามารถระบุทั้ง formatType และ pattern ได้
    pattern

    รูปแบบของรูปแบบที่กำหนดเองที่จะใช้กับค่า ซึ่งคล้ายกับรูปแบบวันที่และเวลาของ ICU เช่น var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});

    คุณไม่สามารถระบุทั้ง formatType และ pattern ได้ คุณอ่านรายละเอียดเพิ่มเติมเกี่ยวกับรูปแบบได้ในส่วนถัดไป

    timeZone เขตเวลาที่แสดงค่าวันที่ นี่คือค่าตัวเลขซึ่งระบุ GMT + จำนวนเขตเวลานี้ (อาจเป็นลบได้) ออบเจ็กต์วันที่สร้างขึ้นโดยค่าเริ่มต้นด้วยเขตเวลาที่สมมติขึ้นในคอมพิวเตอร์ที่สร้างออบเจ็กต์วันที่ ตัวเลือกนี้ใช้เพื่อแสดงค่าดังกล่าวในเขตเวลาอื่น เช่น หากคุณสร้างออบเจ็กต์วันที่เป็น 17.00 น. บนคอมพิวเตอร์ที่อยู่ในกรีนิช อังกฤษ และระบุเขตเวลาเป็น -5 (options['timeZone'] = -5 หรือเวลาแปซิฟิกตะวันออกในสหรัฐอเมริกา) ค่าที่แสดงจะเป็น 12 เที่ยงตรง

    วิธีการ

    DateFormat รองรับเมธอดต่อไปนี้

    วิธีการ คำอธิบาย
    google.visualization.DateFormat(options)

    เครื่องมือสร้าง ดูข้อมูลเพิ่มเติมได้ในส่วนตัวเลือกด้านบน
    format(dataTable, columnIndex) เมธอด format() มาตรฐานเพื่อใช้การจัดรูปแบบกับคอลัมน์ที่ระบุ
    formatValue(value)

    แสดงผลค่าที่จัดรูปแบบของค่าที่ระบุ วิธีนี้ไม่ต้องใช้ DataTable

    รหัสตัวอย่าง

    function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

    ข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบวันที่

    รายละเอียดเพิ่มเติมเกี่ยวกับรูปแบบที่รองรับมีดังนี้

    รูปแบบนี้จะคล้ายกับรูปแบบวันที่และเวลาของ ICU แต่ยังไม่รองรับรูปแบบต่อไปนี้ A D F g Y u w W ข้อความตามตัวอักษรที่ต้องการให้ปรากฏในเอาต์พุตควรล้อมรอบด้วยเครื่องหมายคำพูดเดี่ยว ยกเว้นเครื่องหมายคำพูดเดี่ยวที่ควรเพิ่มเป็น 2 เท่า ทั้งนี้เพื่อหลีกเลี่ยงการขัดแย้งกันของรูปแบบ "K 'o''clock.'".

    รูปแบบ คำอธิบาย ตัวอย่างเอาต์พุต
    GG ผู้กำหนดยุค "โฆษณา"
    yy หรือ yyyy ปี 1996
    M

    เดือนในรอบปี สำหรับเดือนมกราคม

    • M สร้าง 1
    • MM สร้าง 01
    • MMM ผลิต ม.ค.
    • MMMM ผลิตเดือนมกราคม

    "กรกฎาคม"

    "07"
    d วันในเดือน ค่า "d" ที่เกินมาจะเพิ่มเลข 0 นำหน้า 10
    h ชั่วโมงในรูปแบบ 12 ชั่วโมง ค่า "h" ที่เกินมาจะบวกเลข 0 ที่นำหน้า 12
    ฮิต ชั่วโมงในรูปแบบ 24 ชั่วโมง ค่า Hk ที่เกินมาจะบวกเลข 0 นำหน้า 0
    m นาทีเป็นชั่วโมง ค่า "M" ที่เกินมาจะเพิ่มเลข 0 นำหน้า 30
    วินาที วินาทีในนาที ค่า "s" ที่เกินมาจะเพิ่มเลข 0 นำหน้า 55
    S เศษส่วนที่สอง จะมีการเพิ่มค่า "S" ที่เกินมาทางด้านขวาด้วยเลขศูนย์ 978
    E

    วันของสัปดาห์ เอาต์พุตต่อไปนี้สำหรับ "วันอังคาร"

    • E ผลิต T
    • EE หรือ EEE ที่ผลิตในวันอังคารหรือวันอังคาร
    • EEEE ผลิตในวันอังคาร

    "อ."

    "วันอังคาร"
    aa AM/PM "PM"
    k ชั่วโมงใน 1 วัน (1~24) ค่า "k" ที่เกินมาจะบวกเลข 0 ที่นำหน้า 24
    K ชั่วโมงใน AM/PM (0~11) ค่า "k" ที่เกินมาจะบวกเลข 0 ที่นำหน้า 0
    z

    เขตเวลา สำหรับเขตเวลา 5 ให้แสดงผล "UTC+5"

    		 "UTC+5"
    Z

    เขตเวลาในรูปแบบ RFC 822 สำหรับเขตเวลา -5:

    Z, ZZ, ZZZ ผลิต -0500

    ZZZZ และผลิตผลอื่นๆ "GMT -05:00"

    "-0800"

    "GMT -05:00"
    v

    เขตเวลา (ทั่วไป)

    		 "อื่นๆ/GMT-5"
    ' Escape สำหรับข้อความ 'วันที่='
    '' เครื่องหมายคำพูดเดี่ยว ป่ะ

    NumberFormat

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

    ตัวเลือก

    NumberFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

    Option คำอธิบาย
    decimalSymbol

    อักขระที่จะใช้เป็นเครื่องหมายทศนิยม ค่าเริ่มต้นคือจุด (.)
    fractionDigits

    ตัวเลขที่ระบุจำนวนหลักที่จะแสดงหลังจุดทศนิยม ค่าเริ่มต้นคือ 2 หากระบุตัวเลขมากกว่าจำนวนที่มีอยู่ ระบบจะแสดงเลขศูนย์สำหรับค่าที่น้อยกว่า ค่าที่ถูกตัดจะปัดเศษ (5 ปัดเศษขึ้น)

    groupingSymbol อักขระที่จะใช้เพื่อจัดกลุ่มตัวเลขทางด้านซ้ายของทศนิยมเป็นชุดที่มี 3 ตัว ค่าเริ่มต้นคือคอมมา (,)
    negativeColor สีข้อความสำหรับค่าลบ ไม่มีค่าเริ่มต้น ค่าอาจเป็นค่าสี HTML ที่ยอมรับได้ เช่น "แดง" หรือ "#FF0000"
    negativeParens บูลีนที่ "จริง" บ่งชี้ว่าควรใส่ค่าลบไว้ในวงเล็บ ค่าเริ่มต้นเป็น True
    pattern

    สตริงรูปแบบ หากระบุ ระบบจะละเว้นตัวเลือกอื่นๆ ทั้งหมด ยกเว้น negativeColor

    สตริงรูปแบบเป็นส่วนหนึ่งของ ชุดรูปแบบ ICU เช่น {pattern:'#,###%'} จะแสดงค่าเอาต์พุต "1,000%", "750%" และ "50%" สำหรับค่า 10, 7.5 และ 0.5

    prefix คำนำหน้าสตริงของค่า เช่น "$"
    suffix คำต่อท้ายสตริงสำหรับค่า เช่น "%"

    วิธีการ

    NumberFormat รองรับเมธอดต่อไปนี้

    วิธีการ คำอธิบาย
    google.visualization.NumberFormat(options)

    เครื่องมือสร้าง ดูข้อมูลเพิ่มเติมได้ในส่วนตัวเลือกด้านบน
    format(dataTable, columnIndex) เมธอด format() มาตรฐานเพื่อใช้การจัดรูปแบบกับคอลัมน์ที่ระบุ
    formatValue(value)

    แสดงผลค่าที่จัดรูปแบบของค่าที่ระบุ วิธีนี้ไม่ต้องใช้ DataTable

    รหัสตัวอย่าง

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    PatternFormat

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

    วิธีการ

    PatternFormat รองรับเมธอดต่อไปนี้

    วิธีการ คำอธิบาย
    google.visualization.PatternFormat(pattern)

    เครื่องมือสร้าง ไม่รับออบเจ็กต์ตัวเลือก แต่จะใช้พารามิเตอร์ pattern ของสตริงแทน นี่คือสตริงที่อธิบายค่าของคอลัมน์ที่จะใส่ลงในคอลัมน์ปลายทาง พร้อมกับข้อความที่กำหนดเอง ฝังตัวยึดตำแหน่งในสตริงเพื่อระบุค่าจากคอลัมน์อื่นที่ต้องการฝัง ตัวยึดตำแหน่งคือ {#} โดยที่ # คือดัชนีของคอลัมน์แหล่งที่มาที่จะใช้ ดัชนีคือดัชนีในอาร์เรย์ srcColumnIndices จากเมธอด format() ด้านล่าง หากต้องการใส่อักขระ { หรือ } ตามตัวอักษร ให้ Escape เป็น \{ หรือ \} หากต้องการใส่เครื่องหมาย \ ตามตัวอักษร ให้ Escape เป็น \\

    รหัสตัวอย่าง

    ตัวอย่างต่อไปนี้แสดงเครื่องมือสร้างสำหรับรูปแบบที่สร้างองค์ประกอบ Anchor โดยนำองค์ประกอบที่ 1 และ 2 มาจากเมธอด format() 

    var formatter = new google.visualization.PatternFormat(
  '<a href="mailto:{1}">{0}</a>');
    format(dataTable, srcColumnIndices, opt_dstColumnIndex)

    การเรียกการจัดรูปแบบมาตรฐานที่มีพารามิเตอร์เพิ่มเติมเล็กน้อย ได้แก่

    • dataTable - ตารางข้อมูลที่จะทํางาน
    • srcColumnIndices - อาร์เรย์ของดัชนีคอลัมน์อย่างน้อย 1 รายการ (แบบศูนย์) ที่จะดึงเป็นแหล่งที่มาจาก DataTable ที่สำคัญ ระบบจะใช้ค่านี้เป็นแหล่งข้อมูลสำหรับพารามิเตอร์ pattern ในตัวสร้าง หมายเลขคอลัมน์ไม่ต้องเรียงตามลำดับ
    • opt_dstColumnIndex - [optional] คอลัมน์ปลายทางที่จะวางเอาต์พุตของการปรับแต่ง pattern หากไม่ได้ระบุไว้ ระบบจะใช้องค์ประกอบแรกใน srcColumIndices เป็นปลายทาง

    ดูตัวอย่างการจัดรูปแบบหลังตาราง

    ต่อไปนี้คือตัวอย่างบางส่วนของอินพุตและเอาต์พุตสำหรับตาราง 4 คอลัมน์

    Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

    รหัสตัวอย่าง

    ตัวอย่างต่อไปนี้แสดงวิธีรวมข้อมูลจาก 2 คอลัมน์เพื่อสร้างอีเมล โดยใช้ออบเจ็กต์ DataView เพื่อซ่อนคอลัมน์แหล่งที่มาเดิม ดังนี้ 

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    GadgetHelper

    ชั้นเรียนผู้ช่วยที่ลดความซับซ้อนในการเขียนแกดเจ็ตที่ใช้ Google Visualization API

    ผู้ผลิต

    google.visualization.GadgetHelper()

    วิธีการ

    วิธีการ ผลลัพธ์ คำอธิบาย
    createQueryFromPrefs(prefs) google.visualization.Query คงที่ สร้างอินสแตนซ์ใหม่ของ google.visualization.Query และตั้งค่าพร็อพเพอร์ตี้ตามค่าจากค่ากำหนดของแกดเจ็ต ประเภทของพารามิเตอร์ prefs คือ _IG_Prefs
    1. ค่ากำหนด _table_query_url ใช้เพื่อตั้งค่า URL แหล่งข้อมูลการค้นหา
    2. ค่ากำหนด _table_query_refresh_interval ใช้เพื่อกำหนดช่วงเวลาการรีเฟรชการค้นหา (เป็นวินาที)
    validateResponse(response) บูลีน คงที่ พารามิเตอร์ response เป็นประเภท google.visualization.QueryResponse แสดงผล true หากการตอบกลับมีข้อมูล แสดงผล false หากการดำเนินการค้นหาล้มเหลวและการตอบกลับไม่มีข้อมูล หากเกิดข้อผิดพลาด วิธีนี้จะแสดงข้อความแสดงข้อผิดพลาด

    คลาสการค้นหา

    ออบเจ็กต์ต่อไปนี้พร้อมสำหรับการส่งการค้นหาข้อมูลไปยังแหล่งข้อมูลภายนอก เช่น Google สเปรดชีต

    • การค้นหา - รวมคำขอข้อมูลขาออก
    • QueryResponse - จัดการการตอบสนองจากแหล่งข้อมูล

    คำค้นหา

    หมายถึงการค้นหาที่ส่งไปยังแหล่งข้อมูล

    ผู้ผลิต

    google.visualization.Query(dataSourceUrl, opt_options)

    พารามิเตอร์

    dataSourceUrl
    [จําเป็น, สตริง] URL ที่จะส่งคําค้นหา โปรดดูเอกสารประกอบเกี่ยวกับแผนภูมิและสเปรดชีตสำหรับ Google สเปรดชีต
    opt_options
    [ไม่บังคับ ออบเจ็กต์] แมปของตัวเลือกสำหรับคำขอ หมายเหตุ: หากคุณเข้าถึง แหล่งข้อมูลที่ถูกจำกัด คุณไม่ควรใช้พารามิเตอร์นี้ พร็อพเพอร์ตี้ที่รองรับมีดังนี้
    • sendMethod - [ไม่บังคับ, สตริง] ระบุวิธีที่จะใช้ส่งการค้นหา เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้
      • 'xhr' - ส่งคำค้นหาโดยใช้ XmlHttpRequest
      • 'scriptInjection" - ส่งคำค้นหาโดยใช้การแทรกสคริปต์
      • 'makeRequest' - [ใช้ได้กับแกดเจ็ตเท่านั้น ซึ่งเลิกใช้งานแล้ว] ส่งคำค้นหาโดยใช้เมธอด API ของแกดเจ็ต makeRequest() หากระบุ คุณควรระบุ makeRequestParams ด้วย
      • 'auto' - ใช้วิธีการที่ระบุโดยพารามิเตอร์ URL tqrt จาก URL แหล่งข้อมูล tqrt สามารถมีค่าต่อไปนี้: 'xhr', 'scriptInjection' หรือ 'makeRequest' หากไม่มี tqrt หรือมีค่าที่ไม่ถูกต้อง ค่าเริ่มต้นคือ "xhr" สำหรับคำขอในโดเมนเดียวกัน และ "scriptInjection" สำหรับคำขอข้ามโดเมน
    • makeRequestParams - [Object] แมปของพารามิเตอร์สำหรับการค้นหา makeRequest() ใช้และจำเป็นเฉพาะในกรณีที่ sendMethod เป็น "makeRequest" เท่านั้น

    วิธีการ

    วิธีการ ผลลัพธ์ คำอธิบาย
    abort() ไม่มี หยุดการส่งการค้นหาอัตโนมัติที่เริ่มต้นด้วย setRefreshInterval()
    setRefreshInterval(seconds) ไม่มี

    ตั้งค่าการค้นหาให้เรียกใช้เมธอด send โดยอัตโนมัติทุกๆ ระยะเวลาที่ระบุ (จำนวนวินาที) เริ่มตั้งแต่การเรียกที่ชัดเจนครั้งแรกไปยัง send seconds คือตัวเลขที่มากกว่าหรือเท่ากับ 0

    หากใช้วิธีนี้ คุณควรเรียกใช้ก่อนเรียกใช้เมธอด send

    ยกเลิกวิธีการนี้โดยการโทรอีกครั้งโดยใช้ศูนย์ (ค่าเริ่มต้น) หรือโดยการเรียกใช้ abort()

    setTimeout(seconds) ไม่มี กำหนดจำนวนวินาทีที่จะรอให้แหล่งข้อมูลตอบสนองก่อนเพิ่มข้อผิดพลาดการหมดเวลา seconds เป็นจำนวนที่มากกว่า 0
    ระยะหมดเวลาเริ่มต้นคือ 30 วินาที หากใช้วิธีนี้ ควรเรียกใช้เมธอดก่อนเรียกใช้เมธอด send
    setQuery(string) ไม่มี ตั้งค่าสตริงการค้นหา ค่าของพารามิเตอร์ string ควรเป็นการค้นหาที่ถูกต้อง
    หากใช้วิธีนี้ ควรเรียกใช้เมธอดก่อนเรียกใช้เมธอด send ดูข้อมูลเพิ่มเติมเกี่ยวกับภาษาในการค้นหา
    send(callback) ไม่มี ส่งคำถามไปยังแหล่งข้อมูล callback ควรเป็นฟังก์ชันที่ระบบจะเรียกใช้เมื่อแหล่งข้อมูลตอบสนอง ฟังก์ชัน Callback จะได้รับพารามิเตอร์เดี่ยวประเภท google.visualization.QueryResponse

    QueryResponse

    แสดงการตอบกลับของการดำเนินการค้นหาที่ได้รับจากแหล่งข้อมูล ระบบจะส่งอินสแตนซ์ของคลาสนี้เป็นอาร์กิวเมนต์ไปยังฟังก์ชัน Callback ที่ตั้งค่าไว้เมื่อมีการเรียกใช้ Query.send

    วิธีการ

    วิธีการ ผลลัพธ์ คำอธิบาย
    getDataTable() DataTable แสดงผลตารางข้อมูลตามที่แหล่งข้อมูลแสดงผล แสดงผล null หากการดำเนินการค้นหาล้มเหลวและไม่มีการแสดงผลข้อมูล
    getDetailedMessage() สตริง แสดงผลข้อความแสดงข้อผิดพลาดโดยละเอียดสำหรับการค้นหาที่ล้มเหลว หากการดำเนินการค้นหาสำเร็จ วิธีนี้จะแสดงผลสตริงว่าง ข้อความที่ส่งคืนเป็นข้อความ ที่มีไว้สำหรับนักพัฒนาซอฟต์แวร์และอาจมีข้อมูลทางเทคนิค เช่น "ไม่มีคอลัมน์ {salary}"
    getMessage() สตริง แสดงผลข้อความแสดงข้อผิดพลาดสั้นๆ สำหรับการค้นหาที่ล้มเหลว หากการดำเนินการค้นหาสำเร็จ วิธีนี้จะแสดงผลสตริงว่าง ข้อความที่ส่งคืนเป็นข้อความสั้นๆ ที่มีไว้สำหรับผู้ใช้ปลายทาง เช่น "คำค้นหาไม่ถูกต้อง" หรือ "การเข้าถึงถูกปฏิเสธ"
    getReasons() อาร์เรย์ของสตริง แสดงผลอาร์เรย์ของจำนวนรายการเพิ่มเติมที่เป็นศูนย์ แต่ละรายการคือสตริงสั้นๆ ที่มีรหัสข้อผิดพลาดหรือคําเตือนที่เกิดขึ้นขณะดําเนินการค้นหา รหัสที่เป็นไปได้มีดังนี้
    • access_denied ผู้ใช้ไม่มีสิทธิ์เข้าถึงแหล่งข้อมูล
    • invalid_query คำค้นหาที่ระบุมีข้อผิดพลาดทางไวยากรณ์
    • data_truncated แถวข้อมูลอย่างน้อย 1 แถวที่ตรงกับการเลือกการค้นหาไม่แสดงผลเนื่องจากขีดจำกัดของขนาดเอาต์พุต (คำเตือน)
    • timeout การค้นหาไม่ตอบกลับภายในเวลาที่คาดไว้
    hasWarning() บูลีน แสดงผล true หากการดำเนินการค้นหามีข้อความเตือน
    isError() บูลีน แสดงผล true หากดำเนินการค้นหาไม่สำเร็จ และการตอบกลับไม่มีตารางข้อมูล แสดงผล <false> หากการดำเนินการค้นหาสำเร็จและการตอบกลับมีตารางข้อมูล

    การแสดงข้อผิดพลาด

    API มีฟังก์ชันมากมายที่จะช่วยคุณแสดงข้อความแสดงข้อผิดพลาดที่กำหนดเองให้กับผู้ใช้ หากต้องการใช้ฟังก์ชันเหล่านี้ ให้ระบุเอลิเมนต์ของคอนเทนเนอร์ในหน้าเว็บ (โดยทั่วไปคือ <div>) ซึ่ง API จะดึงข้อความแสดงข้อผิดพลาดที่มีการจัดรูปแบบ คอนเทนเนอร์นี้อาจเป็นองค์ประกอบคอนเทนเนอร์การแสดงภาพ หรือคอนเทนเนอร์ที่แสดงข้อผิดพลาดเท่านั้น หากคุณระบุองค์ประกอบที่มีการแสดงข้อมูลผ่านภาพ ข้อความแสดงข้อผิดพลาดจะแสดงเหนือการแสดงภาพ จากนั้นเรียกใช้ฟังก์ชันที่เหมาะสมด้านล่างเพื่อแสดงหรือนำออกข้อความแสดงข้อผิดพลาด

    ฟังก์ชันทั้งหมดเป็นฟังก์ชันแบบคงที่ในเนมสเปซ google.visualization.errors

    การแสดงภาพจํานวนมากอาจทำให้เกิดเหตุการณ์ข้อผิดพลาดได้ โปรดดูเหตุการณ์ข้อผิดพลาดด้านล่างเพื่อดูข้อมูลเพิ่มเติม

    คุณดูตัวอย่างข้อผิดพลาดที่กำหนดเองได้ในตัวอย่าง Wrapper การค้นหา

    การทำงาน ผลลัพธ์ คำอธิบาย
    addError(container, message, opt_detailedMessage, opt_options) ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น ค่านี้คือค่าที่ไม่ซ้ำกันในหน้านั้นๆ และจะใช้เพื่อนำข้อผิดพลาดออกหรือค้นหาองค์ประกอบที่มีข้อผิดพลาดนั้นได้

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

    • container - องค์ประกอบ DOM ที่จะแทรกข้อความแสดงข้อผิดพลาด หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript
    • message - ข้อความสตริงที่จะแสดง
    • opt_detailedMessage - สตริงข้อความแบบละเอียดที่ไม่บังคับ โดยค่าเริ่มต้น ข้อความนี้จะเป็นข้อความเมาส์โอเวอร์ แต่สามารถเปลี่ยนแปลงได้ในพร็อพเพอร์ตี้ opt_options.showInToolTip ที่อธิบายไว้ด้านล่าง
    • opt_options - ออบเจ็กต์ตัวเลือกที่มีพร็อพเพอร์ตี้ที่ตั้งค่าตัวเลือกการแสดงผลต่างๆ ให้กับข้อความ ระบบรองรับตัวเลือกต่อไปนี้
      • showInTooltip - ค่าบูลีนที่ true จะแสดงข้อความโดยละเอียดเป็นข้อความเคล็ดลับเครื่องมือเท่านั้น ส่วน false จะแสดงข้อความที่มีรายละเอียดในเนื้อหาคอนเทนเนอร์หลังจากข้อความแบบสั้น ค่าเริ่มต้นคือ True
      • type - สตริงที่อธิบายประเภทข้อผิดพลาด ซึ่งกำหนดว่าควรใช้รูปแบบ CSS ใดกับข้อความนี้ ค่าที่รองรับคือ "error" และ "warning" ค่าเริ่มต้นคือ "error"
      • style - สตริงรูปแบบสำหรับข้อความแสดงข้อผิดพลาด สไตล์นี้จะลบล้างรูปแบบใดก็ตามที่ใช้กับประเภทคำเตือน (opt_options.type) ตัวอย่างเช่น 'background-color: #33ff99; padding: 2px;' ค่าเริ่มต้นเป็นสตริงว่างเปล่า
      • removable - ค่าบูลีน (true) หมายความว่าผู้ใช้จะปิดข้อความได้ด้วยการคลิกเมาส์ ค่าเริ่มต้นคือ false
    addErrorFromQueryResponse(container, response)

    ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น หรือค่า Null หากการตอบกลับไม่ได้ระบุข้อผิดพลาด ค่านี้คือค่าที่ไม่ซ้ำกันในหน้านั้นๆ และจะใช้เพื่อนำข้อผิดพลาดออกหรือค้นหาองค์ประกอบที่มีข้อผิดพลาดนั้นได้

    ส่งการตอบกลับการค้นหาและที่เก็บข้อความแสดงข้อผิดพลาดไปยังเมธอดนี้: หากการตอบกลับการค้นหา ระบุถึงข้อผิดพลาดของการค้นหา จะแสดงข้อความแสดงข้อผิดพลาดในองค์ประกอบของหน้าที่ระบุ หากการตอบกลับคำค้นหาเป็นค่าว่าง เมธอดจะแสดงข้อผิดพลาด JavaScript ส่ง QueryResponse ที่ได้รับในเครื่องจัดการการค้นหาไปยังข้อความนี้เพื่อแสดงข้อผิดพลาด นอกจากนี้ยังจะกำหนดรูปแบบของการแสดงผลที่เหมาะสมกับประเภท (ข้อผิดพลาดหรือคำเตือน คล้ายกับ addError(opt_options.type))

    • container - องค์ประกอบ DOM ที่จะแทรกข้อความแสดงข้อผิดพลาด หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript
    • response - ออบเจ็กต์ QueryResponse ที่ตัวแฮนเดิลการค้นหาได้รับเพื่อตอบกลับ query หากเป็นค่าว่าง เมธอดจะแสดงข้อผิดพลาด JavaScript
    removeError(id) บูลีน: true หากนำข้อผิดพลาดออก หรือเป็น false หากไม่เป็นเช่นนั้น

    นำข้อผิดพลาดที่ระบุตามรหัสออกจากหน้า

    • id - รหัสสตริงของข้อผิดพลาดที่สร้างขึ้นโดยใช้ addError() หรือ addErrorFromQueryResponse()
    removeAll(container) ไม่มี

    นำบล็อกข้อผิดพลาดทั้งหมดออกจากคอนเทนเนอร์ที่ระบุ หากไม่มีคอนเทนเนอร์ที่ระบุ ระบบจะแสดงข้อผิดพลาด

    • container - องค์ประกอบ DOM ที่มีสตริงข้อผิดพลาดที่จะนำออก หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript
    getContainer(errorId) จัดการองค์ประกอบ DOM ที่มีข้อผิดพลาดที่ระบุ หรือ Null หากไม่พบ

    เรียกข้อมูลแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ที่มีข้อผิดพลาดที่ระบุโดย errorID

    • errorId - รหัสสตริงของข้อผิดพลาดที่สร้างขึ้นโดยใช้ addError() หรือ addErrorFromQueryResponse()

    กิจกรรม

    การแสดงภาพเหตุการณ์ส่วนใหญ่เริ่มทำงานเพื่อระบุว่าเกิดเหตุการณ์บางอย่างขึ้น ในฐานะผู้ใช้แผนภูมิ คุณมักจะต้องการฟังเหตุการณ์เหล่านี้ หากเขียนโค้ดการแสดงภาพของตัวเอง คุณก็อาจต้องการทริกเกอร์เหตุการณ์ดังกล่าวด้วยตัวเองด้วย

    วิธีการต่อไปนี้ช่วยให้นักพัฒนาซอฟต์แวร์ฟังเหตุการณ์ นำเครื่องจัดการเหตุการณ์ที่มีอยู่ออก หรือทริกเกอร์เหตุการณ์จากภายในการแสดงภาพได้

    addListener()

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

    google.visualization.events.addListener(source_visualization,
  event_name, handling_function)
    source_visualization
    แฮนเดิลของอินสแตนซ์การแสดงภาพต้นฉบับ
    event_name
    ชื่อสตริงของเหตุการณ์ที่จะฟัง การแสดงภาพควรบันทึกว่ามีเหตุการณ์ใดเกิดขึ้นบ้าง
    handling_function
    ชื่อของฟังก์ชัน JavaScript ในเครื่องที่จะเรียกใช้เมื่อ source_visualization ทำให้เหตุการณ์ event_name เริ่มทำงาน ฟังก์ชันการจัดการจะส่งอาร์กิวเมนต์เหตุการณ์ทั้งหมดเป็นพารามิเตอร์

    การคืนสินค้า

    เครื่องจัดการ Listener สำหรับผู้ฟังใหม่ หากจำเป็น เครื่องจัดการสามารถใช้เพื่อนำ Listener นี้ออกในภายหลังได้โดยเรียกใช้ google.visualization.events.removeListener()

    ตัวอย่าง

    ตัวอย่างการลงทะเบียนเข้าร่วมงานที่เราเข้าร่วมมีดังนี้

    var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

    addOneTimeListener()

    ตัวเลือกนี้เหมือนกับ addListener() แต่มีไว้สำหรับเหตุการณ์ที่ควรฟังเพียงครั้งเดียว การส่งเหตุการณ์ครั้งต่อๆ ไปจะไม่เรียกใช้ฟังก์ชันการจัดการ

    ตัวอย่างเมื่อฟีเจอร์นี้มีประโยชน์ คือ การเสมอทุกครั้งจะทำให้มีการส่งเหตุการณ์ ready หากต้องการให้เฉพาะ ready รายการแรกเรียกใช้โค้ด คุณจะต้องใช้ addOneTimeListener แทนที่จะเป็น addListener

    removeListener()

    เรียกใช้เมธอดนี้เพื่อยกเลิกการลงทะเบียน Listener เหตุการณ์ที่มีอยู่

    google.visualization.events.removeListener(listener_handler)
    listener_handler
    เครื่องจัดการ Listener ที่จะนำออก ตามที่ google.visualization.events.addListener() แสดงผล

    removeAllListeners()

    เรียกใช้เมธอดนี้เพื่อยกเลิกการลงทะเบียน Listener เหตุการณ์ทั้งหมดของอินสแตนซ์การแสดงภาพที่ระบุ

    google.visualization.events.removeAllListeners(source_visualization)
    source_visualization
    แฮนเดิลไปยังอินสแตนซ์การแสดงภาพต้นฉบับที่ควรนำ Listener เหตุการณ์ทั้งหมดออก

    trigger()

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

    google.visualization.events.trigger(source_visualization, event_name,
  event_args)
    source_visualization
    แฮนเดิลของอินสแตนซ์การแสดงภาพต้นฉบับ หากเรียกใช้ฟังก์ชันนี้จากภายในเมธอดที่กำหนดโดยการส่งการแสดงภาพ ก็เพียงส่งผ่านคีย์เวิร์ด this
    event_name
    ชื่อสตริงที่จะเรียกใช้เหตุการณ์ คุณเลือกค่าสตริงที่ต้องการได้
    event_args
    [ไม่บังคับ] แมปของคู่ชื่อ/ค่าที่จะส่งต่อไปยังวิธีการรับ เช่น {message: "สวัสดี", คะแนน: 10, ชื่อ: "Fred"} คุณส่งผ่านค่า Null ได้หากไม่จำเป็นต้องมีเหตุการณ์ ควรเตรียมตัวรับให้ยอมรับ Null สำหรับพารามิเตอร์นี้

    ตัวอย่าง

    นี่คือตัวอย่างของการแสดงข้อมูลผ่านภาพที่แสดงเมธอดชื่อ "select" เมื่อมีการเรียกเมธอด onclick ของเมธอดดังกล่าว แต่จะไม่ส่งคืนค่าใดๆ 

    MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

    พร็อพเพอร์ตี้และวิธีการแสดงข้อมูลผ่านภาพแบบมาตรฐาน

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

    หมายเหตุ: วิธีการเหล่านี้อยู่ในเนมสเปซของการแสดงภาพ ไม่ใช่เนมสเปซ google.visualization

    เครื่องมือสร้าง

    เครื่องมือสร้างควรมีชื่อของคลาสการแสดงภาพ และแสดงผลอินสแตนซ์ของคลาสนั้น 

    visualization_class_name(dom_element)
    dom_element
    ตัวชี้ไปยังองค์ประกอบ DOM ที่ควรฝังการแสดงภาพ

    ตัวอย่าง

    var org = new google.visualization.OrgChart(document.getElementById('org_div'));

    วาด()

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

    draw(data[, options])
    ข้อมูล
    DataTable หรือ DataView ที่เก็บข้อมูลไว้ใช้เพื่อวาดแผนภูมิ ไม่มีวิธีการมาตรฐานในการดึง DataTable จากแผนภูมิ
    ตัวเลือก
    [ไม่บังคับ] การแมปคู่ชื่อ/ค่าของตัวเลือกที่กำหนดเอง เช่น ความสูงและความกว้าง สีพื้นหลัง และคำบรรยายแทนเสียง เอกสารประกอบเกี่ยวกับการแสดงภาพควรแสดงตัวเลือกที่พร้อมใช้งาน และควรรองรับตัวเลือกเริ่มต้นหากคุณไม่ระบุพารามิเตอร์นี้ คุณใช้ไวยากรณ์ลิเทอรัลออบเจ็กต์ JavaScript เพื่อส่งในแมปตัวเลือกได้ เช่น {x:100, y:200, title:'An Example'}

    ตัวอย่าง

    chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

    getAction()

    ตัวเลือกนี้อาจเปิดเผยโดยการแสดงข้อมูลผ่านภาพที่มีเคล็ดลับเครื่องมือ และอนุญาตการดำเนินการกับเคล็ดลับเครื่องมือ

    แสดงออบเจ็กต์การดำเนินการของเคล็ดลับเครื่องมือที่มี actionID ที่ขอ

    ตัวอย่างเช่น

    // Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

    getSelection()

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

    selection_array getSelection()

    การคืนสินค้า

    selection_array อาร์เรย์ของออบเจ็กต์ที่เลือก โดยแต่ละรายการอธิบายองค์ประกอบข้อมูลในตารางที่สำคัญซึ่งใช้ในการสร้างการแสดงภาพ (DataView หรือ DataTable) แต่ละออบเจ็กต์มีพร็อพเพอร์ตี้ row และ/หรือ column โดยมีดัชนีของแถวและ/หรือคอลัมน์ของรายการที่เลือกใน DataTable ที่สำคัญ หากพร็อพเพอร์ตี้ row เป็นค่าว่าง การเลือกจะเป็นคอลัมน์ หากพร็อพเพอร์ตี้ column เป็นค่าว่าง การเลือกจะเป็นแถว หากทั้ง 2 รายการไม่ใช่ค่าว่าง จะถือว่าเป็นรายการข้อมูลที่เฉพาะเจาะจง คุณเรียกใช้เมธอด DataTable.getValue() เพื่อดูค่าของรายการที่เลือกได้ อาร์เรย์ที่ดึงมาส่งผ่านไปยัง setSelection() ได้

    ตัวอย่าง

    function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

    removeAction()

    ตัวเลือกนี้อาจเปิดเผยโดยการแสดงข้อมูลผ่านภาพที่มีเคล็ดลับเครื่องมือ และอนุญาตการดำเนินการกับเคล็ดลับเครื่องมือ

    นำออบเจ็กต์การดำเนินการของเคล็ดลับเครื่องมือที่มี actionID ที่ขอออกจากแผนภูมิ

    ตัวอย่างเช่น

    // Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

    setAction()

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

    ตั้งค่าการดำเนินการเคล็ดลับเครื่องมือที่จะทำงานเมื่อผู้ใช้คลิกที่ข้อความการดำเนินการ 

    setAction(action object)

    เมธอด setAction จะนำออบเจ็กต์เป็นพารามิเตอร์การดำเนินการ ออบเจ็กต์นี้ควรระบุพร็อพเพอร์ตี้ 3 รายการ ได้แก่ id ได้แก่ รหัสของการดำเนินการที่กำลังตั้ง text ข้อความที่ควรปรากฏในเคล็ดลับเครื่องมือสำหรับการทำงาน และ action คือฟังก์ชันที่ควรเรียกใช้เมื่อผู้ใช้คลิกที่ข้อความการดำเนินการ

    คุณควรตั้งค่าการดำเนินการเคล็ดลับเครื่องมือทั้งหมดก่อนที่จะเรียกใช้เมธอด draw() ของแผนภูมิ

    ตัวอย่างเช่น

    // Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

    เมธอด setAction จะกำหนดพร็อพเพอร์ตี้เพิ่มเติมอีก 2 รายการได้ด้วย ซึ่งได้แก่ visible และ enabled พร็อพเพอร์ตี้เหล่านี้ควรเป็นฟังก์ชันที่แสดงผลค่า boolean ที่ระบุว่าการดำเนินการของเคล็ดลับเครื่องมือจะปรากฏและ/หรือเปิดใช้หรือไม่

    ตัวอย่างเช่น

    // The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

    setSelection()

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

    ทุกครั้งที่มีการเรียกวิธีนี้ ระบบจะยกเลิกการเลือกรายการที่เลือกทั้งหมดและควรใช้รายการการเลือกใหม่ที่ส่งผ่าน คุณไม่สามารถยกเลิกการเลือกแต่ละรายการอย่างชัดเจน หากต้องการยกเลิกการเลือกแต่ละรายการ ให้เรียกใช้ setSelection() พร้อมรายการที่จะคงการเลือกต่อไป หากต้องการยกเลิกการเลือกองค์ประกอบทั้งหมด ให้เรียกใช้ setSelection(), setSelection(null) หรือsetSelection([]) 

    setSelection(selection_array)
    selection_array
    อาร์เรย์ของออบเจ็กต์ โดยแต่ละรายการมีพร็อพเพอร์ตี้แถวและ/หรือคอลัมน์ที่เป็นตัวเลข row และ column เป็นจำนวนแถวหรือคอลัมน์แบบ 0 ของรายการในตารางข้อมูลที่จะเลือก หากต้องการเลือกทั้งคอลัมน์ ให้ตั้งค่า row เป็นค่าว่าง หากต้องการเลือกทั้งแถว ให้ตั้งค่า column เป็น Null ตัวอย่าง: setSelection([{row:0,column:1},{row:1, column:null}]) เลือกเซลล์ที่ (0,1) และแถว 1 ทั้งแถว

    วิธีการแบบคงที่ต่างๆ

    ส่วนนี้ประกอบด้วยเมธอดที่มีประโยชน์ต่างๆ ซึ่งแสดงในเนมสเปซ google.visualization

    arrayToDataTable()

    เมธอดนี้จะใช้อาร์เรย์ 2 มิติ และแปลงเป็นตารางข้อมูล

    ระบบจะกำหนดประเภทข้อมูลคอลัมน์โดยอัตโนมัติจากข้อมูลที่ให้ไว้ คุณยังระบุประเภทข้อมูลคอลัมน์ได้โดยใช้รูปแบบสัญกรณ์ของออบเจ็กต์ในแถวแรก (แถวส่วนหัวคอลัมน์) ของอาร์เรย์ (เช่น {label: 'Start Date', type: 'date'}) คุณอาจใช้บทบาทข้อมูลที่ไม่บังคับได้เช่นกัน แต่ต้องมีการกำหนดอย่างชัดเจนโดยใช้รูปแบบสัญพจน์ของออบเจ็กต์ อาจใช้สัญลักษณ์ลิเทอรัลของออบเจ็กต์สำหรับเซลล์ใดก็ได้ ซึ่งจะช่วยให้คุณกำหนดออบเจ็กต์เซลล์ได้)

    ไวยากรณ์

    google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
    twoDArray
    อาร์เรย์ 2 มิติ ซึ่งแต่ละแถวแสดงแทนแถวในตารางข้อมูล หาก opt_firstRowIsData เป็นเท็จ (ค่าเริ่มต้น) ระบบจะตีความแถวแรกเป็นป้ายกำกับส่วนหัว ระบบจะตีความประเภทข้อมูลของแต่ละคอลัมน์โดยอัตโนมัติจากข้อมูลที่ให้ไว้ หากเซลล์ไม่มีค่า ให้ระบุค่า Null หรือค่าว่างตามความเหมาะสม
    opt_firstRowIsData
    ระบุว่าแถวแรกระบุแถวส่วนหัวหรือไม่ หากจริง ระบบจะถือว่าแถวทั้งหมดเป็นข้อมูล หากเป็นเท็จ ระบบจะถือว่าแถวแรกเป็นแถวส่วนหัวและระบุค่าเป็นป้ายกำกับคอลัมน์ ค่าเริ่มต้นคือ false

    การคืนสินค้า

    DataTable ใหม่

    ตัวอย่าง

    โค้ดต่อไปนี้แสดงวิธีการสร้างออบเจ็กต์ DataTable เดียวกัน 3 วิธี

    // Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

    drawChart()

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

    ไวยากรณ์

    google.visualization.drawChart(chart_JSON_or_object)
    chart_JSON_or_object
    สตริงลิเทอรัล JSON หรือออบเจ็กต์ JavaScript ที่มีพร็อพเพอร์ตี้ต่อไปนี้ (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
    พร็อพเพอร์ตี้ ประเภท จำเป็น ค่าเริ่มต้น คำอธิบาย
    chartType สตริง จำเป็น ไม่มี ชื่อคลาสของการแสดงภาพ ละเว้นชื่อแพ็กเกจ google.visualization สำหรับแผนภูมิของ Google ได้ หากยังไม่ได้โหลดไลบรารีการแสดงภาพที่เหมาะสม วิธีนี้จะโหลดไลบรารีให้คุณหากเป็นการแสดงภาพจาก Google คุณต้องโหลดการแสดงภาพข้อมูลของบุคคลที่สามอย่างชัดแจ้ง เช่น Table, PieChart, example.com.CrazyChart
    containerId สตริง จำเป็น ไม่มี รหัสขององค์ประกอบ DOM ในหน้าเว็บที่จะโฮสต์การแสดงภาพ
    ตัวเลือก ออบเจ็กต์ ไม่บังคับ ไม่มี ออบเจ็กต์ที่อธิบายตัวเลือกสำหรับการแสดงภาพ คุณจะใช้สัญกรณ์ลิเทอรัล JavaScript หรือระบุแฮนเดิลให้กับออบเจ็กต์ก็ได้ ตัวอย่าง: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
    dataTable ออบเจ็กต์ ไม่บังคับ ไม่มี DataTable ที่ใช้เพื่อสร้างการแสดงภาพ ซึ่งอาจเป็นการแสดงสตริง JSON ตามตัวอักษรของ DataTable ตามที่อธิบายไว้ด้านบน หรือแฮนเดิลของออบเจ็กต์ google.visualization.DataTable ที่มีการป้อนข้อมูล หรืออาร์เรย์ 2 มิติที่คล้ายกับที่ arrayToDataTable(opt_firstRowIsData=false) ยอมรับก็ได้ คุณต้องระบุพร็อพเพอร์ตี้นี้หรือพร็อพเพอร์ตี้ dataSourceUrl
    dataSourceUrl สตริง ไม่บังคับ ไม่มี การค้นหาแหล่งข้อมูลที่จะเติมข้อมูลในแผนภูมิ (เช่น สเปรดชีตของ Google) คุณต้องระบุพร็อพเพอร์ตี้นี้หรือพร็อพเพอร์ตี้ dataTable
    query สตริง ไม่บังคับ ไม่มี หากระบุ dataSourceUrl คุณจะเลือกระบุสตริงการค้นหาที่คล้าย SQL โดยใช้ภาษาการค้นหาของการแสดงภาพเพื่อกรองหรือจัดการข้อมูลได้
    refreshInterval ตัวเลข ไม่บังคับ ไม่มี ความถี่เป็นวินาทีที่การแสดงภาพควรรีเฟรชแหล่งที่มาของคำค้นหา ใช้เมื่อระบุ dataSourceUrl เท่านั้น
    การดู ออบเจ็กต์หรืออาร์เรย์ ไม่บังคับ ไม่มี ตั้งค่าออบเจ็กต์เริ่มต้น DataView ซึ่งทำหน้าที่เป็นตัวกรองสำหรับข้อมูลพื้นฐาน ตามที่กำหนดโดยพารามิเตอร์ dataTable หรือ dataSourceUrl คุณจะส่งในสตริงหรือออบเจ็กต์เริ่มต้น DataView ก็ได้ ตามที่ dataview.toJSON() แสดงผล ตัวอย่าง: "view": {"columns": [1, 2]} คุณยังส่งอาร์เรย์ของออบเจ็กต์เริ่มต้น DataView ได้ด้วย ซึ่งในกรณีนี้ DataView แรกในอาร์เรย์จะถูกนำไปใช้กับข้อมูลเบื้องหลังเพื่อสร้างตารางข้อมูลใหม่ และ DataView รายการที่ 2 จะใช้กับตารางข้อมูลที่เป็นผลมาจากการใช้ DataView แรก และอื่นๆ

    ตัวอย่าง

    สร้างแผนภูมิตารางตามแหล่งข้อมูลสเปรดชีต และรวมคำค้นหา SELECT A,D WHERE D > 100 ORDER BY D 

    <script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

    ตัวอย่างต่อไปนี้จะสร้างตารางเดียวกัน แต่สร้าง DataTable ในเครื่อง:

    <script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

    ตัวอย่างนี้ส่งผ่านการแสดงสตริง JSON ของแผนภูมิ ซึ่งอาจโหลดจากไฟล์ 

    <script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

    drawToolbar()

    นี่คือเครื่องมือสร้างสำหรับองค์ประกอบแถบเครื่องมือที่สามารถแนบไปกับการแสดงภาพได้หลายรายการ แถบเครื่องมือนี้ช่วยให้ผู้ใช้ส่งออกข้อมูลการแสดงภาพเป็นรูปแบบต่างๆ หรือให้เวอร์ชันแสดงภาพแบบฝังได้เพื่อใช้ในที่ต่างๆ ดูข้อมูลเพิ่มเติมและตัวอย่างโค้ดในหน้าแถบเครื่องมือ