หน้านี้จะแสดงออบเจ็กต์ที่ API การแสดงภาพของ Google แสดงให้เห็นและวิธีการมาตรฐานที่การแสดงภาพทั้งหมดแสดง
หมายเหตุ: เนมสเปซ GoogleVisual API คือ
google.visualization.*
หมายเหตุเกี่ยวกับอาร์เรย์
บางเบราว์เซอร์ไม่สามารถรองรับต่อท้ายต่อท้ายในอาร์เรย์ 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)
- เพิ่มประสิทธิภาพข้อมูล
-
[ไม่บังคับ] ข้อมูลที่ใช้เริ่มต้นตาราง ซึ่งอาจเป็น 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 Charts ไม่ได้ตรวจสอบตารางข้อมูล (หากแผนภูมิแผนภูมิแสดงช้าลง ) หากคุณระบุตัวเลขที่คอลัมน์คาดหวังสตริง หรือในทางกลับกัน Google Charts จะพยายามอย่างเต็มที่เพื่อตีความค่าในทางที่เหมาะสมแต่จะไม่แจ้งข้อผิดพลาด
ตัวอย่าง
ตัวอย่างต่อไปนี้สาธิตการสร้างและป้อนข้อมูล 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
ได้โดยเรียกใช้เครื่องมือสร้างโดยไม่มีพารามิเตอร์ แล้วเพิ่มค่าโดยเรียกใช้เมธอด addColumn()
/addRows()
ที่แสดงด้านล่าง หรือส่งผ่านออบเจ็กต์ลิฟต์ของ JavaScript ที่มีการป้อนข้อมูลเพื่อเริ่มต้นใช้งาน เราได้อธิบายทั้งสองวิธีไว้ด้านล่างนี้ ข้อใดคือสิ่งที่คุณควรใช้
-
การสร้างและป้อนข้อมูลตารางใน JavaScript ด้วยการเรียกใช้
addColumn()
,addRow()
และaddRows()
เป็นโค้ดที่อ่านได้ง่าย วิธีนี้มีประโยชน์เมื่อคุณจะป้อนรหัสด้วยตนเอง ช้ากว่าการใช้สัญชาตญาณออบเจ็กต์ (ตามที่อธิบายถัดไป) แต่ในตารางขนาดเล็ก (เช่น 1,000 เซลล์) คุณอาจสังเกตเห็นความแตกต่างไม่มากนัก -
การประกาศออบเจ็กต์
DataTable
โดยตรงโดยใช้สัญพจน์ตามตัวอักษรจะเร็วกว่ามากในตารางขนาดใหญ่ อย่างไรก็ตาม การใช้ไวยากรณ์อาจเป็นเรื่องยุ่งยาก ใช้ตัวเลือกนี้หากคุณสร้างไวยากรณ์ตามจริงของออบเจ็กต์ในโค้ดซึ่งช่วยลดโอกาสที่จะเกิดข้อผิดพลาด
วิธีการ
วิธีการ | มูลค่าการแสดงผล | คำอธิบาย |
---|---|---|
หรือ
|
ตัวเลข |
เพิ่มคอลัมน์ใหม่ในตารางข้อมูล และส่งคืนดัชนีของคอลัมน์ใหม่ ทุกเซลล์ของคอลัมน์ใหม่มีค่า ลายเซ็นแรกจะมีพารามิเตอร์ต่อไปนี้
ลายเซ็นที่ 2 มีพารามิเตอร์ออบเจ็กต์เดียวที่มีสมาชิกต่อไปนี้
ดูเพิ่มเติม: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole |
addRow(opt_cellArray) |
ตัวเลข |
เพิ่มแถวใหม่ในตารางข้อมูล และส่งคืนดัชนีของแถวใหม่
ตัวอย่างเช่น 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) |
ตัวเลข |
เพิ่มแถวใหม่ในตารางข้อมูล และแสดงผลดัชนีของแถวที่เพิ่มล่าสุด คุณสามารถเรียกใช้เมธอดนี้เพื่อสร้างแถวว่างใหม่ หรือข้อมูลที่ใช้เพื่อป้อนข้อมูลแถวได้ตามที่อธิบายไว้ด้านล่าง
ตัวอย่างเช่น 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() |
ตารางข้อมูล | แสดงผลโคลนของตารางข้อมูล ผลลัพธ์ที่ได้คือสําเนาข้อมูลในตารางเชิงลึก ยกเว้นพร็อพเพอร์ตี้เซลล์ พร็อพเพอร์ตี้แถว พร็อพเพอร์ตี้ตาราง และพร็อพเพอร์ตี้คอลัมน์ ซึ่งเป็นสําเนาที่มีเนื้อหาน้อย ซึ่งหมายความว่าระบบจะคัดลอกพร็อพเพอร์ตี้ที่ไม่ใช่พื้นฐานโดยใช้การอ้างอิง แต่พร็อพเพอร์ตี้พื้นฐานจะได้รับการคัดลอกตามค่า |
getColumnId(columnIndex) |
สตริง |
แสดงผลตัวระบุของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์ในตารางที่สําคัญ สําหรับตารางข้อมูลที่ดึงโดยคําค้นหา ตัวระบุคอลัมน์จะกําหนดโดยแหล่งข้อมูล และสามารถใช้เพื่ออ้างอิงคอลัมน์เมื่อใช้ภาษาในการค้นหา ดูเพิ่มเติม: Query.setQuery |
getColumnIndex(columnIdentifier) |
สตริง, ตัวเลข |
แสดงผลดัชนีของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์ รหัส หรือป้ายกํากับหากมีอยู่ในตารางนี้ ไม่เช่นนั้น -1 เมื่อ columnIdentifier เป็นสตริง ระบบจะใช้คอลัมน์เพื่อหารหัสก่อน ตามด้วยป้ายกํากับดูเพิ่มเติม: getColumnId, getColumnLabel |
getColumnLabel(columnIndex) |
สตริง |
แสดงป้ายกํากับของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์ในตารางที่สําคัญ
โดยทั่วไปป้ายกํากับคอลัมน์จะแสดงเป็นส่วนหนึ่งของการแสดงภาพ เช่น ป้ายกํากับคอลัมน์อาจแสดงเป็นส่วนหัวของตารางในตาราง หรือเป็นป้ายกํากับคําอธิบายในแผนภูมิวงกลม สําหรับตารางข้อมูลที่ดึงโดยคําค้นหา ป้ายกํากับคอลัมน์จะกําหนดโดยแหล่งข้อมูล หรือตามวรรค label ของภาษาของคําค้นหา ดูเพิ่มเติม: setColumnLabel |
getColumnPattern(columnIndex) |
สตริง |
แสดงผลรูปแบบการจัดรูปแบบที่ใช้จัดรูปแบบค่าของคอลัมน์ที่ระบุ
สําหรับตารางข้อมูลที่ดึงโดยคําค้นหา รูปแบบคอลัมน์จะกําหนดโดยแหล่งข้อมูล หรือตามวลี |
getColumnProperties(columnIndex)
|
วัตถุ |
แสดงแผนที่ของพร็อพเพอร์ตี้ทั้งหมดสําหรับคอลัมน์ที่ระบุ โปรดทราบว่าออบเจ็กต์พร็อพเพอร์ตี้จะแสดงผลโดยการอ้างอิง ดังนั้นการเปลี่ยนแปลงค่าในออบเจ็กต์ที่ดึงมาจะเปลี่ยนแปลงใน
|
getColumnProperty(columnIndex, name)
|
อัตโนมัติ |
แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ
ดูเพิ่มเติม: setColumnProperty setColumnProperties |
getColumnRange(columnIndex) |
วัตถุ |
แสดงผลค่าขั้นต่ําและต่ําสุดของค่าในคอลัมน์ที่ระบุ ออบเจ็กต์ที่แสดงผลมีพร็อพเพอร์ตี้
|
getColumnRole(columnIndex) |
สตริง | แสดงบทบาทของคอลัมน์ที่ระบุ |
getColumnType(columnIndex) |
สตริง |
แสดงผลประเภทของคอลัมน์ที่ระบุโดยดัชนีคอลัมน์
ประเภทคอลัมน์ที่แสดงผลอาจเป็นประเภทใดประเภทหนึ่งต่อไปนี้ |
getDistinctValues(columnIndex) |
อาร์เรย์ของออบเจ็กต์ |
แสดงผลค่าที่ไม่ซ้ํากันในคอลัมน์ใดคอลัมน์หนึ่งตามลําดับจากน้อยไปมาก
ประเภทออบเจ็กต์ที่แสดงผลเหมือนกับเมธอดที่ |
getFilteredRows(filters) |
อาร์เรย์ของออบเจ็กต์ |
แสดงผลดัชนีแถวสําหรับแถวที่ตรงกับตัวกรองทั้งหมดที่ระบุ ระบบจะแสดงผลดัชนีตามลําดับจากน้อยไปมาก เอาต์พุตของวิธีการนี้สามารถใช้เป็นอินพุตของ
พร็อพเพอร์ตี้ที่ไม่บังคับอีกรายการคือ
ตัวอย่าง: |
getFormattedValue(rowIndex, columnIndex)
|
สตริง |
แสดงผลค่าที่จัดรูปแบบของเซลล์ที่ดัชนีแถวและคอลัมน์ที่ระบุ
ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าของคอลัมน์การจัดรูปแบบได้ที่ข้อมูลอ้างอิงภาษาในการค้นหา ดูเพิ่มเติม: setformattedValue |
getNumberOfColumns() |
ตัวเลข | แสดงผลจํานวนคอลัมน์ในตาราง |
getNumberOfRows() |
ตัวเลข | แสดงผลจํานวนแถวในตาราง |
getProperties(rowIndex, columnIndex)
|
วัตถุ |
แสดงแผนที่ของพร็อพเพอร์ตี้ทั้งหมดสําหรับเซลล์ที่ระบุ โปรดทราบว่าออบเจ็กต์พร็อพเพอร์ตี้จะแสดงผลโดยการอ้างอิง ดังนั้นการเปลี่ยนแปลงค่าในออบเจ็กต์ที่ดึงมาจะเปลี่ยนแปลงใน
|
getProperty(rowIndex, columnIndex, name)
|
อัตโนมัติ |
แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ
ดูเพิ่มเติม: setCell setProperties setProperty |
getRowProperties(rowIndex)
|
วัตถุ |
แสดงแผนที่ของพร็อพเพอร์ตี้ทั้งหมดสําหรับแถวที่ระบุ โปรดทราบว่าออบเจ็กต์พร็อพเพอร์ตี้จะแสดงผลโดยการอ้างอิง ดังนั้นการเปลี่ยนแปลงค่าในออบเจ็กต์ที่ดึงมาจะเปลี่ยนแปลงใน
|
getRowProperty(rowIndex, name)
|
อัตโนมัติ |
แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ
ดูเพิ่มเติม: setRowProperty setRowProperties |
getSortedRows(sortColumns) |
อาร์เรย์ของตัวเลข |
แสดงผลตารางเวอร์ชันที่จัดเรียงโดยไม่แก้ไขลําดับของข้อมูลที่สําคัญ
หากต้องการจัดเรียงข้อมูลพื้นฐานอย่างถาวร โปรดเรียกใช้
ค่าที่แสดงผลคืออาร์เรย์ของตัวเลข โดยแต่ละหมายเลขจะเป็นดัชนีแถว
โปรดทราบว่าการรับประกันการจัดเรียงจะเสถียร ซึ่งหมายความว่าหากคุณจัดเรียงค่า 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) |
อัตโนมัติ |
แสดงผลค่าของพร็อพเพอร์ตี้ที่มีชื่อ หรือ
ดูเพิ่มเติม: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
วัตถุ |
แสดงผลค่าของเซลล์ที่ดัชนีแถวและคอลัมน์ที่ระบุ
ประเภทของค่าที่แสดงผลจะขึ้นอยู่กับประเภทคอลัมน์ (ดู getColumnType) ดังนี้
|
insertColumn(columnIndex, type [,label [,id]])
|
ไม่มี |
แทรกคอลัมน์ใหม่ลงในตารางข้อมูลที่ดัชนีข้อมูลจําเพาะ คอลัมน์ที่มีอยู่ทั้งหมดในหรือหลังจากดัชนีที่ระบุจะเปลี่ยนไปเป็นดัชนีที่สูงกว่า
ดูเพิ่มเติม: addColumn |
insertRows(rowIndex, numberOrArray) |
ไม่มี |
แทรกจํานวนแถวที่ระบุที่ดัชนีแถวที่ระบุ
ดูเพิ่มเติม: addRows |
removeColumn(columnIndex) |
ไม่มี |
นําคอลัมน์ที่ดัชนีที่ระบุออก
ดูเพิ่มเติม: removeColumn |
removeColumns(columnIndex, numberOfColumns)
|
ไม่มี |
นําจํานวนคอลัมน์ที่ระบุออกจากคอลัมน์ที่ดัชนีที่ระบุ
ดูเพิ่มเติม: removeColumn |
removeRow(rowIndex) |
ไม่มี |
นําแถวที่ดัชนีที่ระบุออก
โปรดดูหัวข้อนําแถวออก |
removeRows(rowIndex, numberOfRows) |
ไม่มี |
นําจํานวนแถวที่ระบุออกจากแถวที่ดัชนีที่ระบุ
ดูเพิ่มเติม: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
ไม่มี |
ตั้งค่า ค่าที่จัดรูปแบบ และ/หรือพร็อพเพอร์ตี้ของเซลล์
ดูเพิ่มเติมที่ setValue(), setFormattedValue(), setProperty(), setProperties() |
setColumnLabel(columnIndex, label)
|
ไม่มี |
ตั้งค่าป้ายกํากับของคอลัมน์
ดูเพิ่มเติม: getColumnLabel |
setColumnProperty(columnIndex, name, value)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้คอลัมน์เดียว การแสดงภาพบางส่วนรองรับแถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติมที่setColumnProperties getColumnProperty |
setColumnProperties(columnIndex, properties)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้คอลัมน์หลายรายการ การแสดงภาพบางส่วนรองรับแถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
ไม่มี |
ตั้งค่าค่าที่จัดรูปแบบของเซลล์
ดูเพิ่มเติม: getFormattedValue |
setProperty(rowIndex, columnIndex, name, value)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้ของเซลล์ การแสดงภาพบางส่วนรองรับแถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setCell setProperties getProperty |
setProperties(rowIndex, columnIndex, properties)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้ของเซลล์หลายรายการ การแสดงภาพบางส่วนรองรับแถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setCell setProperty getProperty |
setRowProperty(rowIndex, name, value)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้ของแถว การแสดงภาพบางส่วนรองรับแถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setRowProperties getRowProperty |
setRowProperties(rowIndex, properties)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้แถวหลายรายการ การแสดงภาพบางส่วนรองรับแถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setRowProperty getRowProperty |
setTableProperty(name, value)
|
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้ตารางเดียว การแสดงภาพบางส่วนรองรับตาราง แถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setTableProperties getTableProperty |
setTableProperties(properties) |
ไม่มี |
ตั้งค่าพร็อพเพอร์ตี้ตารางหลายรายการ การแสดงภาพบางส่วนรองรับตาราง แถว คอลัมน์ หรือพร็อพเพอร์ตี้เซลล์เพื่อแก้ไขการแสดงผลหรือพฤติกรรม โปรดดูเอกสารประกอบของการแสดงภาพเพื่อดูพร็อพเพอร์ตี้ที่รองรับ
ดูเพิ่มเติม: setTableProperty getTableProperty |
setValue(rowIndex, columnIndex, value) |
ไม่มี |
กําหนดค่าของเซลล์ นอกเหนือจากการเขียนทับค่าเซลล์ที่มีอยู่แล้ว เมธอดนี้จะล้างค่าและพร็อพเพอร์ตี้ที่มีการจัดรูปแบบสําหรับเซลล์ด้วย
นอกจากนี้ โปรดดู 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)"}]} ] } |
รูปแบบพารามิเตอร์ data ของ JavaScript เครื่องมือสร้าง
คุณเริ่มต้น DataTable
ได้โดยส่งออบเจ็กต์สัญพจน์ของสตริง JavaScript ไปยังพารามิเตอร์ data เราจะเรียกออบเจ็กต์นี้ว่า data คุณเขียนโค้ดออบเจ็กต์นี้เองได้ตามคําอธิบายด้านล่าง หรือจะใช้ไลบรารี 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: ซึ่งอธิบายภายหลัง)-
"บูลีน" - ค่าบูลีน JavaScript ("true" หรือ "false") ค่าตัวอย่าง:
v:'true'
-
"number" - ค่าตัวเลข JavaScript ค่าตัวอย่าง:
v:7
,v:3.14
,v:-55
- "string" - ค่าสตริง JavaScript ค่าตัวอย่าง:
v:'hello'
-
"date" - ออบเจ็กต์วันที่ของ JavaScript (เดือนตาม 0) ที่มีการตัดเวลา ค่าตัวอย่าง:
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]
-
"บูลีน" - ค่าบูลีน JavaScript ("true" หรือ "false") ค่าตัวอย่าง:
-
id
[ไม่บังคับ] รหัสสตริงของคอลัมน์ ต้องไม่ซ้ํากันในตาราง ใช้อักขระที่เป็นตัวอักษรและตัวเลขคละกันพื้นฐาน เพื่อให้หน้าโฮสต์ไม่จําเป็นต้องมีการยกเว้นสําหรับเข้าถึงคอลัมน์ใน JavaScript โปรดระวังอย่าเลือกคีย์เวิร์ด JavaScript ตัวอย่าง:id:'col_1'
-
label
[ไม่บังคับ] ค่าสตริงที่การแสดงภาพบางส่วนแสดงสําหรับคอลัมน์นี้ เช่น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
มีอาร์เรย์ของออบเจ็กต์แถว
ออบเจ็กต์แถวแต่ละรายการมีพร็อพเพอร์ตี้ที่จําเป็น 1 รายการชื่อ c
ซึ่งเป็นอาร์เรย์ของเซลล์ในแถวนั้น และยังมีพร็อพเพอร์ตี้ p
ที่ไม่บังคับซึ่งจะกําหนดแผนที่ของค่าที่กําหนดเองที่กําหนดเองเพื่อกําหนดให้กับทั้งแถว หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับแถว ก็จะอธิบายด้วย มิเช่นนั้นระบบจะไม่สนใจพร็อพเพอร์ตี้นี้
แต่ละเซลล์ในตารางจะอธิบายโดยออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้
-
v
[ไม่บังคับ] ค่าเซลล์ ประเภทข้อมูลควรตรงกับประเภทข้อมูลของคอลัมน์ หากเซลล์เป็น Null พร็อพเพอร์ตี้v
จะเป็น Null แต่ยังคงมีพร็อพเพอร์ตี้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
เว้นว่างไว้สําหรับเซลล์ในอาร์เรย์ หรือไม่ละเว้นสมาชิกในอาร์เรย์ก็ได้ ดังนั้นหากต้องการระบุแถวที่เป็นค่าว่างสําหรับ 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...()
ที่เหมาะสม
โปรดดูข้อมูลเพิ่มเติม
setColumn(), hideColumn(), 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)
|
ตัวเลข |
แสดงผลดัชนีในตารางที่สําคัญ (หรือมุมมอง) ของคอลัมน์ที่ระบุโดยดัชนีภายในมุมมองนี้
เช่น หากเคยเรียกใช้ |
getTableRowIndex(viewRowIndex) |
ตัวเลข |
แสดงผลดัชนีในตารางพื้นฐาน (หรือมุมมอง) ของแถวที่ระบุโดยดัชนีของมุมมองนี้
เช่น หากเคยเรียกใช้ |
getViewColumnIndex(tableColumnIndex)
|
ตัวเลข |
แสดงผลดัชนีในมุมมองนี้ที่แมปกับคอลัมน์ที่ระบุโดยดัชนีที่ระบุไว้ในตารางที่สําคัญ (หรือมุมมอง) หากมีดัชนีดังกล่าวมากกว่า 1 รายการ ให้แสดงดัชนีแรก (เล็กที่สุด) หากไม่มีดัชนีดังกล่าว (คอลัมน์ที่ระบุไม่อยู่ในมุมมอง) จะแสดง -1
เช่น หากเคยเรียกใช้ |
getViewColumns() |
อาร์เรย์ของตัวเลข |
แสดงผลคอลัมน์ในมุมมองนี้ตามลําดับ กล่าวคือ หากคุณเรียก |
getViewRowIndex(tableRowIndex) |
ตัวเลข |
แสดงผลดัชนีในมุมมองนี้ที่แมปกับแถวที่ระบุซึ่งดัชนีระบุไว้ในตารางที่สําคัญ (หรือมุมมอง) หากมีดัชนีดังกล่าวมากกว่า 1 รายการ ให้แสดงดัชนีแรก (เล็กที่สุด) หากไม่มีดัชนีดังกล่าว (แถวที่ระบุไม่ได้อยู่ในมุมมอง) จะแสดงผล -1
เช่น หากเคยเรียกใช้ |
getViewRows() |
อาร์เรย์ของตัวเลข |
แสดงแถวในมุมมองนี้ตามลําดับ กล่าวคือ หากคุณเรียก |
hideColumns(columnIndexes) |
ไม่มี |
ซ่อนคอลัมน์ที่ระบุจากมุมมองปัจจุบัน
ตัวอย่าง: หากคุณมีตารางที่มี 10 คอลัมน์ แล้วคุณเรียกใช้ |
hideRows(min, max) |
ไม่มี |
ซ่อนแถวทั้งหมดที่มีดัชนีที่อยู่ระหว่างขั้นต่ําและสูงสุด (รวม) จากมุมมองปัจจุบัน
นี่คือไวยากรณ์อํานวยความสะดวกสําหรับ |
hideRows(rowIndexes) |
ไม่มี |
ซ่อนแถวที่ระบุจากมุมมองปัจจุบัน
ตัวอย่าง: หากคุณมีตารางที่มี 10 แถว แล้วคุณเรียก |
setColumns(columnIndexes) |
ไม่มี |
ระบุคอลัมน์ที่จะแสดงในมุมมองนี้ ระบบจะซ่อนคอลัมน์ที่ไม่ได้ระบุไว้ เมตริกนี้คืออาร์เรย์ของดัชนีคอลัมน์ในตาราง/มุมมองที่สําคัญ หรือคอลัมน์ที่คํานวณ หากไม่ได้เรียกวิธีนี้ ค่าเริ่มต้นคือแสดงคอลัมน์ทั้งหมด นอกจากนี้ อาร์เรย์ยังอาจมีรายการที่ซ้ํากันเพื่อแสดงคอลัมน์เดียวกันหลายครั้ง คอลัมน์จะแสดงตามลําดับ ที่ระบุ
ตัวอย่าง // 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) |
ไม่มี |
ตั้งค่าแถวที่เห็นในมุมมองนี้ โดยอิงจากหมายเลขดัชนีจากตาราง/มุมมองที่สําคัญ
ตัวอย่าง: หากต้องการสร้างมุมมองที่มีแถว 3 และ 0 ของตาราง/มุมมองที่สําคัญ |
toDataTable() |
ตารางข้อมูล |
แสดงผลออบเจ็กต์ DataTable ที่มีแถวและคอลัมน์ที่มองเห็นได้ของ DataView
|
toJSON() |
สตริง |
แสดงผลการนําเสนอสตริงของ DataView นี้ สตริงนี้ไม่มีข้อมูลจริง แต่มีเพียงการตั้งค่าเฉพาะของ DataView เช่น แถวและคอลัมน์ที่มองเห็นได้ คุณจะจัดเก็บสตริงนี้และส่งไปยังเครื่องมือสร้าง DataView.fromJSON() แบบคงที่เพื่อสร้างมุมมองนี้อีกครั้งได้ แต่จะไม่รวมคอลัมน์ที่สร้าง
|
คลาส Wrapper ของแผนภูมิ
คลาส ChartWrapper
ใช้ในการรวมแผนภูมิและจัดการการค้นหาการโหลด ภาพวาด และแหล่งข้อมูลทั้งหมดสําหรับแผนภูมิของคุณ ชั้นเรียนจะแสดงวิธีการที่สะดวกในการตั้งค่าสําหรับค่าและวาดแผนภูมิ คลาสนี้ลดความซับซ้อนในการอ่านจากแหล่งข้อมูล เนื่องจากคุณไม่จําเป็นต้องสร้างเครื่องจัดการการเรียกกลับการค้นหา และยังใช้บันทึกแผนภูมิเพื่อนํามาใช้ซ้ําได้อย่างง่ายดายอีกด้วย
ประโยชน์อีกอย่างของการใช้ 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... ที่ออบเจ็กต์นี้แสดง
วิธีการ
ส่วนแผนภูมิจะแสดงข้อมูลเพิ่มเติมต่อไปนี้
วิธีการ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|
draw(opt_container_ref) |
ไม่มี |
วาดแผนภูมิ คุณต้องเรียกใช้เมธอดนี้หลังการเปลี่ยนแปลงที่ทําในแผนภูมิหรือข้อมูลเพื่อแสดงการเปลี่ยนแปลง
|
toJSON() |
สตริง | แสดงผลเวอร์ชัน JSON ของการนําเสนอ JSON ของแผนภูมิ |
clone() |
Wrapper ของแผนภูมิ | แสดงผลสําเนาของ Wrapper ของแผนภูมิ |
getDataSourceUrl() |
สตริง | หากแผนภูมินี้รับข้อมูลจากแหล่งข้อมูล จะแสดงผล URL ของแหล่งข้อมูลนี้ ไม่เช่นนั้นจะแสดงผลค่า Null |
getDataTable() |
google.visualization.DataTable |
หากแผนภูมินี้รับข้อมูลจาก
การเปลี่ยนแปลงที่คุณทํากับออบเจ็กต์ที่แสดงผลจะแสดงโดยแผนภูมิในครั้งถัดไปที่คุณเรียกใช้ |
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) |
ประเภทใดก็ได้ |
แสดงผลค่าตัวเลือกแผนภูมิที่ระบุ
|
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) |
ไม่มี |
กําหนดค่าตัวเลือกแผนภูมิเดียว โดยที่คีย์คือชื่อตัวเลือกและค่าคือค่า หากต้องการยกเลิกการตั้งค่า ให้ส่งค่า Null เป็นค่าว่าง โปรดทราบว่า key อาจเป็นชื่อที่ตรงตามเกณฑ์ เช่น 'vAxis.title'
|
setOptions(options_obj) |
ไม่มี | ตั้งค่าออบเจ็กต์ตัวเลือกที่สมบูรณ์สําหรับแผนภูมิ |
setView(view_spec) |
ไม่มี |
ตั้งค่าออบเจ็กต์เริ่มต้น DataView ที่ทําหน้าที่เป็นตัวกรองของข้อมูลที่สําคัญ Wrapper ของแผนภูมิต้องมีข้อมูลพื้นฐานจากตารางข้อมูลหรือแหล่งข้อมูลที่จะใช้มุมมองนี้ คุณส่งผ่านในสตริงหรือออบเจ็กต์เริ่มต้น DataView ก็ได้ เช่น ออบเจ็กต์ที่ dataview.toJSON() แสดงผล คุณยังส่งผ่านไปยังอาร์เรย์ของออบเจ็กต์เริ่มต้น DataView ได้ด้วย โดยในกรณีนี้จะใช้ DataView แรกในอาร์เรย์กับข้อมูลที่สําคัญเพื่อสร้างตารางข้อมูลใหม่ และใช้ DataView รายการที่ 2 กับตารางข้อมูลซึ่งมาจากการใช้ DataView แรก และอื่นๆ
|
กิจกรรม
ออบเจ็กต์ ChartWrapper ส่งเหตุการณ์ต่อไปนี้ โปรดทราบว่าคุณต้องเรียกใช้ ChartWrapper.draw()
ก่อนที่กิจกรรมใดๆ จะถูกทิ้ง
ชื่อ | คำอธิบาย | พร็อพเพอร์ตี้ |
---|---|---|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ | รหัส, ข้อความ |
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น
|
ไม่มี |
select |
เริ่มทํางานเมื่อผู้ใช้คลิกแถบหรือคําอธิบาย เมื่อเลือกองค์ประกอบแผนภูมิแล้ว ระบบจะเลือกเซลล์ที่เกี่ยวข้องในตารางข้อมูล เมื่อเลือกคอลัมน์ ระบบจะเลือกคอลัมน์ที่เกี่ยวข้องในตารางข้อมูล หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา
ChartWrapper.getChart().
getSelection() โปรดทราบว่าการดําเนินการนี้จะส่งเฉพาะเมื่อประเภทแผนภูมิที่สําคัญส่งเหตุการณ์การเลือกเท่านั้น
|
ไม่มี |
ตัวอย่าง
ข้อมูลโค้ด 2 รายการต่อไปนี้สร้างแผนภูมิเส้นที่เทียบเท่า ตัวอย่างแรกใช้สัญกรณ์ 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
-
โหลดแพ็กเกจ
charteditor
ในgoogle.charts.load()
ให้โหลดแพ็กเกจ "chatEditor" คุณไม่จําเป็นต้องโหลดแพ็กเกจของประเภทแผนภูมิที่จะแสดงในเครื่องมือแก้ไข เครื่องมือแก้ไขแผนภูมิจะโหลดแพ็กเกจทั้งหมดตามต้องการ -
สร้างออบเจ็กต์
ChartWrapper
ที่กําหนดแผนภูมิเพื่อให้ผู้ใช้ปรับแต่ง แผนภูมินี้จะปรากฏในกล่องโต้ตอบ และผู้ใช้ใช้ตัวแก้ไขเพื่อออกแบบแผนภูมิใหม่ เปลี่ยนประเภทแผนภูมิ หรือแม้แต่เปลี่ยนแหล่งข้อมูล -
สร้างอินสแตนซ์ ChartEditor ใหม่ และลงทะเบียนเพื่อรอรับเหตุการณ์ "ok" เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้คลิกปุ่ม "ตกลง" ในกล่องโต้ตอบ เมื่อได้รับคําสั่ง คุณควรเรียก
ChartEditor.getChartWrapper()
เพื่อดึงข้อมูลแผนภูมิที่แก้ไขโดยผู้ใช้ -
โทรหา
ChartEditor.openDialog()
, ผ่านในChartWrapper
ซึ่งจะเปิดกล่องโต้ตอบขึ้นมา ปุ่มกล่องโต้ตอบจะช่วยให้ผู้ใช้ปิดเครื่องมือแก้ไขได้ อินสแตนซ์ChartEditor
จะใช้งานได้ตราบใดที่อยู่ในขอบเขต จะไม่มีการทําลายโดยอัตโนมัติหลังจากที่ผู้ใช้ปิดกล่องโต้ตอบ - หากต้องการอัปเดตแผนภูมิในโค้ด ให้เรียกใช้
setChartWrapper()
วิธีการ
วิธีการ | มูลค่าการแสดงผล | คำอธิบาย |
---|---|---|
openDialog(chartWrapper, opt_options) |
null |
เปิดเครื่องมือแก้ไขแผนภูมิเป็นกล่องโต้ตอบที่ฝังในหน้าเว็บ ฟังก์ชันจะแสดงผลทันที โดยไม่รอให้ระบบปิดกล่องโต้ตอบ หากไม่สูญเสียขอบเขตของอินสแตนซ์ คุณสามารถเรียกใช้
|
getChartWrapper() |
ChartWrapper |
แสดงผล ChartWrapper ที่แสดงถึงแผนภูมิโดยการแก้ไขผู้ใช้ |
setChartWrapper(chartWrapper) |
null |
ใช้วิธีการนี้เพื่ออัปเดตแผนภูมิที่แสดงผลในเครื่องมือแก้ไข
billingWrapper - ออบเจ็กต์ |
closeDialog() |
null | ปิดกล่องโต้ตอบเครื่องมือแก้ไขแผนภูมิ |
ตัวเลือก
เครื่องมือแก้ไขแผนภูมิรองรับตัวเลือกต่อไปนี้
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
dataSourceInput |
แฮนเดิลองค์ประกอบหรือ "urlbox" | null |
ใช้ฟีเจอร์นี้เพื่อให้ผู้ใช้ระบุแหล่งข้อมูลสําหรับแผนภูมิได้ พร็อพเพอร์ตี้นี้อาจมีค่าใดค่าหนึ่งใน 2 ค่า ได้แก่
|
กิจกรรม
เครื่องมือแก้ไขแผนภูมิทําให้เกิดเหตุการณ์ต่อไปนี้
ชื่อ | คำอธิบาย | พร็อพเพอร์ตี้ |
---|---|---|
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 คอลัมน์ |
กลุ่ม()
นําออบเจ็กต์ DataTable
ที่มีการป้อนข้อมูลมาใช้และดําเนินการ GROUP BY ที่คล้ายกับ SQL โดยแสดงผลตารางที่มีแถวซึ่งจัดกลุ่มตามค่าคอลัมน์ที่ระบุ โปรดทราบว่านี่ไม่ได้แก้ไขอินพุต DataTable
ตารางที่แสดงผลจะมี 1 แถวสําหรับชุดค่าผสมแต่ละค่าในคอลัมน์คีย์ที่ระบุ แต่ละแถวประกอบด้วยคอลัมน์คีย์ และอีก 1 คอลัมน์ที่มีค่าคอลัมน์รวมเหนือทุกแถวที่ตรงกับชุดค่าผสมของคีย์ (เช่น ผลรวมหรือจํานวนค่าทั้งหมดในคอลัมน์ที่ระบุ)
เนมสเปซ google.visualization.data
มีค่าการรวมที่มีประโยชน์หลายค่า (เช่น sum และ count) แต่คุณจะกําหนดค่าของคุณเองได้ (เช่น standardDeviation หรือ secondsHighest) คุณจะได้รับวิธีการกําหนดผู้รวบรวมข้อมูลของตนเองหลังจากคําอธิบายวิธีการ
ไวยากรณ์
google.visualization.data.group(data_table, keys, columns)
- ตารางข้อมูล
-
อินพุต
DataTable
แต่จะไม่แก้ไขโดยโทรหาgroup()
- คีย์
-
อาร์เรย์ของจํานวนและ/หรือออบเจ็กต์ที่ระบุคอลัมน์ที่จะจัดกลุ่ม ตารางผลลัพธ์จะรวมทุกคอลัมน์ในอาร์เรย์นี้ รวมถึงทุกคอลัมน์ในคอลัมน์ หากค่าใดเป็นตัวเลข แสดงว่านี่เป็นดัชนีคอลัมน์ของอินพุต
DataTable
ที่จะจัดกลุ่มตาม หากออบเจ็กต์มีออบเจ็กต์ที่แก้ไขคอลัมน์ที่ระบุได้ (เช่น เพิ่ม 1 ให้กับค่าในคอลัมน์นั้น) ออบเจ็กต์ต้องมีพร็อพเพอร์ตี้ต่อไปนี้- column - ตัวเลขที่เป็นดัชนีคอลัมน์จาก dt ที่จะใช้การเปลี่ยนรูปแบบ
- modifier - ฟังก์ชันที่ยอมรับค่าเดียว (ค่าเซลล์ในคอลัมน์นั้นสําหรับแต่ละแถว) และแสดงผลค่าที่แก้ไขแล้ว ฟังก์ชันนี้ใช้เพื่อแก้ไขค่าของคอลัมน์เพื่อช่วยในการจัดกลุ่ม เช่น โดยการเรียกฟังก์ชันฟังก์ชันQuarter ที่คํานวณคอลัมน์จากคอลัมน์วันที่ เพื่อให้ API จัดกลุ่มแถวตามไตรมาสได้ ค่าที่คํานวณแล้วจะแสดงในคอลัมน์คีย์ในตารางที่แสดงผล ฟังก์ชันนี้อาจประกาศในบรรทัดภายในออบเจ็กต์นี้ หรืออาจเป็นฟังก์ชันที่คุณกําหนดที่อื่นในโค้ด (ฟังก์ชันต้องอยู่ในขอบเขตการโทร) API มีฟังก์ชันตัวแก้ไขแบบง่าย 1 ฟังก์ชัน ดูวิธีการสร้างฟังก์ชันที่มีประโยชน์และเป็นประโยชน์มากขึ้น คุณต้องทราบประเภทข้อมูลที่ฟังก์ชันนี้ยอมรับได้ และเรียกสําหรับประเภทคอลัมน์ประเภทดังกล่าวเท่านั้น และต้องทราบประเภทการแสดงผลของฟังก์ชันนี้ด้วย และประกาศในพร็อพเพอร์ตี้ประเภทตามที่อธิบายไว้ถัดไป
- type - ประเภทที่แสดงผลโดยตัวแก้ไขฟังก์ชัน ซึ่งควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "บูลีน"
-
label - [ไม่บังคับ] ป้ายกํากับสตริงที่จะกําหนดคอลัมน์นี้ใน
DataTable
ที่แสดงผล -
id - [ไม่บังคับ] รหัสสตริงเพื่อกําหนดคอลัมน์นี้ใน
DataTable
ที่แสดงผล
ตัวอย่าง:[0]
,[0,2]
,[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
- คอลัมน์
-
[ไม่บังคับ] ช่วยให้คุณระบุคอลัมน์ที่ต้องการรวมในคอลัมน์หลักเพิ่มเติมจากตารางเอาต์พุตได้ เนื่องจากระบบจะบีบอัดทุกแถวในกลุ่มแถวเป็นแถวเอาต์พุตเดียว จึงต้องกําหนดค่าที่จะแสดงสําหรับกลุ่มแถวนั้น เช่น คุณอาจเลือกแสดงค่าคอลัมน์จากแถวแรกในชุด หรือแสดงเป็นค่าเฉลี่ยของทุกแถวในกลุ่มนั้น
columns เป็นอาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้
- column - ตัวเลขที่ระบุดัชนีของคอลัมน์ที่จะแสดง
- aggregation - ฟังก์ชันที่ยอมรับอาร์เรย์ของค่าทั้งหมดของคอลัมน์นี้ในกลุ่มแถวนี้และแสดงผลค่าเดียวเพื่อแสดงในแถวผลลัพธ์ ค่าการแสดงผลต้องเป็นประเภทที่ระบุโดยพร็อพเพอร์ตี้ type ของออบเจ็กต์ ดูรายละเอียดการสร้างฟังก์ชันการรวมของคุณเองได้ที่ด้านล่าง คุณต้องทราบว่าข้อมูลประเภทใดที่วิธีนี้ยอมรับได้และเรียกใช้ในคอลัมน์ประเภทที่เหมาะสมเท่านั้น API มีฟังก์ชันการรวมที่มีประโยชน์มากมาย โปรดดูฟังก์ชันการรวมที่ระบุไว้ด้านล่างสําหรับรายการ หรือการสร้างฟังก์ชันการรวมเพื่อดูวิธีเขียนฟังก์ชันการรวมของคุณเอง
- type - ประเภทการแสดงผลของฟังก์ชันการรวม ซึ่งควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "บูลีน"
- 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 |
วันที่ | number | หากระบุวันที่ จะแสดงค่าเดือนเป็น 0 (0, 1, 2 เป็นต้น) |
มอบฟังก์ชันการรวม
API มีฟังก์ชันการรวมต่อไปนี้ที่คุณสามารถใช้ในคอลัมน์ได้ อาร์เรย์พารามิเตอร์ aggregation
การทำงาน | ประเภทอาร์เรย์อินพุต | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|---|
google.visualization.data.avg |
number | number | ค่าเฉลี่ยของอาร์เรย์ที่ส่งผ่าน |
google.visualization.data.count |
ประเภทใดก็ได้ | number | จํานวนแถวในกลุ่ม โดยจะนับค่า Null และค่าที่ซ้ํากัน |
google.visualization.data.max |
ตัวเลข, สตริง, วันที่ | ตัวเลข, สตริง, วันที่, ไม่มีข้อมูล | ค่าสูงสุดในอาร์เรย์ สําหรับสตริง นี่คือรายการแรกในรายการที่ถูกจัดเรียงด้วยตัวอักษร สําหรับค่าวันที่จะเป็นวันที่ล่าสุด ระบบจะไม่สนใจ Null แสดงผลเป็น Null หากไม่มีค่าสูงสุด |
google.visualization.data.min |
ตัวเลข, สตริง, วันที่ | ตัวเลข, สตริง, วันที่, ไม่มีข้อมูล | ค่าต่ําสุดในอาร์เรย์ สําหรับสตริง นี่คือรายการสุดท้ายในรายการจัดเรียงตามตัวอักษร ส่วนค่าวันที่เป็นวันที่ที่เร็วที่สุด ระบบจะไม่สนใจ Null แสดงผลเป็น Null หากไม่มีค่าขั้นต่ํา |
google.visualization.data.sum |
number | number | ผลรวมของค่าทั้งหมดในอาร์เรย์ |
การสร้างฟังก์ชันตัวปรับแต่ง
คุณสามารถสร้างฟังก์ชันตัวปรับแต่งเพื่อดําเนินการตามค่าคีย์การเปลี่ยนรูปแบบง่ายๆ ก่อนที่ฟังก์ชัน 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; }
ผนวก()
วิธีนี้จะผนวกตารางข้อมูล 2 ตาราง (ออบเจ็กต์ DataTable
หรือ DataView
) ลงในตารางผลลัพธ์รายการเดียว คล้ายกับคําสั่ง SQL JOIN คุณระบุคู่คอลัมน์อย่างน้อย 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 ตารางนี้ไม่สามารถมีคีย์ที่เหมือนกันได้หลายรายการ (โดยที่คีย์เป็นชุดค่าผสมของคอลัมน์คีย์) - วิธีการเข้าร่วม
-
สตริงที่ระบุประเภทการผนวก หาก dt1 มีแถวหลายแถวที่ตรงกับแถว dt2 ตารางเอาต์พุตจะรวมแถว dt1 ที่ตรงกันทั้งหมด เลือกจากค่าต่อไปนี้
- "full" - ตารางเอาต์พุตจะรวมทุกแถวจากทั้ง 2 ตาราง โดยไม่คํานึงถึงคีย์ที่ตรงกัน แถวที่ไม่ตรงกันจะมีรายการเซลล์ว่าง และระบบจะรวมแถวที่ตรงกัน
- "internal" - การรวมอย่างเต็มรูปแบบที่กรองเพื่อรวมเฉพาะแถวที่คีย์ตรงกัน
- "left" - ตารางเอาต์พุตจะรวมแถวทั้งหมดจาก dt1 ไม่ว่าจะมีแถวที่ตรงกันจาก dt2 หรือไม่ก็ตาม
- "right" - ตารางเอาต์พุตจะรวมแถวทั้งหมดจาก dt2 ไม่ว่าจะมีแถวที่ตรงกันจาก dt1 หรือไม่ก็ตาม
- คีย์
-
อาร์เรย์ของคอลัมน์สําคัญที่เปรียบเทียบจากทั้ง 2 ตาราง แต่ละคู่คืออาร์เรย์องค์ประกอบ 2 ตัว คู่แรกเป็นคีย์ใน dt1 ตัวที่ 2 เป็นคีย์ใน dt2 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกํากับได้ โปรดดู
getColumnIndex
คอลัมน์ต้องเป็นประเภทเดียวกันในทั้ง 2 ตาราง คีย์ที่ระบุทั้งหมดต้องตรงกันตามกฎที่กําหนดโดย joinMethod เพื่อรวมแถวจากตาราง คอลัมน์คีย์จะรวมอยู่ในตารางเอาต์พุตเสมอ เฉพาะ dt1 ซึ่งเป็นตารางด้านซ้ายมือเท่านั้นที่จะมีคีย์ที่ซ้ํากันได้ โดยคีย์ใน dt2 ต้องไม่ซ้ํากัน คําว่า "คีย์" ในที่นี้หมายถึงชุดคอลัมน์หลักที่ไม่ซ้ํากัน ไม่ใช่ค่าคอลัมน์แต่ละรายการ เช่น หากคอลัมน์คีย์ของคุณคือ A และ B ตารางต่อไปนี้จะมีเฉพาะคีย์-ค่าที่ไม่ซ้ํากัน (ดังนั้นจึงใช้เป็น dt2 ได้)ต ข เจน แดง เจน น้ำเงิน ฟรีด แดง [[0,0], [2,1]]
จะเปรียบเทียบค่าจากคอลัมน์แรกในทั้ง 2 ตาราง และคอลัมน์ที่ 3 จาก dt1 กับคอลัมน์ที่ 2 จาก dt2 - dt1คอลัมน์
-
อาร์เรย์ของคอลัมน์จาก dt1 ที่จะรวมไว้ในตารางเอาต์พุต นอกเหนือจากคอลัมน์หลักของ dt1 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกํากับได้ โปรดดู
getColumnIndex
- dt2คอลัมน์
-
อาร์เรย์ของคอลัมน์จาก dt2 ที่จะรวมไว้ในตารางเอาต์พุต นอกเหนือจากคอลัมน์หลักของ dt2 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกํากับได้ โปรดดู
getColumnIndex
แสดงผลค่า
DataTable
ที่มีคอลัมน์สําคัญ dt1Column และ dt2Column ตารางนี้จัดเรียงตามคอลัมน์หลักจากซ้ายไปขวา เมื่อ joinMethod เป็น "ภายใน" ควรป้อนข้อมูลเซลล์หลักทั้งหมด สําหรับวิธีการผนวกอื่นๆ หากไม่พบคีย์ที่ตรงกัน ตารางจะมีค่า 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
ตัวจัดรูปแบบ
GoogleVisual API มีการจัดรูปแบบที่ใช้จัดรูปแบบข้อมูลใหม่ในการแสดงภาพได้ การจัดรูปแบบเหล่านี้จะเปลี่ยนค่าที่จัดรูปแบบของคอลัมน์ที่ระบุในทุกแถว ข้อควรทราบมีดังนี้
- ตัวจัดรูปแบบจะแก้ไขเฉพาะค่าที่จัดรูปแบบเท่านั้น ไม่ใช่ค่าพื้นฐาน เช่น ค่าที่แสดงจะเป็น "$1,000.00" แต่ค่าพื้นฐานจะยังคงเป็น "1000"
- เครื่องมือจัดรูปแบบจะมีผลกับคอลัมน์เพียงครั้งละ 1 คอลัมน์เท่านั้น หากต้องการจัดรูปแบบคอลัมน์หลายคอลัมน์อีกครั้ง ให้ใช้เครื่องมือจัดรูปแบบกับแต่ละคอลัมน์ที่ต้องการเปลี่ยนแปลง
- หากคุณใช้ตัวจัดรูปแบบที่ผู้ใช้กําหนดด้วย ตัวจัดรูปแบบ Google บางรูปแบบจะลบล้างการจัดรูปแบบทั้งหมดที่กําหนดโดยผู้ใช้
- รับออบเจ็กต์
DataTable
ที่มีการป้อนข้อมูล - สําหรับแต่ละคอลัมน์ที่ต้องการจัดรูปแบบใหม่ ให้ทําดังนี้
- สร้างออบเจ็กต์ที่ระบุตัวเลือกทั้งหมดของตัวจัดรูปแบบ นี่คือออบเจ็กต์ JavaScript พื้นฐานที่มีชุดพร็อพเพอร์ตี้และค่า อ่านเอกสารประกอบของรูปแบบเครื่องมือจัดรูปแบบเพื่อดูพร็อพเพอร์ตี้ที่รองรับ (คุณอาจส่งผ่านออบเจ็กต์คําอธิบายตามตัวอักษรที่ระบุตัวเลือกของคุณก็ได้)
- สร้างตัวจัดรูปแบบ โดยส่งในออบเจ็กต์ตัวเลือก
-
เรียกใช้
formatter
.format(table, colIndex)
โดยส่งผ่านในคอลัมน์DataTable
และหมายเลขคอลัมน์ (ศูนย์) เพื่อจัดรูปแบบใหม่ โปรดทราบว่าคุณใช้ตัวจัดรูปแบบได้เพียงรายการเดียวกับแต่ละคอลัมน์ การใช้ตัวจัดรูปแบบที่ 2 จะเป็นการเขียนทับผลกระทบของคอลัมน์แรก
สําคัญ: เครื่องมือจัดรูปแบบหลายรายการต้องใช้แท็ก HTML เพื่อแสดงการจัดรูปแบบพิเศษ หากการแสดงภาพรองรับตัวเลือกallowHtml
คุณควรตั้งค่าเป็นจริง
การจัดรูปแบบจริงที่ใช้กับข้อมูลมาจากภาษาที่มีการโหลด API ดูรายละเอียดเพิ่มเติมได้ที่การโหลดแผนภูมิที่มีภาษาเฉพาะ
สําคัญ: ตัวจัดรูปแบบใช้กับ DataTable
ได้เท่านั้น ใช้กับ DataView
ไม่ได้ (ออบเจ็กต์ DataView
เป็นแบบอ่านอย่างเดียว)
ขั้นตอนทั่วไปสําหรับการใช้ตัวจัดรูปแบบมีดังนี้
ต่อไปนี้คือตัวอย่างการเปลี่ยนค่าวันที่ที่จัดรูปแบบของคอลัมน์วันที่ให้ใช้รูปแบบวันที่แบบยาว ("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 เป็นชื่อ รูปแบบที่ถูกต้อง
// 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) |
จัดรูปแบบข้อมูลใหม่ในคอลัมน์ที่ระบุ
|
GoogleVisual API มีรูปแบบดังต่อไปนี้
ชื่อตัวจัดรูปแบบ | คำอธิบาย |
---|---|
รูปแบบลูกศร | เพิ่มลูกศรขึ้นหรือลงเพื่อแสดงว่าค่าเซลล์สูงกว่าหรือต่ํากว่าค่าที่ระบุ |
รูปแบบ | เพิ่มแถบสี ทิศทางและสีบ่งบอกว่าค่าของเซลล์สูงกว่าหรือต่ํากว่าค่าที่ระบุ |
รูปแบบสี | ระบายสีเซลล์ตามค่าที่ระบุในช่วงที่ระบุ |
รูปแบบวันที่ | จัดรูปแบบค่าวันที่หรือวันที่และเวลาด้วยวิธีต่างๆ รวมถึง "1 มกราคม 2009", "1/1/09" และ "1 ม.ค. 2009" |
รูปแบบตัวเลข | จัดรูปแบบค่าตัวเลขในด้านต่างๆ |
รูปแบบ | เชื่อมโยงค่าเซลล์ในแถวเดียวกันลงในเซลล์ที่ระบุร่วมกับข้อความที่กําหนดเอง |
รูปแบบลูกศร
เพิ่มลูกศรขึ้นหรือลงไปยังเซลล์ตัวเลข โดยขึ้นอยู่กับว่าค่านั้นสูงกว่าหรือต่ํากว่าค่าฐานที่ระบุ หากเท่ากับค่าฐาน จะไม่มีลูกศรปรากฏ
ตัวเลือก
ArrowFormat
รองรับตัวเลือกต่อไปนี้ โดยส่งผ่านไปยังเครื่องมือสร้าง
ตัวเลือก | คำอธิบาย |
---|---|
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
รองรับตัวเลือกต่อไปนี้ โดยส่งผ่านไปยังเครื่องมือสร้าง
ตัวเลือก | ตัวอย่างคำอธิบาย |
---|---|
base |
จํานวนที่เป็นค่าฐานสําหรับเปรียบเทียบค่าเซลล์ หากค่าเซลล์สูงกว่า ระบบจะวาดไว้ทางด้านขวาของฐาน หากต่ํากว่า วาดไว้ทางด้านซ้าย ค่าเริ่มต้นคือ 0 |
colorNegative |
สตริงที่ระบุส่วนค่าติดลบของแถบ ค่าที่เป็นไปได้คือ "red", "green" และ "blue" โดยมีค่าเริ่มต้นเป็น "red" |
colorPositive |
สตริงที่ระบุสีของส่วนค่าบวกของแถบ ค่าที่เป็นไปได้คือ "red", "green" และ "blue" ค่าเริ่มต้นคือ "สีน้ําเงิน" |
drawZeroLine |
บูลีนที่ระบุว่าจะวาดเส้นฐานสีเข้ม 1 พิกเซลเมื่อมีค่าลบหรือไม่ เส้นสีเข้มมีไว้เพื่อเพิ่มการสแกนภาพของแถบ ค่าเริ่มต้นคือ "false" |
max |
ค่าสูงสุดของช่วงบาร์ ค่าเริ่มต้นคือค่าสูงสุดในตาราง |
min |
ค่าตัวเลขขั้นต่ําสําหรับช่วงบาร์ ค่าเริ่มต้นคือมูลค่าต่ําสุดในตาราง |
showValue |
หากเป็น "จริง" ระบบจะแสดงค่าและบาร์ หากเป็น "เท็จ" จะแสดงเฉพาะแถบเท่านั้น ค่าเริ่มต้นคือจริง |
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%'});
รูปแบบสี
กําหนดสีเบื้องหน้าหรือพื้นหลังของเซลล์ตัวเลข โดยขึ้นอยู่กับค่าเซลล์ ตัวจัดรูปแบบนี้ผิดปกติ เนื่องจากตัวเลือกนี้ไม่มีตัวเลือกในตัวสร้าง แต่ให้โทรหา addRange()
หรือ addGradientRange()
กี่ครั้งก็ได้เพื่อเพิ่มช่วงสี ก่อนโทรหา format()
ระบุสีในรูปแบบ HTML ที่ยอมรับได้ เช่น "สีดํา" "#000000" หรือ "#000"
วิธีการ
ColorFormat
รองรับเมธอดต่อไปนี้
วิธีการ | คำอธิบาย |
---|---|
google.visualization.ColorFormat() |
เครื่องมือสร้าง ไม่ใช้อาร์กิวเมนต์ |
addRange(from, to, color, bgcolor) |
ระบุสีพื้นหน้าและ/หรือสีพื้นหลังไปยังเซลล์ ทั้งนี้ขึ้นอยู่กับค่าเซลล์ เซลล์ที่มีค่าในช่วง from ถึง จะได้รับมอบหมาย color และ bgcolor โปรดทราบว่าช่วง ไม่สามารถรวมกันได้ เนื่องจากการสร้างช่วงจาก 1-1,000 และครั้งที่ 2 จาก 1,000-2,000 ครั้งจะไม่ครอบคลุมค่า 1,000
|
addGradientRange(from, to, color, fromBgColor,
toBgColor)
|
กําหนดสีพื้นหลังจากช่วงตามค่าเซลล์ ระบบจะปรับสีให้ตรงกับค่าของเซลล์ในช่วงที่มีสีจากขอบล่างไปจนถึงสีขอบเขตบน โปรดทราบว่าวิธีนี้เปรียบเทียบค่าสตริงไม่ได้ เนื่องจาก
|
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%'});
รูปแบบวันที่
จัดรูปแบบค่า Date
ของ JavaScript ได้หลายวิธี รวมถึง "1 มกราคม 2016", "1/1/16" และ "1 ม.ค. 2016"
ตัวเลือก
DateFormat
รองรับตัวเลือกต่อไปนี้ โดยส่งผ่านไปยังเครื่องมือสร้าง
ตัวเลือก | คำอธิบาย |
---|---|
formatType |
ตัวเลือกการจัดรูปแบบด่วนสําหรับวันที่ เรารองรับค่าสตริงต่อไปนี้ โดยจัดรูปแบบวันที่วันที่ 28 กุมภาพันธ์ 2016 ใหม่ตามนี้
คุณไม่สามารถระบุทั้ง |
pattern |
รูปแบบรูปแบบที่กําหนดเองที่จะใช้กับค่า ซึ่งคล้ายกับรูปแบบวันที่และเวลาของ ICU
เช่น
คุณไม่สามารถระบุทั้ง |
timeZone |
เขตเวลาที่จะแสดงค่าวันที่ ค่านี้เป็นตัวเลข ซึ่งระบุ GMT + จํานวนเขตเวลานี้ (อาจเป็นค่าลบ) ออบเจ็กต์วันที่จะสร้างขึ้นโดยค่าเริ่มต้นพร้อมเขตเวลาที่เดาไว้ของคอมพิวเตอร์ที่สร้างออบเจ็กต์นี้ ตัวเลือกนี้จะใช้เพื่อแสดงค่านั้นในเขตเวลาอื่น เช่น หากคุณสร้างออบเจ็กต์วันที่ 17:00 น. ในคอมพิวเตอร์ที่อยู่ในเมืองกรีนิช ประเทศอังกฤษ และระบุเขตเวลาเป็น -5 (options['timeZone'] = -5 หรือเวลาเขตแปซิฟิกตะวันออกในสหรัฐอเมริกา) ค่าที่แสดงจะเป็นตอนเที่ยง
|
วิธีการ
DateFormat
รองรับเมธอดต่อไปนี้
วิธีการ | คำอธิบาย |
---|---|
google.visualization.DateFormat(options) |
เครื่องมือสร้าง โปรดดูข้อมูลเพิ่มเติมในส่วนตัวเลือกด้านบน |
format(dataTable, columnIndex) |
วิธี format() มาตรฐานเพื่อนําการจัดรูปแบบไปใช้กับคอลัมน์ที่ระบุ |
formatValue(value) |
แสดงผลค่าที่จัดรูปแบบของค่าที่ระบุ
วิธีนี้ไม่ต้องใช้ |
รหัสตัวอย่าง
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 แต่ยังไม่รองรับรูปแบบต่อไปนี้ e D F g Y u w W หากต้องการหลีกเลี่ยงไม่ให้เกิดการทับซ้อนกันของรูปแบบ ข้อความตามตัวอักษรที่ต้องการให้ปรากฏในเอาต์พุตควรอยู่ในเครื่องหมายคําพูดเดี่ยว ยกเว้นเครื่องหมายคําพูดเดี่ยวที่ควรใช้เป็น 2 เท่า เช่น
"K 'o''clock.'"
รูปแบบ | คำอธิบาย | ตัวอย่างเอาต์พุต |
---|---|---|
GG | นักออกแบบยุค | "โฆษณา" |
YY หรือ YYYY | ปี | 1996 |
ข. |
เดือนในปี สําหรับเดือนมกราคม
|
"กรกฎาคม" "07" |
d | วันในเดือน ค่า "d" ที่เกินมาจะเพิ่มเลข 0 นําหน้า | 10 |
h | ชั่วโมงในสเกล 12 ชั่วโมง ค่า "h" ที่เกินมาจะเพิ่มเลข 0 นําหน้า | 12 |
H | ชั่วโมงในสเกล 24 ชั่วโมง ค่า Hk เพิ่มเติมจะเพิ่ม 0 นําหน้า | 0 |
m | นาทีในชั่วโมง ค่า "M" เพิ่มเติมจะเพิ่มเลข 0 นําหน้า | 30 |
s | วินาทีเป็นวินาที ค่า 's' เพิ่มเติมจะเพิ่มเลข 0 นําหน้า | 55 |
S | เศษของวินาที ระบบจะเติมค่า "S" เกินมาทางด้านขวาด้วยเลข 0 | 978 |
E |
วันของสัปดาห์ ผลลัพธ์ต่อไปนี้สําหรับ "วันอังคาร"
|
"อังคาร" "อังคาร" |
AA | AM/PM | "PM" |
k | ชั่วโมงต่อวัน (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 product -0500 ZZZZ และผลิตภัณฑ์อื่นๆ อีกมากมาย "GMT -05:00" |
"-0800" "GMT -05:00" |
v | เขตเวลา (ทั่วไป) |
"อื่นๆ/GMT-5" |
' | Escape สําหรับข้อความ | "วันที่=' |
'' | เครื่องหมายคําพูดเดี่ยว | "YY" |
รูปแบบตัวเลข
อธิบายวิธีจัดรูปแบบคอลัมน์ตัวเลข ตัวเลือกการจัดรูปแบบประกอบไปด้วยการระบุสัญลักษณ์คํานําหน้า (เช่น สัญลักษณ์ดอลลาร์) หรือเครื่องหมายวรรคตอนที่จะใช้เป็นเครื่องหมายหลายพันตัว
ตัวเลือก
NumberFormat
รองรับตัวเลือกต่อไปนี้ โดยส่งผ่านไปยังเครื่องมือสร้าง
ตัวเลือก | คำอธิบาย |
---|---|
decimalSymbol |
อักขระที่จะใช้เป็นเครื่องหมายทศนิยม ค่าเริ่มต้นคือจุด (.) |
fractionDigits |
ตัวเลขที่ระบุจํานวนหลักที่จะแสดงหลังทศนิยม ซึ่งค่าเริ่มต้นคือ 2 รายการ หากระบุตัวเลขมากกว่าจํานวนที่มี ตัวเลขจะแสดงเลขศูนย์สําหรับค่าขนาดเล็ก ระบบจะปัดเศษค่าที่ถูกตัดออก (เลื่อนขึ้น 5 ครั้ง) |
groupingSymbol |
อักขระที่จะใช้ในการจัดกลุ่มตัวเลขทางด้านซ้ายของทศนิยมสําหรับทศนิยม 3 ชุด โดยค่าเริ่มต้นจะเป็นคอมมา (,) |
negativeColor |
สีข้อความสําหรับค่าลบ ไม่มีค่าเริ่มต้น ค่าอาจเป็นค่าสี HTML ที่ยอมรับ เช่น "แดง" หรือ "#FF0000" |
negativeParens |
บูลีน โดยที่ค่า "จริง" บ่งชี้ว่ามีเครื่องหมายลบล้อมรอบด้วยวงเล็บ ค่าเริ่มต้นคือจริง |
pattern |
สตริงรูปแบบ หากมี ระบบจะละเว้นตัวเลือกอื่นๆ ทั้งหมด ยกเว้น
สตริงรูปแบบคือชุดย่อยของชุดรูปแบบ ICU
เช่น |
prefix |
คํานําหน้าสตริงสําหรับค่า เช่น "$" |
suffix |
คําต่อท้ายของสตริงสําหรับค่า เช่น "%" |
วิธีการ
NumberFormat
รองรับเมธอดต่อไปนี้
วิธีการ | คำอธิบาย |
---|---|
google.visualization.NumberFormat(options) |
เครื่องมือสร้าง โปรดดูข้อมูลเพิ่มเติมในส่วนตัวเลือกด้านบน |
format(dataTable, columnIndex) |
วิธี format() มาตรฐานเพื่อนําการจัดรูปแบบไปใช้กับคอลัมน์ที่ระบุ |
formatValue(value) |
แสดงผลค่าที่จัดรูปแบบของค่าที่ระบุ วิธีนี้ไม่ต้องใช้ |
รหัสตัวอย่าง
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%'});
รูปแบบ
ช่วยให้คุณรวมค่าของคอลัมน์ที่กําหนดเป็นคอลัมน์เดียวร่วมกับข้อความที่กําหนดเองได้ ตัวอย่างเช่น หากคุณมีคอลัมน์สําหรับชื่อ และคอลัมน์สําหรับนามสกุล คุณอาจป้อนข้อมูลในคอลัมน์ที่ 3 ด้วย {last name}, {first name} ตัวจัดรูปแบบนี้ไม่เป็นไปตามรูปแบบสําหรับเครื่องมือสร้างและวิธีการ format()
ดูวิธีการในหัวข้อด้านล่าง
วิธีการ
PatternFormat
รองรับเมธอดต่อไปนี้
วิธีการ | คำอธิบาย |
---|---|
google.visualization.PatternFormat(pattern) |
เครื่องมือสร้าง ไม่ใช้ออบเจ็กต์ตัวเลือก แต่ต้องใช้พารามิเตอร์ pattern ที่เป็นสตริงแทน ซึ่งเป็นสตริงที่อธิบายค่าคอลัมน์ที่จะใส่ไว้ในคอลัมน์ปลายทาง พร้อมกับข้อความที่กําหนดเอง ฝังตัวยึดตําแหน่งในสตริงเพื่อระบุค่าจากคอลัมน์อื่นที่จะฝัง ตัวยึดตําแหน่งคือ
รหัสตัวอย่างตัวอย่างต่อไปนี้แสดงตัวสร้างสําหรับรูปแบบที่สร้างองค์ประกอบ Anchor โดยองค์ประกอบแรกและองค์ประกอบที่ 2 จะได้มาจากเมธอด var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
การเรียกการจัดรูปแบบมาตรฐาน พร้อมด้วยพารามิเตอร์เพิ่มเติมดังนี้
ดูตัวอย่างการจัดรูปแบบหลังตาราง |
ต่อไปนี้คือตัวอย่างอินพุตและเอาต์พุตสําหรับตาราง 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
คลาสผู้ช่วยที่ช่วยลดความซับซ้อนในการเขียน Gadget ที่ใช้ GoogleVisual API
ผู้ผลิต
google.visualization.GadgetHelper()
วิธีการ
วิธีการ | มูลค่าการแสดงผล | คำอธิบาย |
---|---|---|
createQueryFromPrefs(prefs) |
google.visualization.Query |
แบบคงที่ สร้างอินสแตนซ์ใหม่ของ google.visualization.Query และตั้งค่าพร็อพเพอร์ตี้ตามค่าจากค่ากําหนดแกดเจ็ต ประเภทพารามิเตอร์ prefs คือ _IG_Prefs
|
validateResponse(response) |
บูลีน |
แบบคงที่ พารามิเตอร์ response เป็นประเภท google.visualization.QueryResponse แสดงผล true หากการตอบกลับมีข้อมูล แสดงผล false หากการดําเนินการค้นหาล้มเหลวและการตอบกลับไม่มีข้อมูล หากเกิดข้อผิดพลาด ข้อความแสดงข้อผิดพลาดนี้จะแสดงขึ้นมา
|
คลาสการค้นหา
ออบเจ็กต์ต่อไปนี้มีไว้สําหรับส่งคําค้นหาข้อมูลไปยังแหล่งข้อมูลภายนอก เช่น Google สเปรดชีต
- การค้นหา - การรวมคําขอข้อมูลขาออก
- QueryResponse - จัดการการตอบสนองจากแหล่งข้อมูล
การค้นหา
แสดงถึงการค้นหาที่ส่งไปยังแหล่งข้อมูล
ผู้ผลิต
google.visualization.Query(dataSourceUrl, opt_options)
พารามิเตอร์
- dataSourceUrl
- [จําเป็น, สตริง] URL ที่จะส่งคําถามไป ดูเอกสารประกอบเกี่ยวกับแผนภูมิและสเปรดชีตสําหรับ Google สเปรดชีต
- opt_option
-
[ไม่บังคับ ออบเจ็กต์] แผนที่ของตัวเลือกสําหรับคําขอ หมายเหตุ: หากเข้าถึงแหล่งข้อมูลที่จํากัด คุณไม่ควรใช้พารามิเตอร์นี้ พร็อพเพอร์ตี้ที่รองรับมีดังนี้
-
sendMethod - [ไม่บังคับ, สตริง] ระบุวิธีที่จะใช้ส่งคําค้นหา เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้
- 'xhr' - ส่งคําค้นหาโดยใช้ XmlHttpRequest
- 'scriptInjection' - ส่งคําค้นหาโดยใช้การแทรกสคริปต์
-
'makeRequest' - [ใช้ได้สําหรับแกดเจ็ตที่เลิกใช้งานเท่านั้น] ส่งคําถามโดยใช้เมธอด Gadget API
makeRequest()
หากระบุ คุณควรระบุ makeRequestParams ด้วย -
'auto' - ใช้วิธีการที่ระบุโดยพารามิเตอร์ของ URL
tqrt
จาก URL แหล่งข้อมูลtqrt
มีค่าต่อไปนี้ได้ 'xhr', 'scriptInjection' หรือ 'makeRequest' หากtqrt
หายไปหรือมีค่าที่ไม่ถูกต้อง ค่าเริ่มต้นคือ 'xhr' สําหรับคําขอโดเมนเดียวกันและ 'scriptInjection' สําหรับคําขอข้ามโดเมน
-
makeRequestParams - [ออบเจ็กต์] แผนที่ของพารามิเตอร์สําหรับคําค้นหา
makeRequest()
ใช้ที่จําเป็นหาก sendMethod เป็น "makeRequest" เท่านั้น
-
sendMethod - [ไม่บังคับ, สตริง] ระบุวิธีที่จะใช้ส่งคําค้นหา เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้
วิธีการ
วิธีการ | มูลค่าการแสดงผล | คำอธิบาย |
---|---|---|
abort() |
ไม่มี |
หยุดการส่งข้อความค้นหาอัตโนมัติที่เริ่มต้นด้วย setRefreshInterval()
|
setRefreshInterval(seconds)
|
ไม่มี |
ตั้งค่าคําค้นหาให้เรียกใช้เมธอด หากใช้วิธีนี้ คุณควรเรียกใช้ก่อนเรียกใช้เมธอด
ยกเลิกวิธีการนี้โดยการติดต่ออีกครั้งด้วยเลข 0 (ค่าเริ่มต้น) หรือโดยโทรไปที่ |
setTimeout(seconds) |
ไม่มี |
ตั้งค่าจํานวนวินาทีที่รอให้แหล่งข้อมูลตอบกลับก่อนที่จะเกิดข้อผิดพลาดการหมดเวลา seconds เป็นตัวเลขที่มากกว่า 0 ระยะหมดเวลาตามค่าเริ่มต้นคือ 30 วินาที ถ้ามีการเรียกใช้วิธีนี้ ควรเรียกใช้ก่อนที่จะเรียกใช้เมธอด send
|
setQuery(string) |
ไม่มี |
ตั้งค่าสตริงคําค้นหา ค่าของพารามิเตอร์ string ควรเป็นคําค้นหาที่ถูกต้อง ควรใช้วิธีนี้ก่อนใช้วิธีการนี้ก่อนที่จะเรียกใช้เมธอด send
ดูข้อมูลเพิ่มเติมเกี่ยวกับภาษาของคําค้นหา
|
send(callback) |
ไม่มี |
ส่งคําค้นหาไปยังแหล่งข้อมูล callback ควรเป็นฟังก์ชันที่จะเรียกใช้เมื่อแหล่งข้อมูลตอบกลับ ฟังก์ชันเรียกกลับจะได้รับพารามิเตอร์เดี่ยวประเภท google.visualization.QueryResponse
|
การตอบกลับการค้นหา
แสดงการตอบกลับการดําเนินการค้นหาตามที่ได้รับจากแหล่งข้อมูล ระบบจะส่งอินสแตนซ์ของคลาสนี้เป็นอาร์กิวเมนต์ไปยังฟังก์ชันเรียกกลับที่ตั้งค่าไว้เมื่อมีการเรียกใช้ Query.send
วิธีการ
วิธีการ | มูลค่าการแสดงผล | คำอธิบาย |
---|---|---|
getDataTable() |
ตารางข้อมูล |
แสดงตารางข้อมูลตามที่แสดงโดยแหล่งข้อมูล แสดงผล null หากการดําเนินการค้นหาล้มเหลวและไม่มีข้อมูลแสดงผล
|
getDetailedMessage() |
สตริง | แสดงข้อความแสดงข้อผิดพลาดโดยละเอียดสําหรับการค้นหาที่ล้มเหลว หากการดําเนินการค้นหาสําเร็จ วิธีนี้จะแสดงผลสตริงว่าง ข้อความที่แสดงผลคือข้อความที่มีไว้สําหรับนักพัฒนาซอฟต์แวร์และอาจมีข้อมูลทางเทคนิค เช่น "ไม่มีคอลัมน์ {salary}" |
getMessage() |
สตริง | แสดงข้อความแสดงข้อผิดพลาดสั้นๆ สําหรับคําค้นหาที่ล้มเหลว หากการดําเนินการค้นหาสําเร็จ เมธอดนี้จะแสดงสตริงที่ว่างเปล่า ส่วนข้อความที่ส่งคืนคือข้อความสั้นๆ ที่มีไว้สําหรับผู้ใช้ปลายทาง เช่น "คําค้นหาไม่ถูกต้อง" หรือ "ปฏิเสธการเข้าถึง" |
getReasons() |
อาร์เรย์ของสตริง |
แสดงผลอาร์เรย์ของ 0 รายการเพิ่มเติม แต่ละรายการเป็นสตริงสั้นๆ ที่มีข้อผิดพลาดหรือรหัสข้อผิดพลาดที่ระบบสูงขึ้นขณะเรียกใช้การค้นหา รหัสที่เป็นไปได้ ได้แก่
|
hasWarning() |
บูลีน | แสดงผล true หากการดําเนินการค้นหามีข้อความเตือน |
isError() |
บูลีน |
แสดงผล true หากการดําเนินการค้นหาล้มเหลว และการตอบสนองไม่มีตารางข้อมูล แสดงผล <false> หากการดําเนินการค้นหาสําเร็จและการตอบกลับมีตารางข้อมูล
|
การแสดงข้อผิดพลาด
API มีฟังก์ชันมากมายที่จะช่วยให้คุณแสดงข้อความแสดงข้อผิดพลาดที่กําหนดเองแก่ผู้ใช้ได้ หากต้องการใช้ฟังก์ชันเหล่านี้ ให้ระบุองค์ประกอบคอนเทนเนอร์ในหน้าเว็บ (โดยทั่วไปคือ <div>
) ซึ่ง API จะแสดงข้อผิดพลาดแสดงข้อผิดพลาด คอนเทนเนอร์นี้อาจเป็นองค์ประกอบคอนเทนเนอร์การแสดงภาพ หรือคอนเทนเนอร์สําหรับข้อผิดพลาดเท่านั้น หากคุณระบุองค์ประกอบที่มีการแสดงภาพ ข้อความแสดงข้อผิดพลาดจะแสดงอยู่เหนือการแสดงภาพ
จากนั้นเรียกฟังก์ชันที่เหมาะสมด้านล่างเพื่อแสดงหรือนําข้อความแสดงข้อผิดพลาดออก
ฟังก์ชันทั้งหมดเป็นฟังก์ชันแบบคงที่ในเนมสเปซ google.visualization.errors
การแสดงภาพจํานวนมากอาจส่งเหตุการณ์ข้อผิดพลาดได้ ดูเหตุการณ์ข้อผิดพลาดด้านล่างเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์นั้น
คุณดูตัวอย่างข้อผิดพลาดที่กําหนดเองได้ในตัวอย่าง Wrapper การค้นหา
การทำงาน | มูลค่าการแสดงผล | คำอธิบาย |
---|---|---|
addError(container, message, opt_detailedMessage,
opt_options)
|
ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น ซึ่งเป็นค่าที่ไม่ซ้ําในหน้าเว็บและใช้เพื่อนําข้อผิดพลาดหรือค้นหาองค์ประกอบที่มีอยู่ได้ |
เพิ่มบล็อกการแสดงข้อผิดพลาดลงในองค์ประกอบหน้าเว็บที่ระบุ โดยมีข้อความและการจัดรูปแบบที่ระบุ
|
addErrorFromQueryResponse(container, response) |
ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น หรือเป็น Null หากการตอบกลับไม่ได้ระบุข้อผิดพลาด ซึ่งเป็นค่าที่ไม่ซ้ํากันในหน้าเว็บและใช้นําข้อผิดพลาดออกหรือค้นหาองค์ประกอบที่มีได้ |
ส่งคอนเทนเนอร์การค้นหาและข้อความแสดงข้อผิดพลาดไปยังวิธีนี้: หากการตอบกลับการค้นหาระบุว่าเกิดข้อผิดพลาดในการค้นหา จะแสดงข้อความแสดงข้อผิดพลาดในองค์ประกอบของหน้าเว็บที่ระบุ หากการตอบกลับการค้นหาไม่มีข้อมูล เมธอดนี้จะแสดงข้อผิดพลาด JavaScript ส่ง QueryResponse ที่ได้รับในเครื่องจัดการคําค้นหาไปยังข้อความนี้เพื่อแสดงข้อผิดพลาด และยังตั้งค่ารูปแบบการแสดงผลที่เหมาะกับประเภท (ข้อผิดพลาดหรือคําเตือน คล้ายกับ
|
removeError(id) |
บูลีน: จริง หากข้อผิดพลาดถูกนําออก เป็นเท็จ |
นําข้อผิดพลาดที่ระบุตามรหัสออกจากหน้าเว็บ
|
removeAll(container) |
ไม่มี |
นําการบล็อกข้อผิดพลาดทั้งหมดออกจากคอนเทนเนอร์ที่ระบุ หากไม่มีคอนเทนเนอร์ที่ระบุ การดําเนินการนี้จะเกิดข้อผิดพลาด
|
getContainer(errorId) |
จัดการให้กับองค์ประกอบ DOM ที่มีข้อผิดพลาดที่ระบุ หรือเป็น Null หากไม่พบ |
เรียกแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ที่แสดงข้อผิดพลาดที่ระบุโดย errorID
|
เหตุการณ์
การแสดงภาพส่วนใหญ่จะเริ่มเหตุการณ์เพื่อแสดงเหตุการณ์ที่เกิดขึ้น ในฐานะผู้ใช้แผนภูมิ คุณมักต้องการฟังเหตุการณ์เหล่านี้ หากเขียนโค้ดการแสดงภาพของตัวเอง คุณอาจต้องทริกเกอร์เหตุการณ์ดังกล่าวด้วยตนเองด้วย
วิธีการต่อไปนี้ช่วยให้นักพัฒนาซอฟต์แวร์ฟังเหตุการณ์ นําเครื่องจัดการเหตุการณ์ที่มีอยู่ออก หรือทริกเกอร์เหตุการณ์จากภายในการแสดงภาพ
- google.visualization.events.addListener() และ google.visualization.events.addOneTimeListener() ฟังเหตุการณ์
- google.visualization.events.removeListener() นํา Listener ที่มีอยู่ออก
- google.visualization.events.removeAllListeners() นํา Listener ทั้งหมดในแผนภูมิหนึ่งๆ
- google.visualization.events.trigger() จะทําให้เหตุการณ์เริ่มทํางาน
addListener()
เรียกใช้เมธอดนี้เพื่อลงทะเบียนเพื่อให้เหตุการณ์เริ่มทํางานโดยการแสดงภาพที่โฮสต์ในหน้าเว็บ คุณควรบันทึกอาร์กิวเมนต์เหตุการณ์ที่จะส่งผ่านไปยังฟังก์ชันการจัดการ (หากมี)
google.visualization.events.addListener(source_visualization, event_name, handling_function)
- source_visualization
- แฮนเดิลของอินสแตนซ์การแสดงภาพแหล่งที่มา
- event_name
- ชื่อสตริงของเหตุการณ์ที่ต้องการฟัง การแสดงภาพควรบันทึกเหตุการณ์ที่เกิดเหตุการณ์
- handling_function
- ชื่อของฟังก์ชัน JavaScript ในเครื่องที่จะเรียกใช้เมื่อsource_visualization เริ่มทํางาน event_name event ระบบจะส่งฟังก์ชันการจัดการที่เป็นอาร์กิวเมนต์เหตุการณ์เป็นพารามิเตอร์
การคืนสินค้า
เครื่องจัดการฟังสําหรับผู้ฟังใหม่ คุณใช้เครื่องจัดการเพื่อนํา 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
- ชื่อสตริงเพื่อเรียกเหตุการณ์ คุณสามารถเลือกค่าสตริงที่ต้องการ
- อาร์กิวเมนต์เหตุการณ์
- [ไม่บังคับ] แผนที่ของคู่ชื่อ/ค่าเพื่อส่งผ่านไปยังวิธีการรับ เช่น {message: "Hello!!", คะแนน: 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); }
วิธีและพร็อพเพอร์ตี้การแสดงภาพมาตรฐาน
การแสดงภาพทั้งหมดควรแสดงชุดเมธอดและพร็อพเพอร์ตี้ที่จําเป็นและไม่บังคับต่อไปนี้ อย่างไรก็ตาม โปรดทราบว่าไม่มีการตรวจสอบประเภทเพื่อบังคับใช้มาตรฐานเหล่านี้ ดังนั้น คุณควรอ่านเอกสารประกอบสําหรับการแสดงภาพแต่ละครั้ง
- เครื่องมือสร้าง
- Draw()
- getAction() [ไม่บังคับ]
- getSelection() [ไม่บังคับ]
- removeAction() [ไม่บังคับ]
- setAction() [ไม่บังคับ]
- setSelection() [ไม่บังคับ]
หมายเหตุ: วิธีการเหล่านี้อยู่ในเนมสเปซของการแสดงภาพ ไม่ใช่เนมสเปซ google.visualization
เครื่องมือสร้าง
เครื่องมือสร้างชื่อควรมีชื่อของคลาสการแสดงภาพ และแสดงผลอินสแตนซ์ของคลาสนั้น
visualization_class_name(dom_element)
- dom_Element
- ตัวชี้ไปยังองค์ประกอบ DOM ที่ควรฝังการแสดงภาพ
ตัวอย่าง
var org = new google.visualization.OrgChart(document.getElementById('org_div'));
Draw()
วาดการแสดงภาพในหน้าเว็บ เบื้องหลังจะดึงข้อมูลกราฟิกจากเซิร์ฟเวอร์หรือสร้างกราฟิกในหน้าเว็บโดยใช้โค้ดภาพที่ลิงก์ได้ คุณควรเรียกใช้วิธีนี้ทุกครั้งที่ข้อมูลหรือตัวเลือกมีการเปลี่ยนแปลง ควรวาดออบเจ็กต์ภายในองค์ประกอบ 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
ไม่มีข้อมูล การเลือกจะเป็นแถว หากค่าทั้งสองไม่เป็นค่าว่าง ระบบจะถือว่าเป็นรายการข้อมูลที่เฉพาะเจาะจง คุณเรียกใช้เมธอด 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()
ไม่ควรทําให้เหตุการณ์ "เลือก" เริ่มทํางาน การแสดงภาพอาจไม่สนใจตัวเลือกบางส่วน เช่น ตารางที่แสดงเฉพาะแถวที่เลือกอาจไม่สนใจองค์ประกอบในเซลล์หรือคอลัมน์ในการใช้งาน setSelection()
หรือจะเลือกทั้งแถวก็ได้
ทุกครั้งที่มีการเรียกใช้เมธอดนี้ ระบบจะยกเลิกการเลือกรายการที่เลือกทั้งหมด และควรใช้รายการการเลือกใหม่ที่ส่งเข้ามา มีวิธียกเลิกการเลือกแต่ละรายการอย่างชัดแจ้ง หากต้องการยกเลิกการเลือกแต่ละรายการ ให้เรียก setSelection()
ด้วยรายการเพื่อเลือกให้เสร็จสิ้น หากต้องการยกเลิกการเลือกองค์ประกอบทั้งหมด ให้โทรหา setSelection()
, setSelection(null)
หรือ setSelection([])
setSelection(selection_array)
- อาร์เรย์การเลือก
-
อาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้แถวและ/หรือคอลัมน์ที่เป็นตัวเลข
row
และcolumn
คือหมายเลขแถวหรือคอลัมน์ของ 0 ของรายการในตารางข้อมูลที่มีให้เลือก หากต้องการเลือกทั้งคอลัมน์ ให้ตั้งค่าrow
เป็น Null หากต้องการเลือกทั้งแถว ให้ตั้งค่า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)
- 2 อาร์เรย์
- อาร์เรย์ 2 มิติที่แต่ละแถวแสดงแถวในตารางข้อมูล หาก opt_firstRowIsData เป็นเท็จ (ค่าเริ่มต้น) ระบบจะตีความแถวแรกเป็นป้ายกํากับส่วนหัว ระบบจะตีความประเภทข้อมูลของแต่ละคอลัมน์โดยอัตโนมัติจากข้อมูลที่ให้ไว้ หากเซลล์ไม่มีค่า ให้ระบุค่า Null หรือค่าว่างตามความเหมาะสม
- opt_first แถวข้อมูล
- แถวแรกจะกําหนดแถวส่วนหัวหรือไม่ หากเป็นจริง ระบบจะถือว่าแถวทั้งหมดเป็นข้อมูล หากเป็นเท็จ แถวแรกจะถือเป็นแถวส่วนหัวและค่าจะได้รับการกําหนดเป็นป้ายกํากับคอลัมน์ ค่าเริ่มต้นเป็นเท็จ
การคืนสินค้า
DataTable
ใหม่
ตัวอย่าง
โค้ดต่อไปนี้แสดง 3 วิธีในการสร้างออบเจ็กต์ DataTable
เดียวกัน
// 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)
- แผนภูมิ_JSON_or_object
- สตริงตามตัวอักษร JSON หรือออบเจ็กต์ JavaScript ที่มีพร็อพเพอร์ตี้ต่อไปนี้ (คํานึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
พร็อพเพอร์ตี้ | ประเภท | ต้องใช้ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|---|
ประเภทแผนภูมิ | สตริง | ต้องใช้ | ไม่มี |
ชื่อคลาสของการแสดงภาพ ไม่ต้องระบุชื่อแพ็กเกจ google.visualization สําหรับแผนภูมิของ Google หากยังไม่ได้โหลดไลบรารีการแสดงภาพที่เหมาะสม วิธีนี้จะโหลดไลบรารีให้คุณหากเป็นการแสดงภาพของ Google คุณต้องโหลดการแสดงภาพของบุคคลที่สามอย่างชัดแจ้ง เช่น Table , PieChart , example.com.CrazyChart
|
รหัสคอนเทนเนอร์ | สตริง | ต้องใช้ | ไม่มี | รหัสขององค์ประกอบ DOM หน้าเว็บที่จะโฮสต์การแสดงภาพ |
ตัวเลือก | วัตถุ | ไม่บังคับ | ไม่มี |
ออบเจ็กต์ที่อธิบายตัวเลือกของการแสดงภาพ โดยจะใช้สัญพจน์แบบ JavaScript หรือให้แฮนเดิลกับออบเจ็กต์ก็ได้ ตัวอย่าง:
"options": {"width": 400, "height": 240,
"is3D": true, "title": "Company Performance"}
|
ตารางข้อมูล | วัตถุ | ไม่บังคับ | ไม่มี |
DataTable ที่ใช้ป้อนข้อมูลการแสดงภาพ ซึ่งอาจเป็นการแสดงสตริง JSON ตามตัวอักษรของ DataTable ตามที่อธิบายไว้ข้างต้น หรือแฮนเดิลของออบเจ็กต์ google.visualization.DataTable ที่มีการป้อนข้อมูล หรืออาร์เรย์ 2 มิติที่
arrayToDataTable(opt_firstRowIsData=false)
ยอมรับ
คุณต้องระบุพร็อพเพอร์ตี้นี้หรือพร็อพเพอร์ตี้ dataSourceUrl
|
URL แหล่งข้อมูล | สตริง | ไม่บังคับ | ไม่มี |
การค้นหาแหล่งข้อมูลที่จะป้อนข้อมูลแผนภูมิ (เช่น สเปรดชีต Google) คุณต้องระบุพร็อพเพอร์ตี้นี้หรือพร็อพเพอร์ตี้ dataTable
|
query | สตริง | ไม่บังคับ | ไม่มี |
หากระบุ dataSourceUrl คุณจะระบุสตริงการค้นหาที่คล้ายกับ SQL ได้โดยใช้ภาษาการค้นหาภาพเพื่อกรองหรือจัดการข้อมูล
|
รีเฟรชช่วงเวลา | ตัวเลข | ไม่บังคับ | ไม่มี |
ภาพควรรีเฟรชแหล่งที่มาของคําค้นหาบ่อยเพียงใดในไม่กี่วินาที ใช้เฉพาะเมื่อระบุ dataSourceUrl เท่านั้น
|
ดู | ออบเจ็กต์หรืออาร์เรย์ | ไม่บังคับ | ไม่มี |
ตั้งค่าออบเจ็กต์เริ่มต้น DataView ที่ทําหน้าที่เป็นตัวกรองของข้อมูลที่สําคัญซึ่งกําหนดโดยพารามิเตอร์ dataTable หรือ dataSourceUrl
คุณอาจส่งผ่านในสตริงหรือออบเจ็กต์เริ่มต้น DataView อย่างเช่น dataview.toJSON() ที่แสดงผลก็ได้
ตัวอย่าง: "view": {"columns": [1, 2]} คุณยังส่งผ่านอาร์เรย์ของออบเจ็กต์เริ่มต้น DataView ได้ด้วย ซึ่งในกรณีนี้ ระบบจะใช้ DataView แรกในอาร์เรย์กับข้อมูลที่สําคัญเพื่อสร้างตารางข้อมูลใหม่ และใช้ DataView รายการที่ 2 กับตารางข้อมูลที่เกิดจากการใช้ DataView แรก และอื่นๆ
|
ตัวอย่าง
สร้างแผนภูมิตามแหล่งข้อมูลสเปรดชีต และรวมการค้นหา ก A, ที่ไหน D > 100 คําสั่งซื้อโดย 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()
ซึ่งเป็นเครื่องมือสร้างองค์ประกอบแถบเครื่องมือที่สามารถแนบไปกับการแสดงภาพได้หลายรายการ แถบเครื่องมือนี้ช่วยให้ผู้ใช้ส่งออกข้อมูลการแสดงภาพเป็นรูปแบบต่างๆ หรือมอบการแสดงภาพที่ฝังได้สําหรับการใช้งานในตําแหน่งต่างๆ ดูหน้าแถบเครื่องมือสําหรับข้อมูลเพิ่มเติมและตัวอย่างโค้ด