Araç çubuğu

  1. Genel bakış
  2. Örnek
  3. Kullanım
    1. Çıkış Türleri
    2. Söz dizimi
  4. Veri Politikası

Genel bakış

Kullanıcının temel verileri bir CSV dosyasına veya HTML tablosuna aktarmasını sağlamak ya da görselleştirmeyi rastgele bir web sayfasına veya widget'a yerleştirmek üzere kod sağlamak için herhangi bir görselleştirmeye 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, her biri için izin verilen dışa aktarma türlerini ve gereken verileri girerek sayfanıza bir araç çubuğu ekleyin.

Araç çubuğu kullanmak için görselleştirmenizin verilerini bir URL'den alması gerekir. Manuel olarak doldurulmuş DataTable veya DataView nesnelerini iletemezsiniz. Görselleştirmenizi doldurmak için kullanılan verilerin URL'sini drawToolbar() yöntemine iletirsiniz.

Bir IMAP bileşeni veya Gadget'ı barındıran yerleştirilebilir bir iFrame sağlamak isterseniz görselleştirmenin widget'lı sürümünün URL'si olması gerekir.

Çıkış Türleri

Araç çubuğu, drawToolbar() yönteminde 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 imkanı sunabilir:

  • Verilerin basit bir CSV sürümü (tarayıcı yapılandırmanıza bağlı olarak tarayıcınız oluşturur veya indirip kaydetmeyi teklif eder) ve/veya
  • Verileri içeren, 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 widget'ı kendi iGoogle sayfasına gömmesini sağlayan bir sayfa bağlantısı.

Söz dizimi

google.visualization.drawToolbar(container, components)

Parametreler

kapsayıcı
Sayfadaki DOM öğesinin tutma yeri. API, araç çubuğunu bu öğenin içine çizer. Bu, standart görselleştirmedeki kapsayıcı parametresine benzer. Araç çubuğunu, onu kullanan görselleştirmenin yanına yerleştirmeniz gerekir.
bileşenler
Her biri, verilerin veya görselleştirmenin dışa aktarılabileceği biçimi açıklayan bir nesne dizisi. Araç çubuğu, seçenekleri kullanıcıya diziye eklenen sırayla gösterir. Her nesnenin, biçimi açıklayan bir tür özelliği ve türe bağlı olarak bir veya daha fazla ek özelliği vardır:
  • 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 Google sayfasına eklemesine olanak tanır. Tarayıcıda 'iGoogle'a ekle' sayfası açılır. Bunu yalnızca görselleştirme, aygıtlaştırılmış sürümde kullanılabiliyorsa kullanın.
    • datasource: Veri kaynağı URL dizesi.
    • cihaz: Aygıtlı sürümün xml URL dizesi. Araç çubuğunun ilişkilendirildiği görselleştirmenin, widget haline getirilmiş sürüm olması gerekmediğini unutmayın.
    • userprefs: Bu görselleştirme için uygun olan, görselleştirme tercihlerini belirten isteğe bağlı tercihler nesnesi.
  • type: htmlcode - Bu seçenek, kullanıcının görselleştirmeyi iframe içinde görüntülemek için web sayfasına yerleştirebileceği bir HTML kodu bloğu oluşturur. Tarayıcıda, widget'ın tam html öğesini içeren bir pop-up pencere açılır.Bunu yalnızca görselleştirme, widget'a ayrılmış bir sürümde kullanılabiliyorsa kullanın.
    • datasource: Veri kaynağı URL dizesi.
    • cihaz: Aygıt xml URL dizesi.
    • userprefs: Bu görselleştirme için uygun olan, görselleştirme tercihlerini belirten isteğe bağlı tercihler nesnesi.
    • style: iframe'in stili için isteğe bağlı bir dize. Örneğin: 'width: 300px;height: 500px;'.

Ö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şlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez. Bazı bileşenlerde veriler, araç çubuğunda verilen ilgili veri kaynağından alınır.

Yerelleştirme

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