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.