Araç çubuğu

Genel bakış

Kullanıcının temel verileri bir CSV dosyasına veya HTML tablosuna aktarabilmesi veya görselleştirmeyi rastgele bir web sayfasına ya da gadget'a yerleştirecek kod sağlamak için görselleştirmelere araç çubuğu öğesi ekleyebilirsiniz.

Oluşturan: Google

Örnek

Araç çubuğundaki seçeneklerden birini belirleyin.

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

Kullanım

google.visualization.drawToolbar() yöntemini çağırarak, izin verilen dışa aktarma türlerini ve her biri için gereken verileri girerek sayfanıza araç çubuğu ekleyin.

Araç çubuğu kullanmak için görselleştirmenizin verilerini bir URL'den alması gerekir. El ile doldurulan DataTable veya DataView nesnelerini aktaramazsınız. Görselleştirmenizi doldurmak için kullanılan verilerin URL'sini drawToolbar() yöntemine geçirirsiniz.

Bir iGoogle bileşeni veya gadget'ı barındıran yerleştirilebilir bir iFrame sağlamak isterseniz görselleştirmenin gadget haline getirilmiş bir sürümüne sahip olmanız gerekir.

Çıkış Türleri

Araç çubuğu, drawToolbar() yönteminizde araç çubuğunuzu nasıl yapılandırdığınıza bağlı olarak kullanıcıya aşağıdaki çıkış türlerinden birini veya daha fazlasını seçme olanağı sunabilir:

  • Verilerin basit bir CSV sürümü (tarayıcı yapılandırmanıza bağlı olarak tarayıcınızın oluşturmayı veya indirmeyi ve kaydetmeyi önermesini sağlar) ve/veya
  • Verileri tutan, yeni bir tarayıcı penceresinde açılan bir HTML tablosu ve/veya
  • Bu görselleştirmeyi bir web sayfasına yerleştirmek için HTML <iframe> kodu ve/veya
  • Kullanıcının bu gadget'ı kendi iGoogle sayfasına yerleştirmesini sağlayan sayfanın bağlantısı.

Söz dizimi

google.visualization.drawToolbar(container, components)

Parametreler

kapsayıcı
Sayfadaki DOM öğesinin tanıtıcısı. API, araç çubuğunu bu öğeye çizer. Bu, standart görselleştirmenin kapsayıcı parametresine benzer. Araç çubuğunu, kullanıldığı görselleştirmenin yanına yerleştirmelisiniz.
bileşenler
Her biri verilerin veya görselleştirmenin dışa aktarılabileceği bir biçimi açıklayan nesne dizisi. Araç çubuğu, seçenekleri diziye eklenen sırada kullanıcıya gösterir. Her nesnede biçimi açıklayan bir tür özelliği ve türe bağlı olarak bir veya daha fazla ek özellik bulunur:
  • type: 'csv': Bu seçenek, verileri virgülle ayrılmış bir değer dosyasına aktarır. Tarayıcıda "Farklı kaydet" iletişim kutusu açılır.
    • datasource: 'dize' - Veri kaynağı URL'si.
  • type: html': Bu seçenek, verileri bir HTML tablosuna aktarır. Veri tablosunun bulunduğu sayfa tarayıcıda yeni bir pencerede açılır.
    • datasource: veri kaynağı URL dizesi.
  • type: igoogle - Bu seçenek, kullanıcının görselleştirmeyi iGoogle sayfasına eklemesine olanak tanır. Tarayıcıda 'iGoogle'a ekle' sayfası açılır. Bunu yalnızca görselleştirme, gadgetlaştırılmış bir sürümde mevcutsa kullanın.
    • datasource: veri kaynağı URL dizesi.
    • vm: Gadgetlaştırılmış sürümün xml URL dizesi. Araç çubuğunun ilişkilendirildiği görselleştirmenin gadget'lı sürüm olması gerekmez.
    • userprefs: Bu görselleştirmeye uygun, görselleştirme tercihlerini belirten isteğe bağlı bir tercih nesnesi.
  • type: htmlcode - Bu seçenek, görselleştirmenin bir iframe içinde görüntülenmesi için kullanıcının web sayfasına yerleştirebileceği bir HTML kodu bloğu oluşturur. Tarayıcıda, gadget'ın tam html öğesini içeren bir pop-up penceresi açılır.Bunu yalnızca görselleştirme, gadgetlaştırılmış bir sürümde mevcutsa kullanın.
    • datasource: veri kaynağı URL dizesi.
    • Gadget: Gadget xml url dizesi.
    • userprefs: Bu görselleştirmeye uygun, görselleştirme tercihlerini belirten isteğe bağlı bir tercih nesnesi.
    • style: iframe'in stili için isteğe bağlı bir dize. Örneğin: 'genişlik: 300 piksel; yükseklik: 500 piksel;'.

Örnek

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

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez. Bazı bileşenler için veriler, araç çubuğuna belirtilen ilgili veri kaynağından alınır.

Yerelleştirme

Araç çubuğu şu anda yalnızca ABD İngilizcesini desteklemektedir.