หน้านี้อธิบายวิธีใช้ Google Charts กับ Google สเปรดชีต
บทนํา
Google Charts และ Google สเปรดชีตมีการผสานรวมไว้อย่างดี คุณวางแผนภูมิใน Google สเปรดชีตไว้ในสเปรดชีตของ Google ได้ และแผนภูมิของ Google จะดึงข้อมูลออกจากสเปรดชีตของ Google ได้ เอกสารนี้แสดงวิธีดําเนินการทั้ง 2 อย่าง
ไม่ว่าคุณจะเลือกวิธีใดก็ตาม แผนภูมิของคุณจะเปลี่ยนแปลงทุกครั้งที่สเปรดชีตที่ใช้เปลี่ยนแปลง
การฝังแผนภูมิในสเปรดชีต
ใส่แผนภูมิในสเปรดชีตได้ง่ายๆ จากแถบเครื่องมือสเปรดชีต ให้เลือก "แทรก" แล้วเลือก "แผนภูมิ" คุณจะสามารถเลือกประเภทแผนภูมิและเลือกตัวเลือกต่างๆ ได้ ดังนี้
การสร้างแผนภูมิจากสเปรดชีตที่แยกต่างหาก
โดยทั่วไป ผู้ใช้สร้าง Google Charts ด้วยการป้อนข้อมูลตารางข้อมูลและวาดแผนภูมิโดยใช้ข้อมูลดังกล่าว หากต้องการดึงข้อมูลจากสเปรดชีต Google แทน คุณจะต้องค้นหาสเปรดชีตเพื่อดึงข้อมูลเพื่อสร้างแผนภูมิ ดังนี้
function drawChart() { var query = new google.visualization.Query(URL); query.send(handleQueryResponse); } function handleQueryResponse(response) { var data = response.getDataTable(); var chart = new google.visualization.ColumnChart(document.getElementById('columnchart')); chart.draw(data, null); }
เนื่องจาก Google สเปรดชีตรองรับภาษาในการค้นหาแผนภูมิของ Google สําหรับการจัดเรียงและกรองข้อมูล ระบบต่างๆ ที่รองรับภาษาในการค้นหาเป็นแหล่งข้อมูลได้
โปรดทราบว่าแผนภูมิไม่สามารถใช้สิทธิ์การดูของบุคคลเหล่านั้นโดยไม่ได้รับอนุญาตอย่างชัดแจ้ง สเปรดชีตต้องปรากฏต่อทุกคนหรือหน้าเว็บต้องได้ข้อมูลเข้าสู่ระบบจากผู้ใช้ปลายทางอย่างชัดเจนตามที่ระบุไว้ในส่วนการให้สิทธิ์ของหน้านี้
หากต้องการใช้สเปรดชีตของ Google เป็นแหล่งข้อมูล คุณจะต้องมี URL ของสเปรดชีตดังนี้
- เปิดสเปรดชีตที่มีอยู่ สเปรดชีตนี้ควรมีรูปแบบที่คาดไว้จากการแสดงภาพ และควรมีการตั้งค่าสิทธิ์การดูอย่างถูกต้อง (ดูสิทธิ์ "สาธารณะบนเว็บ" หรือ "ทุกคนที่มีลิงก์" จะเป็นเรื่องง่ายที่สุด และวิธีการในส่วนนี้จะถือว่าสเปรดชีตได้รับการตั้งค่าด้วยวิธีนี้ คุณจํากัดได้โดยคงสเปรดชีตไว้ "ส่วนตัว" และให้สิทธิ์การเข้าถึงบัญชี Google แต่ละบัญชี แต่คุณจะต้องปฏิบัติตามวิธีการให้สิทธิ์ด้านล่าง)
- คัดลอก URL จากเบราว์เซอร์ ดูช่วงแหล่งที่มาของคําค้นหาสําหรับรายละเอียดเกี่ยวกับการเลือกช่วงที่เฉพาะเจาะจง
- ระบุ URL ให้
google.visualization.Query()
การค้นหารองรับพารามิเตอร์ที่ไม่บังคับต่อไปนี้headers=N
: ระบุจํานวนแถวที่เป็นแถวส่วนหัว โดยที่ N เป็นจํานวนเต็มตั้งแต่ 0 ขึ้นไป ระบบจะนํารายการเหล่านี้ออกจากข้อมูลและจะกําหนดเป็นป้ายกํากับคอลัมน์ในตารางข้อมูล หากไม่ระบุพารามิเตอร์นี้ สเปรดชีตจะคาดคะเนจํานวนแถวที่เป็นแถวส่วนหัว โปรดทราบว่าหากคอลัมน์ทั้งหมดเป็นสตริงข้อมูล สเปรดชีตอาจประสบปัญหาในการระบุว่าแถวใดเป็นแถวส่วนหัวที่ไม่มีพารามิเตอร์นี้gid=N
: ระบุว่าจะชีตใดในเอกสารที่มีหลายชีตเพื่อลิงก์ ถ้าไม่ได้ลิงก์กับชีตแรก N คือหมายเลขรหัสของชีต คุณดูหมายเลขรหัสได้โดยไปที่ ชีตเวอร์ชันที่เผยแพร่แล้วและมองหาพารามิเตอร์gid=N
ใน URL คุณยังใช้พารามิเตอร์sheet
แทนพารามิเตอร์นี้ได้ด้วย Gotcha: Google สเปรดชีตอาจจัดเรียงพารามิเตอร์ gid ใน URL เมื่อดูในเบราว์เซอร์ หากคัดลอกจากเบราว์เซอร์ โปรดตรวจสอบว่าพารามิเตอร์ทั้งหมดก่อนเครื่องหมาย#
ของ URL ตัวอย่าง:gid=1545912003
sheet=sheet_name
: ระบุว่าชีตใดในเอกสารที่มีหลายชีตซึ่งคุณลิงก์อยู่ ในกรณีที่ไม่ได้ลิงก์กับชีตแรก sheet_name คือชื่อที่แสดงของชีต ตัวอย่าง:sheet=Sheet5
นี่คือตัวอย่างที่สมบูรณ์
ด้านล่างนี้คือ 2 วิธีในการวาดแผนภูมินี้ วิธีหนึ่งใช้พารามิเตอร์ gid
และอีกวิธีโดยใช้พารามิเตอร์ sheet
การป้อน URL ในเบราว์เซอร์จะให้ผลลัพธ์/ข้อมูลสําหรับแผนภูมิเดียวกัน
function drawGID() { var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8'); var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, { height: 400 }); }
function drawSheetName() { var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8'); var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString); query.send(handleSampleDataQueryResponse); } function handleSampleDataQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, { height: 400 }); }
ช่วงแหล่งที่มาของคําค้นหา
URL แหล่งที่มาของคําค้นหาจะระบุส่วนของสเปรดชีตที่จะใช้ในการค้นหา ได้แก่ เซลล์ ช่วงของเซลล์ แถว หรือคอลัมน์ หรือทั้งสเปรดชีต ระบุช่วงโดยใช้ไวยากรณ์ "range=<range_expr>" ตัวอย่างเช่น
https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
ต่อไปนี้เป็นตัวอย่างที่แสดงไวยากรณ์
A1:B10
- ช่วงจากเซลล์ A1 ถึง B105:7
- แถว 5-7D:F
- คอลัมน์ D-FA:A70
- 70 เซลล์แรกในคอลัมน์ A-
A70:A
- คอลัมน์ A จากแถว 70 ถึงจุดสิ้นสุด B5:5
- B5 ถึงจุดสิ้นสุดของแถว 5D3:D
- D3 ถึงจุดสิ้นสุดของคอลัมน์ DC:C10
- ตั้งแต่จุดเริ่มต้นของคอลัมน์ C ถึง C10
การให้สิทธิ์
Google ชีตต้องใช้ข้อมูลเข้าสู่ระบบของผู้ใช้ปลายทางเพื่อเข้าถึงสเปรดชีตส่วนตัวผ่าน Googleภาพ API ("/คําขอ tq")หมายเหตุ: สเปรดชีตที่แชร์ไปยัง "ทุกคนที่มีลิงก์จะดู" ไม่จําเป็นต้องระบุข้อมูลเข้าสู่ระบบ การเปลี่ยนการตั้งค่าการแชร์ของสเปรดชีตนั้นง่ายกว่าการใช้การให้สิทธิ์
ในกรณีที่ไม่สามารถแชร์ลิงก์ได้ นักพัฒนาแอปจะต้องเปลี่ยนโค้ดเพื่อส่งผ่านข้อมูลเข้าสู่ระบบ OAuth 2.0 ที่ได้รับอนุญาตให้ใช้สําหรับขอบเขต Google Sheets API (https://www.googleapis.com/auth/spreadsheets)
ข้อมูลเบื้องต้นเกี่ยวกับ OAuth 2.0 อยู่ในการใช้ OAuth 2.0 เพื่อเข้าถึง Google API
ตัวอย่าง: การใช้ OAuth เพื่อเข้าถึง /gviz/tq
สิ่งที่ต้องทําก่อน: รับรหัสไคลเอ็นต์จาก Google Developer Console
ดูวิธีการโดยละเอียดเกี่ยวกับการผสานรวมแพลตฟอร์ม Identity ของ Google ได้ที่ Google Sign-In และการสร้างโปรเจ็กต์คอนโซล Google API และรหัสไคลเอ็นต์
หากต้องการขอรับโทเค็น OAuth สําหรับผู้ใช้ปลายทาง คุณต้องลงทะเบียนโปรเจ็กต์กับ Google Developer Console ก่อน แล้วขอรับรหัสไคลเอ็นต์
- สร้างรหัสไคลเอ็นต์ OAuth ใหม่จากคอนโซลนักพัฒนาแอป
- เลือกเว็บแอปพลิเคชันเป็นประเภทแอปพลิเคชัน
- เลือกชื่อใดก็ได้เพื่อใช้เป็นข้อมูลเท่านั้น
- เพิ่มชื่อโดเมน (และโดเมนทดสอบทั้งหมด) เป็นต้นทาง JavaScript ที่ได้รับอนุญาต
- เว้น URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตว่างไว้
หลังจากคลิก "สร้าง" ให้คัดลอกรหัสไคลเอ็นต์เพื่อใช้อ้างอิงในอนาคต ไม่จําเป็นต้องมีรหัสลับไคลเอ็นต์สําหรับแบบฝึกหัดนี้
อัปเดตเว็บไซต์เพื่อรับข้อมูลเข้าสู่ระบบ OAuth
Google มีไลบรารี gapi.auth
ที่ช่วยให้กระบวนการรับข้อมูลเข้าสู่ระบบ OAuth ง่ายขึ้นเป็นอย่างมาก ตัวอย่างโค้ดด้านล่างใช้ไลบรารีนี้เพื่อรับข้อมูลเข้าสู่ระบบ (ขอสิทธิ์ (หากจําเป็น) และส่งข้อมูลเข้าสู่ระบบที่ได้ไปยังปลายทาง /gviz/tq
<html> <body> <button id="authorize-button" style="visibility: hidden">Authorize</button> <script src="./demo.js" type="text/javascript"></script> <script src="https://apis.google.com/js/auth.js?onload=init"></script> </body> </html>demo.js
// NOTE: You must replace the client id on the following line. var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com'; var scopes = 'https://www.googleapis.com/auth/spreadsheets'; function init() { gapi.auth.authorize( {client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); } function handleAuthResult(authResult) { var authorizeButton = document.getElementById('authorize-button'); if (authResult && !authResult.error) { authorizeButton.style.visibility = 'hidden'; makeApiCall(); } else { authorizeButton.style.visibility = ''; authorizeButton.onclick = handleAuthClick; } } function handleAuthClick(event) { gapi.auth.authorize( {client_id: clientId, scope: scopes, immediate: false}, handleAuthResult); return false; } function makeApiCall() { // Note: The below spreadsheet is "Public on the web" and will work // with or without an OAuth token. For a better test, replace this // URL with a private spreadsheet. var tqUrl = 'https://docs.google.com/spreadsheets' + '/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' + '?tqx=responseHandler:handleTqResponse' + '&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token); document.write('<script src="' + tqUrl +'" type="text/javascript"></script>'); } function handleTqResponse(resp) { document.write(JSON.stringify(resp)); }
เมื่อการให้สิทธิ์สําเร็จ gapi.auth.getToken()
จะแสดงรายละเอียดข้อมูลเข้าสู่ระบบทั้งหมด รวมถึง access_token
ที่ต่อท้ายคําขอ /gviz/tq ได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ไลบรารี Gapi สําหรับการตรวจสอบสิทธิ์ได้ที่
- การตรวจสอบสิทธิ์โดยใช้ไลบรารีของไคลเอ็นต์ Google API สําหรับ JavaScript
- วิธีใช้ CORS เพื่อเข้าถึง Google API
การใช้ขอบเขต drive.file
ตัวอย่างก่อนหน้านี้ใช้ขอบเขต Google Sheets API ซึ่งให้สิทธิ์การอ่านและเขียนเนื้อหาสเปรดชีตทั้งหมดของผู้ใช้ การดําเนินการนี้อาจให้สิทธิ์มากกว่าที่จําเป็น โดยขึ้นอยู่กับแอปพลิเคชัน สําหรับการเข้าถึงแบบอ่านอย่างเดียว ให้ใช้ขอบเขต spreadsheets.readonly ซึ่งให้สิทธิ์เข้าถึงชีตแบบอ่านอย่างเดียวและพร็อพเพอร์ตี้ของผู้ใช้
ขอบเขต drive.file (https://www.googleapis.com/auth/drive.file) ให้สิทธิ์เข้าถึงเฉพาะไฟล์ ที่ผู้ใช้เห็นอย่างชัดเจนด้วยเครื่องมือเลือกไฟล์ของ Google ไดรฟ์ ซึ่งเปิดตัวผ่าน SELECTer API
การใช้เครื่องมือเลือกจะเปลี่ยนขั้นตอนของแอปพลิเคชัน แทนที่จะวาง URL หรือมีสเปรดชีตที่ฮาร์ดโค้ดเหมือนในตัวอย่างด้านบน ผู้ใช้ต้องใช้กล่องโต้ตอบเครื่องมือเลือกเพื่อเลือกสเปรดชีตที่ต้องการให้หน้าเว็บเข้าถึง ทําตามตัวอย่าง "สวัสดีโลก" ของเครื่องมือเลือก โดยใช้ google.picker.ViewId.SPREADSHEETS
แทน google.picker.ViewId.PHOTOS