หน้านี้พูดถึงการแสดงข้อมูลภายในที่แผนภูมิใช้ คลาส DataTable
และ DataView
ที่ใช้เพื่อส่งข้อมูลไปยังแผนภูมิ รวมถึงวิธีการต่างๆ ในการป้อนข้อมูลและเติมข้อมูล DataTable
เนื้อหา
- วิธีแสดงข้อมูลในแผนภูมิ
- แผนภูมิของฉันใช้แผนภูมิตารางใด
- ตารางข้อมูลและมุมมองข้อมูล
- การสร้างและป้อนข้อมูลตาราง
- dataTableToCsv()
- ข้อมูลเพิ่มเติม
วิธีการแสดงข้อมูลในแผนภูมิ
แผนภูมิทั้งหมดจัดเก็บข้อมูลในตาราง ต่อไปนี้คือการนําเสนอตารางข้อมูล 2 คอลัมน์ที่มีการป้อนข้อมูล
ดัชนี: 0 |
ดัชนี: 1 ประเภท: ตัวเลข ป้ายกํากับ: 'ชั่วโมงต่อวัน' |
---|---|
"ที่ทํางาน" | 11 |
"กิน" | 2 |
"การเดินทาง" | 2 |
"ดูทีวี" | 2 |
"นอนหลับ" | 7 |
ข้อมูลจะจัดเก็บอยู่ในเซลล์ที่อ้างอิงเป็น (row, column) โดยrow เป็นดัชนีแถวฐาน 0 และ column เป็นดัชนีคอลัมน์ 0 หรือรหัสที่ไม่ซ้ํากันที่คุณระบุได้
ต่อไปนี้คือรายการองค์ประกอบและพร็อพเพอร์ตี้ที่รองรับที่สมบูรณ์มากขึ้นของตาราง ดูรายละเอียดเพิ่มเติมได้ในรูปแบบพารามิเตอร์ JavaScript รูปตัวสร้าง
- ตาราง - อาร์เรย์ของคอลัมน์และแถว รวมถึงแผนที่ที่ไม่บังคับสําหรับคู่ชื่อ/ค่าที่กําหนดเองซึ่งคุณกําหนดได้ แผนภูมิไม่ได้ใช้พร็อพเพอร์ตี้ระดับตารางในขณะนี้
- คอลัมน์ - แต่ละคอลัมน์รองรับประเภทข้อมูลที่ต้องระบุ รวมทั้งป้ายกํากับสตริง รหัส รูปแบบ และแผนที่ของพร็อพเพอร์ตี้ชื่อ/ค่าที่กําหนดเอง ป้ายกํากับเป็นสตริงที่เป็นมิตรกับผู้ใช้ซึ่งแผนภูมิแสดงได้ รหัสคือตัวระบุที่ไม่บังคับซึ่งใช้แทนดัชนีคอลัมน์ได้ คอลัมน์อาจอยู่ในโค้ดตามดัชนีเลข 0 หรือรหัสที่ไม่บังคับ ก็ได้ โปรดดูรายการประเภทข้อมูลที่รองรับที่
DataTable.addColumn()
- แถว - แถวคืออาร์เรย์ของเซลล์ รวมถึงแผนที่ที่ไม่บังคับสําหรับคู่ชื่อ/ค่าที่กําหนดเองซึ่งคุณกําหนดได้
- เซลล์ - แต่ละเซลล์เป็นออบเจ็กต์ที่มีค่าจริงของประเภทคอลัมน์ รวมถึงค่าเวอร์ชันจัดรูปแบบที่ไม่บังคับ (ไม่บังคับ) ที่คุณระบุ เช่น คอลัมน์ตัวเลขอาจกําหนดค่า 7 และค่าที่มีการจัดรูปแบบ "7"
แผนภูมิของฉันใช้สคีมาของตารางใด
แผนภูมิต่างๆ จะใช้ตารางในรูปแบบที่ต่างกัน เช่น แผนภูมิวงกลมต้องการตาราง 2 คอลัมน์ที่มีคอลัมน์สตริงและคอลัมน์ตัวเลข โดยแต่ละแถวจะอธิบายถึงส่วนแบ่ง และคอลัมน์แรกคือป้ายกํากับชิ้นส่วน และคอลัมน์ที่ 2 คือค่าส่วนแบ่ง แต่คาดว่าแผนภูมิกระจายจะมีตารางที่ประกอบด้วยคอลัมน์ตัวเลข 2 คอลัมน์ โดยแต่ละแถวคือจุด และ 2 คอลัมน์คือค่า X และ Y ของจุด อ่านเอกสารประกอบของแผนภูมิเพื่อดูรูปแบบข้อมูลที่ต้องการ
ตารางข้อมูลและมุมมองข้อมูล
ตารางข้อมูลแผนภูมิจะแสดงใน JavaScript ตามออบเจ็กต์ DataTable
หรือออบเจ็กต์ DataView
ในบางกรณี คุณอาจเห็น DataTable เวอร์ชัน JavaScript หรือ Lite โดยเฉพาะ เช่น เมื่อข้อมูลถูกส่งผ่านอินเทอร์เน็ตโดยแหล่งข้อมูลของเครื่องมือแผนภูมิ หรือเป็นอินพุตอินพุตสําหรับ ChartWrapper
ระบบจะใช้ DataTable
เพื่อสร้างตารางข้อมูลต้นฉบับ DataView
เป็นคลาสความสะดวกที่ให้มุมมองอ่านอย่างเดียวของ DataTable
พร้อมวิธีการซ่อนหรือเรียงลําดับแถวหรือคอลัมน์ใหม่อย่างรวดเร็วโดยไม่ต้องแก้ไขข้อมูลต้นฉบับที่ลิงก์ นี่คือการเปรียบเทียบคร่าวๆ ของ 2 ชั้นเรียนนี้
ตารางข้อมูล | มุมมองข้อมูล |
---|---|
อ่าน/เขียน | อ่านอย่างเดียว |
สามารถสร้างที่ว่างเปล่าและป้อนข้อมูล | เป็นการอ้างอิงไปยัง DataTable ที่มีอยู่ ป้อนข้อมูลใหม่ตั้งแต่ต้นไม่ได้ ต้องสร้างอินสแตนซ์ด้วยการอ้างอิง DataTable ที่มีอยู่ |
ข้อมูลใช้พื้นที่เก็บข้อมูล | ข้อมูลเป็นการอ้างอิงไปยัง DataTable ที่มีอยู่ และไม่ใช้พื้นที่เก็บข้อมูล |
เพิ่ม/แก้ไข/ลบแถว คอลัมน์ และข้อมูลได้ และการเปลี่ยนแปลงทั้งหมดจะมีผล | จัดเรียงหรือกรองแถวได้โดยไม่ต้องแก้ไขข้อมูลพื้นฐาน คุณสามารถซ่อนและแสดงแถวและคอลัมน์ได้ซ้ําๆ |
โคลนได้ | แสดงผลเวอร์ชัน DataTable ได้ |
เป็นแหล่งข้อมูล ไม่มีการอ้างอิง | การอ้างอิงสดไปยัง DataTable การเปลี่ยนแปลงใดๆ ในข้อมูล DataTable จะแสดงในข้อมูลพร็อพเพอร์ตี้ทันที |
ส่งผ่านไปยังแผนภูมิเป็นแหล่งข้อมูลได้ | ส่งผ่านไปยังแผนภูมิเป็นแหล่งข้อมูลได้ |
ไม่รองรับคอลัมน์ที่คํานวณ | รองรับคอลัมน์ที่คํานวณ ซึ่งเป็นคอลัมน์ที่มีค่าที่คํานวณได้ทันทีด้วยการรวมหรือดัดแปลงคอลัมน์อื่นๆ |
ไม่มีแถวหรือคอลัมน์ซ่อนอยู่ | ซ่อนหรือแสดงคอลัมน์ที่เลือกได้ |
การสร้างและป้อนข้อมูลตารางข้อมูล
การสร้างและป้อนข้อมูลตารางมีหลายวิธี ดังนี้
- สร้าง DataTable ใหม่ จากนั้นเรียก addColumn()/addRows()/addRow()/setCell()
- arrayToDataTable()
- ตัวเริ่มต้น JavaScript จริง
- การส่งคําค้นหาแหล่งข้อมูล
ตารางข้อมูลว่างเปล่า + addColumn()/addRows()/addRow()/setCell()
ขั้นตอน
- สร้างอินสแตนซ์
DataTable
ใหม่ - เพิ่มคอลัมน์
- เพิ่มแถวอย่างน้อย 1 แถว และป้อนข้อมูลหรือไม่ก็ได้ คุณเพิ่มแถวว่างและป้อนข้อมูลในภายหลังได้ คุณยังสามารถเพิ่มหรือนําแถวเพิ่มเติมออก หรือแก้ไขค่าของเซลล์ทีละรายการได้ด้วย
ข้อดี
- คุณจะระบุประเภทข้อมูลและป้ายกํากับของแต่ละคอลัมน์ได้
- เหมาะสําหรับการสร้างตารางในเบราว์เซอร์ และมีแนวโน้มที่จะสะกดผิดน้อยกว่าเมธอด JSON แบบลิเทอรัล
ข้อเสีย
- ไม่มีประโยชน์เท่ากับการสร้างสตริงสัญพจน์ JSON เพื่อส่งผ่านไปยังเครื่องมือสร้าง DataTable เมื่อสร้างหน้าเว็บบนเว็บเซิร์ฟเวอร์โดยใช้โปรแกรม
- ขึ้นอยู่กับความเร็วของเบราว์เซอร์ และอาจช้ากว่าสตริง JSON ตามตัวอักษรซึ่งมีตารางขนาดใหญ่ (ประมาณ 1,000 เซลล์)
ตัวอย่างเช่น
ต่อไปนี้เป็นตัวอย่างการสร้างตารางข้อมูลเดียวกันโดยใช้เทคนิคต่างๆ กัน
// ------- Version 1------------ // Add rows + data at the same time // ----------------------------- var data = new google.visualization.DataTable(); // Declare columns data.addColumn('string', 'Employee Name'); data.addColumn('datetime', 'Hire Date'); // Add data. data.addRows([ ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values. ['Bob', new Date(2007,5,1)], // More typically this would be done using a ['Alice', new Date(2006,7,16)], // formatter. ['Frank', new Date(2007,11,28)], ['Floyd', new Date(2005,3,13)], ['Fritz', new Date(2011,6,1)] ]); // ------- Version 2------------ // Add empty rows, then populate // ----------------------------- var data = new google.visualization.DataTable(); // Add columns data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); // Add empty rows data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'}); 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));
อาร์เรย์ไปยังตารางข้อมูล()
ฟังก์ชันตัวช่วยนี้จะสร้างและกรอก DataTable
โดยใช้การโทรครั้งเดียว
ข้อดี
- โค้ดนี้อ่านได้ง่ายและเข้าใจง่ายมากในเบราว์เซอร์
- คุณจะระบุประเภทข้อมูลของแต่ละคอลัมน์อย่างชัดแจ้ง หรือให้ Google Charts อนุมานประเภทจากข้อมูลที่ส่งผ่านก็ได้
- หากต้องการระบุประเภทข้อมูลของคอลัมน์อย่างชัดแจ้ง ให้ระบุออบเจ็กต์ในแถวส่วนหัวด้วยพร็อพเพอร์ตี้
type
- หากต้องการให้ Google Charts อนุมานประเภท ให้ใช้สตริงสําหรับป้ายกํากับคอลัมน์
- หากต้องการระบุประเภทข้อมูลของคอลัมน์อย่างชัดแจ้ง ให้ระบุออบเจ็กต์ในแถวส่วนหัวด้วยพร็อพเพอร์ตี้
ตัวอย่างเช่น
var data = google.visualization.arrayToDataTable([ ['Employee Name', 'Salary'], ['Mike', {v:22500, f:'22,500'}], // Format as "22,500". ['Bob', 35000], ['Alice', 44000], ['Frank', 27000], ['Floyd', 92000], ['Fritz', 18500] ], false); // 'false' means that the first row contains labels, not data.
var data = google.visualization.arrayToDataTable([ [ {label: 'Year', id: 'year'}, {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type. {label: 'Expenses', id: 'Expenses', type: 'number'} ], ['2014', 1000, 400], ['2015', 1170, 460], ['2016', 660, 1120], ['2017', 1030, 540]]);
เครื่องมือเริ่มต้น JavaScript จริง
คุณสามารถส่งออบเจ็กต์สัญพจน์ JavaScript ไปยังเครื่องมือสร้างตาราง กําหนดสคีมาของตาราง และข้อมูลหรือไม่ก็ได้
ข้อดี
- มีประโยชน์เมื่อสร้างข้อมูลบนเว็บเซิร์ฟเวอร์
- ประมวลผลเร็วกว่าวิธีการอื่นๆ สําหรับตารางขนาดใหญ่ (ประมาณ 1,000 เซลล์)
ข้อเสีย
- ไวยากรณ์เป็นเรื่องซับซ้อนและมีแนวโน้มที่จะพิมพ์ผิด
- โค้ดอ่านได้ยาก
- คล้ายๆ กับแต่ไม่เหมือนกันทุกประการกับ JSON
ตัวอย่างเช่น
var data = new google.visualization.DataTable( { cols: [{id: 'task', label: 'Employee Name', type: 'string'}, {id: 'startDate', label: 'Start Date', type: 'date'}], rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]}, {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]}, {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]}, {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]}, {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]}, {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]} ] } )
การส่งคําค้นหาแหล่งข้อมูล
เมื่อส่งคําค้นหาไปยังแหล่งข้อมูลของแผนภูมิ การตอบกลับที่สําเร็จจะเป็นอินสแตนซ์ DataTable คุณคัดลอก แก้ไข หรือคัดลอก DataTable ที่แสดงผลนี้ไปยัง DataView ได้เช่นเดียวกับ DataTable อื่นๆ
function drawVisualization() { var query = new google.visualization.Query( 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); // Apply query language statement. query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); // Send the query with a callback function. query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); visualization = new google.visualization.LineChart(document.getElementById('visualization')); visualization.draw(data, {legend: 'bottom'}); }
dataTableToCsv()
ฟังก์ชันgoogle.visualization.dataTableToCsv(
ข้อมูล)
ของผู้ช่วยจะแสดงสตริง CSV ที่มีข้อมูลจากตารางข้อมูล
อินพุตของฟังก์ชันนี้อาจเป็นตารางข้อมูลหรือ DataView
โดยจะใช้ค่าที่จัดรูปแบบของเซลล์ ระบบจะไม่สนใจป้ายกํากับคอลัมน์
สัญลักษณ์พิเศษ เช่น ",
" และ "\n
" กําหนดเป็นอักขระหลีกโดยใช้กฎการใช้ Escape แบบมาตรฐาน CSV
โค้ดต่อไปนี้จะแสดง
Ramanujan,1729
Gauss,5050
ในคอนโซล JavaScript ของเบราว์เซอร์
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Ramanujan', 1729], ['Gauss', 5050] ]); var csv = google.visualization.dataTableToCsv(data); console.log(csv); } </script> </head> </html>
ข้อมูลเพิ่มเติม
- การค้นหาแหล่งข้อมูลของแผนภูมิ
- ไวยากรณ์ตามตัวอักษรของ JavaScript ในตารางข้อมูล
- ข้อมูลอ้างอิง
DataTable
- ข้อมูลอ้างอิง
DataView
- ข้อมูลอ้างอิงเกี่ยวกับ
arrayToDataTable()