แถบเครื่องมือ

  1. ภาพรวม
  2. ตัวอย่าง
  3. การใช้งาน
    1. ประเภทเอาต์พุต
    2. ไวยากรณ์
  4. นโยบายข้อมูล

ภาพรวม

คุณอาจเพิ่มองค์ประกอบแถบเครื่องมือลงในการแสดงภาพใดก็ได้เพื่อให้ผู้ใช้ส่งออกข้อมูลที่สําคัญไปยังไฟล์ 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()

ถ้าคุณต้องการจัดเตรียมคอมโพเนนต์ของ iGoogle หรือ 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 ตัวอย่างเช่น "ความกว้าง: 300px; ความสูง: 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);
};

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ สำหรับคอมโพเนนต์บางอย่าง ข้อมูลจะมาจากแหล่งข้อมูลที่เกี่ยวข้องซึ่งกำหนดให้กับแถบเครื่องมือ

การแปล

ขณะนี้แถบเครื่องมือรองรับเฉพาะภาษาอังกฤษแบบสหรัฐอเมริกาเท่านั้น