Toolbar

Ringkasan

Anda dapat menambahkan elemen toolbar ke visualisasi apa pun agar pengguna dapat mengekspor data pokok ke file CSV atau tabel HTML, atau menyediakan kode untuk menyematkan visualisasi ke halaman atau gadget arbitrer.

Oleh: Google

Contoh

Pilih salah satu opsi di toolbar.

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

Penggunaan

Tambahkan toolbar ke halaman Anda dengan memanggil metode google.visualization.drawToolbar(), mengisinya dengan jenis ekspor yang diizinkan, dan data yang diperlukan untuk setiap ekspor.

Untuk menggunakan toolbar, visualisasi Anda harus mendapatkan datanya dari URL; Anda tidak boleh meneruskan objek DataTable atau DataView yang diisi tangan. Anda akan meneruskan URL data yang digunakan untuk mengisi visualisasi ke metode drawToolbar().

Jika ingin menyediakan komponen iGoogle atau iFrame yang dapat disematkan yang menampung gadget, Anda harus memiliki URL untuk versi visualisasi gadget.

Jenis Output

Toolbar dapat menawarkan pilihan satu atau beberapa jenis output berikut kepada pengguna, bergantung pada cara Anda mengonfigurasi toolbar dalam metode drawToolbar():

  • Data CSV versi sederhana (yang akan dirender atau ditawarkan oleh browser untuk didownload dan disimpan, bergantung pada konfigurasi browser Anda, dan/atau
  • Tabel HTML yang menyimpan data, dibuka di jendela browser baru, dan/atau
  • Kode <iframe> HTML untuk menyematkan visualisasi ini di halaman web, dan/atau
  • Tautan ke halaman yang memungkinkan pengguna menyematkan gadget ini di halaman iGoogle.

Sintaksis

google.visualization.drawToolbar(container, components)

Parameter

penampung
Handle ke elemen DOM pada halaman. API akan menggambar toolbar ke dalam elemen ini. Parameter ini mirip dengan parameter penampung untuk visualisasi standar. Anda harus menempatkan toolbar di samping visualisasi yang menggunakannya.
komponen
Array objek, masing-masing menjelaskan format yang dapat dijadikan tujuan ekspor data, atau visualisasi. Toolbar akan menampilkan opsi kepada pengguna sesuai urutan yang ditambahkan ke array. Setiap objek memiliki properti jenis yang mendeskripsikan formatnya, dan satu atau beberapa properti tambahan, bergantung pada jenisnya:
  • type: 'csv' - Opsi ini mengekspor data ke file nilai yang dipisahkan koma. Dialog 'simpan sebagai' akan terbuka di browser.
    • datasource: 'string' - URL sumber data.
  • type: html' - Opsi ini mengekspor data ke tabel HTML. Halaman yang berisi tabel data akan terbuka di jendela baru di browser.
    • sumber data: String URL sumber data.
  • type: igoogle - Opsi ini memungkinkan pengguna menambahkan visualisasi ke halaman iGoogle mereka. Halaman 'tambahkan ke iGoogle' akan terbuka di browser. Gunakan opsi ini hanya jika visualisasi tersedia dalam versi gadget.
    • sumber data: String URL sumber data.
    • gadget : String URL xml versi gadget. Perhatikan bahwa visualisasi yang terkait dengan toolbar tidak harus berupa versi gadget.
    • userprefs: Objek preferensi opsional yang sesuai untuk visualisasi ini, yang menentukan preferensi visualisasi.
  • type: htmlcode - Opsi ini membuat blok kode HTML yang dapat disematkan pengguna di halaman web untuk menampilkan visualisasi di dalam iframe. Jendela pop-up dengan elemen html yang tepat dari gadget akan terbuka di browser.Gunakan ini hanya jika visualisasi tersedia dalam versi gadget.
    • sumber data: String URL sumber data.
    • gadget : String url xml gadget.
    • userprefs: Objek preferensi opsional yang sesuai untuk visualisasi ini, yang menentukan preferensi visualisasi.
    • style: String opsional untuk gaya iframe. Misalnya: 'lebar: 300 piksel; tinggi: 500 piksel;'.

Contoh

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);
};

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun. Untuk beberapa komponen, data diambil dari sumber data masing-masing yang diberikan ke toolbar.

Pelokalan

Saat ini toolbar hanya mendukung bahasa Inggris AS.