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

  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()

หากคุณต้องการระบุคอมโพเนนต์ของ 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);
};

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

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

การแปล

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