Google Spreadsheets

หน้านี้อธิบายวิธีใช้ Google Charts กับ Google สเปรดชีต

  1. บทนำ
  2. การฝังแผนภูมิในสเปรดชีต
  3. การสร้างแผนภูมิจากสเปรดชีตที่แยกต่างหาก

บทนํา

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 ของสเปรดชีตดังนี้

  1. เปิดสเปรดชีตที่มีอยู่ สเปรดชีตนี้ควรมีรูปแบบที่คาดไว้จากการแสดงภาพ และควรมีการตั้งค่าสิทธิ์การดูอย่างถูกต้อง (ดูสิทธิ์ "สาธารณะบนเว็บ" หรือ "ทุกคนที่มีลิงก์" จะเป็นเรื่องง่ายที่สุด และวิธีการในส่วนนี้จะถือว่าสเปรดชีตได้รับการตั้งค่าด้วยวิธีนี้ คุณจํากัดได้โดยคงสเปรดชีตไว้ "ส่วนตัว" และให้สิทธิ์การเข้าถึงบัญชี Google แต่ละบัญชี แต่คุณจะต้องปฏิบัติตามวิธีการให้สิทธิ์ด้านล่าง)
  2. คัดลอก URL จากเบราว์เซอร์ ดูช่วงแหล่งที่มาของคําค้นหาสําหรับรายละเอียดเกี่ยวกับการเลือกช่วงที่เฉพาะเจาะจง
  3. ระบุ 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 ในเบราว์เซอร์จะให้ผลลัพธ์/ข้อมูลสําหรับแผนภูมิเดียวกัน

GID
    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 ถึง B10
  • 5:7 - แถว 5-7
  • D:F - คอลัมน์ D-F
  • A:A70 - 70 เซลล์แรกในคอลัมน์ A
  • A70:A - คอลัมน์ A จากแถว 70 ถึงจุดสิ้นสุด
  • B5:5 - B5 ถึงจุดสิ้นสุดของแถว 5
  • D3:D - D3 ถึงจุดสิ้นสุดของคอลัมน์ D
  • C: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 ก่อน แล้วขอรับรหัสไคลเอ็นต์

  1. สร้างรหัสไคลเอ็นต์ OAuth ใหม่จากคอนโซลนักพัฒนาแอป
  2. เลือกเว็บแอปพลิเคชันเป็นประเภทแอปพลิเคชัน
  3. เลือกชื่อใดก็ได้เพื่อใช้เป็นข้อมูลเท่านั้น
  4. เพิ่มชื่อโดเมน (และโดเมนทดสอบทั้งหมด) เป็นต้นทาง JavaScript ที่ได้รับอนุญาต
  5. เว้น URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตว่างไว้

หลังจากคลิก "สร้าง" ให้คัดลอกรหัสไคลเอ็นต์เพื่อใช้อ้างอิงในอนาคต ไม่จําเป็นต้องมีรหัสลับไคลเอ็นต์สําหรับแบบฝึกหัดนี้

อัปเดตเว็บไซต์เพื่อรับข้อมูลเข้าสู่ระบบ OAuth

Google มีไลบรารี gapi.auth ที่ช่วยให้กระบวนการรับข้อมูลเข้าสู่ระบบ OAuth ง่ายขึ้นเป็นอย่างมาก ตัวอย่างโค้ดด้านล่างใช้ไลบรารีนี้เพื่อรับข้อมูลเข้าสู่ระบบ (ขอสิทธิ์ (หากจําเป็น) และส่งข้อมูลเข้าสู่ระบบที่ได้ไปยังปลายทาง /gviz/tq

demo.html 
<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 สําหรับการตรวจสอบสิทธิ์ได้ที่

การใช้ขอบเขต 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