ภาพรวม
คุณสามารถเพิ่มองค์ประกอบแถบเครื่องมือในการแสดงภาพเพื่อให้ผู้ใช้ส่งออกข้อมูลที่สําคัญไปยังไฟล์ CSV หรือตาราง HTML หรือระบุโค้ดเพื่อฝังการแสดงภาพลงในหน้าเว็บหรือแกดเจ็ตที่กําหนดเองได้
โดย Google
ตัวอย่าง
เลือกตัวเลือกใดตัวเลือกหนึ่งในแถบเครื่องมือ
<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']}); var visualization; function draw() { drawVisualization(); drawToolbar(); } function drawVisualization() { var container = document.getElementById('visualization_div'); visualization = new google.visualization.PieChart(container); new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'). send(queryCallback); } function queryCallback(response) { visualization.draw(response.getDataTable(), {is3D: true}); } function drawToolbar() { var components = [ {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}}, {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}, style: 'width: 800px; height: 700px; border: 3px solid purple;'} ]; var container = document.getElementById('toolbar_div'); google.visualization.drawToolbar(container, components); }; google.charts.setOnLoadCallback(draw); </script> </head> <body> <div id="visualization_div" style="width: 270px; height: 200px;"></div> <div id="toolbar_div"></div> </body> </html>
การใช้งาน
เพิ่มแถบเครื่องมือลงในหน้าเว็บโดยเรียกใช้เมธอด google.visualization.drawToolbar()
ป้อนข้อมูลด้วยประเภทการส่งออกที่อนุญาตและข้อมูลที่ต้องระบุสําหรับแต่ละประเภท
หากต้องการใช้แถบเครื่องมือ การแสดงภาพต้องได้รับข้อมูลจาก URL โดยคุณจะส่งผ่านในออบเจ็กต์ DataTable หรือ DataView ที่มีการป้อนข้อมูลด้วยมือไม่ได้ คุณจะส่ง URL ของข้อมูลที่ใช้ป้อนข้อมูลการแสดงภาพลงในเมธอด drawToolbar()
หากคุณต้องการระบุคอมโพเนนต์ของ iframe หรือ iframe ที่ฝังได้ซึ่งฝังแกดเจ็ตไว้ คุณต้องมี URL สําหรับการแสดงภาพเวอร์ชันแกดเจ็ต
ประเภทเอาต์พุต
แถบเครื่องมือให้ผู้ใช้เลือกประเภทเอาต์พุตต่อไปนี้ได้อย่างน้อย 1 ประเภท ขึ้นอยู่กับวิธีที่คุณกําหนดค่าแถบเครื่องมือในเมธอด drawToolbar()
- ข้อมูลเวอร์ชัน CSV แบบง่าย (ซึ่งเบราว์เซอร์จะแสดงผลหรือเสนอให้ดาวน์โหลดและบันทึก ทั้งนี้ขึ้นอยู่กับการกําหนดค่าเบราว์เซอร์และ/หรือ
- ตาราง HTML ที่รวบรวมข้อมูล เปิดในหน้าต่างเบราว์เซอร์ใหม่ และ/หรือ
- โค้ด HTML <iframe> เพื่อฝังการแสดงภาพนี้ในหน้าเว็บ และ/หรือ
- ลิงก์ที่ไปยังหน้าเว็บที่ช่วยให้ผู้ใช้ฝังแกดเจ็ตนี้ในหน้า iGoogle ได้
ไวยากรณ์
google.visualization.drawToolbar(container, components)
พารามิเตอร์
- คอนเทนเนอร์
- แฮนเดิลขององค์ประกอบ DOM ในหน้าเว็บ API จะวาดแถบเครื่องมือลงในองค์ประกอบนี้ ซึ่งคล้ายกับพารามิเตอร์คอนเทนเนอร์สําหรับการแสดงภาพมาตรฐาน คุณควรวางแถบเครื่องมือถัดจากการแสดงภาพที่ใช้แถบเครื่องมือนั้น
- คอมโพเนนต์
- อาร์เรย์ของออบเจ็กต์ โดยแต่ละรายการอธิบายรูปแบบที่ข้อมูลหรือการแสดงภาพส่งออกได้ แถบเครื่องมือจะแสดงตัวเลือกแก่ผู้ใช้ตามลําดับที่เพิ่มในอาร์เรย์ ออบเจ็กต์แต่ละรายการมีพร็อพเพอร์ตี้ประเภทที่อธิบายรูปแบบ และพร็อพเพอร์ตี้เพิ่มเติมอย่างน้อย 1 รายการ ทั้งนี้ขึ้นอยู่กับประเภทนั้นๆ
type: 'csv'
- ตัวเลือกนี้จะส่งออกข้อมูลไปยังไฟล์ค่าที่คั่นด้วยคอมมา กล่องโต้ตอบ "บันทึกเป็น" จะเปิดขึ้นในเบราว์เซอร์- datasource: 'string' - URL แหล่งข้อมูล
type: html'
- ตัวเลือกนี้จะส่งออกข้อมูลไปยังตาราง HTML หน้าที่มีตารางข้อมูลจะเปิดขึ้นในหน้าต่างใหม่ในเบราว์เซอร์- datasource: สตริง URL ของแหล่งข้อมูล
type: igoogle
- ตัวเลือกนี้ช่วยให้ผู้ใช้เพิ่มการแสดงภาพในหน้า iGoogle ของตนได้ หน้า "เพิ่มลงใน iGoogle" จะเปิดขึ้นในเบราว์เซอร์ ใช้ตัวเลือกนี้เฉพาะเมื่อการแสดงภาพพร้อมใช้งานในเวอร์ชันแกดเจ็ต- datasource: สตริง URL ของแหล่งข้อมูล
- แกดเจ็ต: สตริง URL ของ XML เวอร์ชันแกดเจ็ต โปรดทราบว่าการแสดงภาพที่เชื่อมโยงกับแถบเครื่องมือไม่จําเป็นต้องเป็นเวอร์ชันแกดเจ็ต
- userprefs: ออบเจ็กต์ค่ากําหนดที่ไม่บังคับสําหรับการแสดงภาพนี้ โดยระบุค่ากําหนดการแสดงภาพ
type: htmlcode
- ตัวเลือกนี้จะสร้างการบล็อกโค้ด HTML ที่ผู้ใช้ฝังในหน้าเว็บเพื่อแสดงภาพภายใน iframe ได้ หน้าต่างป๊อปอัปที่มีองค์ประกอบ html ที่ถูกต้องของแกดเจ็ตจะเปิดขึ้นในเบราว์เซอร์ ใช้ตัวเลือกนี้เฉพาะเมื่อการแสดงภาพพร้อมใช้งานในเวอร์ชันแกดเจ็ตเท่านั้น- datasource: สตริง URL ของแหล่งข้อมูล
- แกดเจ็ต: สตริง URL ของ XML สําหรับแกดเจ็ต
- userprefs: ออบเจ็กต์ค่ากําหนดที่ไม่บังคับสําหรับการแสดงภาพนี้ โดยระบุค่ากําหนดการแสดงภาพ
- style: สตริงที่ไม่บังคับสําหรับรูปแบบ iframe เช่น 'width: 300px; height: 500px;'
ตัวอย่าง
function drawToolbar() { var components = [ {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}}, {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml'} ]; var container = document.getElementById('toolbar_div'); google.visualization.drawToolbar(container, components); };
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ สําหรับบางคอมโพเนนต์ ระบบจะนําข้อมูลมาจากแหล่งข้อมูลที่เกี่ยวข้องให้กับแถบเครื่องมือ
การแปล
ขณะนี้แถบเครื่องมือรองรับเฉพาะภาษาอังกฤษแบบสหรัฐอเมริกาเท่านั้น