Bu sayfada, Google Görselleştirme API'sı tarafından açığa çıkarılan nesneler ve tüm görselleştirmeler tarafından gösterilen standart yöntemler listelenir.
Not: Google Görselleştirme API'sı ad alanı: google.visualization.*
Dizilerle ilgili not
Bazı tarayıcılar JavaScript dizilerinde sondaki virgülleri düzgün işleyemediğinden bunları kullanmayın. Bir dizinin ortasındaki boş değerler sorun değildir. Örneğin:
data = ['a','b','c', ,]; // BAD
data = ['a','b','c']; // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.
DataTable Sınıfı
İki boyutlu, değişebilir değerler tablosunu temsil eder. Bir DataTable
öğesinin salt okunur bir kopyasını oluşturmak için (isteğe bağlı olarak belirli değerleri, satırları veya sütunları gösterecek şekilde filtrelenir) bir DataView oluşturun.
Her sütuna bir veri türünün yanı sıra kimlik, etiket ve desen dizesi gibi çeşitli isteğe bağlı özellikler atanır.
Buna ek olarak, herhangi bir hücreye, satıra, sütuna veya tüm tabloya özel özellikler (ad/değer çiftleri) atayabilirsiniz. Bazı görselleştirmeler belirli özel özellikleri destekler. Örneğin, Tablo görselleştirme, oluşturulan tablo hücresine satır içi CSS stil dizesi atayabilmeniz için "stil" adı verilen bir hücre özelliğini destekler. Görselleştirme, dokümanlarında desteklediği tüm özel özellikleri tanımlamalıdır.
Şu makaleyi de inceleyebilirsiniz: QueryResponse.getDataTable
Oluşturucu
Söz dizimi
DataTable(opt_data, opt_version)
- opt_data [opt_data]
-
[İsteğe bağlı] Tabloyu başlatmak için kullanılan veriler. Bu, doldurulmuş bir tablodaki
DataTable.toJSON()
öğesini çağırarak döndürülen JSON veya tabloyu başlatmak için kullanılan verileri içeren bir JavaScript nesnesi olabilir. JavaScript değişmez nesnesinin yapısı burada açıklanmıştır. Bu parametre sağlanmazsa yeni ve boş bir veri tablosu döndürülür. - opt_version
- [İsteğe bağlı] Kullanılan aktarım protokolünün sürümünü belirten sayısal değer. Bu özellik yalnızca Grafik Araçları Veri Kaynağı Uygulayıcıları tarafından kullanılır. Mevcut sürüm 0.6'dır.
Ayrıntılar
Görselleştirme nesnesine aktarılan verileri tutmak için DataTable
nesnesi kullanılır.
DataTable
, iki boyutlu bir temel tablodur. Her sütundaki tüm verilerin aynı veri türüne sahip olması gerekir. Her sütunun bir veri türü, bu sütun için bir etiketi (görselleştirme ile gösterilebilir) ve belirli bir sütuna atıfta bulunmak için kullanılabilecek bir kimliği (sütun dizinlerinin kullanılmasına alternatif olarak) içeren bir tanımlayıcısı vardır. DataTable
nesnesi belirli bir değere, satıra, sütuna veya DataTable
öğesinin tamamına atanan rastgele özelliklerin haritasını da destekler. Görselleştirmeler bunları ek özellikleri desteklemek için kullanabilir. Örneğin, Tablo görselleştirmede tek tek hücrelere rastgele sınıf adları veya stiller atamanıza olanak sağlamak için özel özellikler kullanılır.
Tablodaki her hücre bir değer içerir. Hücrelerde null değeri veya sütunu tarafından belirtilen türde bir değer olabilir. Hücreler isteğe bağlı olarak verilerin "biçimlendirilmiş" bir sürümünü alabilir. Bu, verilerin bir görselleştirme tarafından görüntülenecek şekilde biçimlendirilmiş bir dize sürümüdür. Görselleştirme, biçimlendirilmiş sürümü görüntüleme için kullanabilir (ancak bulunması zorunlu değildir), ancak yaptığı sıralamalarda veya hesaplamalarda her zaman verilerin kendisini kullanır (ör. bir noktanın yerleştirileceği konumu belirlemek gibi). Örneğin, "düşük" "orta" ve "yüksek" değerlerini 1, 2 ve 3 sayısal hücre değerlerine biçimlendirilmiş değerler olarak atayabilirsiniz.
Oluşturucuyu aradıktan sonra veri satırları eklemek için tek bir satıra addRow()
veya birden fazla satıra addRows()
çağrısı yapabilirsiniz. Sütunları, addColumn()
yöntemlerini çağırarak da ekleyebilirsiniz. Satır ve sütunlar için de kaldırma yöntemleri vardır ancak satırları veya sütunları kaldırmak yerine DataTable
seçici bir görünümü olan DataView
oluşturmayı düşünebilirsiniz.
Bir görselleştirmedeki draw()
yöntemine aktarıldıktan sonra, DataTable
içindeki değerleri değiştirirseniz değişiklikler grafiği hemen değiştirmez. Değişiklikleri yansıtmak için draw()
numarasını tekrar aramanız gerekiyor.
Not: Google Listeleri veri tablolarında herhangi bir doğrulama yapmaz. (Böyle olsa, grafikler daha yavaş oluşturulur.) Sütununuzun dize beklediği bir sayı (veya tam tersi) sağlarsanız Google Listeler, değeri anlamlı bir şekilde yorumlamak için gerekeni yapar ancak yanlışları işaretlemez.
Örnekler
Aşağıdaki örnekte, yukarıdaki JavaScript örneğinde gösterilen verilerle aynı şekilde, bir DataTable
dizesinin doldurulduğu dizenin doldurulup doldurulduğu gösterilmektedir:
var dt = new google.visualization.DataTable({ cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}], rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}] }, 0.6);
Aşağıdaki örnek yeni, boş bir DataTable
oluşturur ve daha sonra, yukarıdakiyle aynı verilerle manuel olarak doldurur:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows([ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', {v:7, f:'7.000'}] ]);
DataTable
Oluşturucuyu parametre olmadan çağırıp aşağıda listelenen addColumn()
/
addRows()
yöntemlerini çağırarak veya başlatmak için doldurulmuş bir JavaScript değişmez nesnesini ile oluşturarak oluşturabilirsiniz. Her iki yöntem de aşağıda açıklanmıştır. Hangisini kullanmalısınız?
-
addColumn()
,addRow()
veaddRows()
çağırarak JavaScript'te tablo oluşturup doldurmak oldukça okunabilir bir koddur. Bu yöntem, kodu manuel olarak gireceğiniz durumlarda yararlıdır. Nesne değişmez gösterimini kullanmaktan daha yavaştır (daha sonra açıklanır), ancak muhtemelen daha küçük tablolarda (örneğin, 1.000 hücre) çok fazla fark görmezsiniz. -
Nesne değişmez değeri gösterimini kullanarak
DataTable
nesnesinin doğrudan beyanı, büyük tablolarda çok daha hızlı yapılır. Ancak, bunu düzeltmek için karmaşık bir söz dizimi kullanabilirsiniz. Kodda nesne değişmez söz dizimini oluşturabiliyorsanız, bunu kullanarak hata olasılığını azaltabilirsiniz.
Yöntemler
Yöntem | İade Değeri | Açıklama |
---|---|---|
VEYA
|
Sayı |
Veri tablosuna yeni bir sütun ekler ve yeni sütunun dizinini döndürür. Yeni sütunun tüm hücrelerine İlk imzada aşağıdaki parametreler vardır:
İkinci imzada aşağıdaki üyelerle birlikte tek bir nesne parametresi bulunur:
Şu makaleyi de inceleyebilirsiniz: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole |
addRow(opt_cellArray) |
Sayı |
Veri tablosuna yeni bir satır ekler ve yeni satırın dizinini döndürür.
Örnekler: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous. |
addRows(numOrArray) |
Sayı |
Veri tablosuna yeni satırlar ekler ve eklenen en son satırın dizinini döndürür. Aşağıda açıklandığı gibi yeni boş satırlar oluşturmak veya satırları doldurmak için kullanılan verilerle bu yöntemi çağırabilirsiniz.
Örnek: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Şu makaleyi de inceleyebilirsiniz: insertRows |
clone() |
Veri Tablosu | Veri tablosunun bir klonunu döndürür. Sonuç olarak hücre özellikleri, satır özellikleri, tablo özellikleri ve sütun özellikleri haricindeki veri tablosu derin birer kopyası olur. Bu özellikler, yüzeysel kopyalardır. Bu, ilkel olmayan özelliklerin referansa göre kopyalandığı ancak temel özelliklerin değere göre kopyalandığı anlamına gelir. |
getColumnId(columnIndex) |
Dize |
Temel tablodaki sütun dizini tarafından belirtilen belirli bir sütunun tanımlayıcısını döndürür. Sorgular tarafından alınan veri tablolarında, sütun tanımlayıcı veri kaynağı tarafından ayarlanır ve sorgu dilini kullanırken sütunlara atıfta bulunmak için kullanılabilir. Ayrıca bkz. Query.setQuery |
getColumnIndex(columnIdentifier) |
Dize, Sayı |
Belirli bir sütunun bu dizinde mevcut olması durumunda sütun dizini, kimlik veya etiket tarafından belirtilen dizinini döndürür; aksi takdirde, -1. Bir dize olduğunda columnIdentifier , sütunu önce kimliğine, ardından etiketine göre bulmak için kullanılır.Ayrıca bkz. getColumnId, getColumnLabel |
getColumnLabel(columnIndex) |
Dize |
Temel tablodaki sütun dizininde belirtilen belirli bir sütunun etiketini döndürür.
Sütun etiketi genellikle görselleştirmenin bir parçası olarak gösterilir. Örneğin, sütun etiketi bir tabloda sütun başlığı olarak veya pasta grafikte açıklama etiketi olarak görüntülenebilir. Sorgular tarafından alınan veri tabloları için sütun etiketi, veri kaynağı veya sorgu dilinin label ifadesi tarafından ayarlanır. Ayrıca bkz. setColumnLabel |
getColumnPattern(columnIndex) |
Dize |
Belirtilen sütunun değerlerini biçimlendirmek için kullanılan biçimlendirme kalıbını döndürür.
Sorgular tarafından alınan veri tablolarında sütun kalıbı, veri kaynağı veya sorgu dilinin |
getColumnProperties(columnIndex)
|
İtiraz et |
Belirtilen sütun için tüm özelliklerin haritasını döndürür. Bu özellik nesnesinin referans olarak döndürüldüğünü, dolayısıyla, alınan nesnedeki değerlerin değiştirilmesinin bunları
|
getColumnProperty(columnIndex, name)
|
Otomatik |
Adlandırılmış özelliğin değerini veya belirtilen sütun için bu tür bir özellik ayarlanmadığında
Şu makaleyi de inceleyebilirsiniz: setColumnProperty setColumnProperties |
getColumnRange(columnIndex) |
İtiraz et |
Belirtilen bir sütundaki minimum ve maksimum değerleri döndürür. Döndürülen nesnenin özellikleri
|
getColumnRole(columnIndex) |
Dize | Belirtilen sütunun rolleri. |
getColumnType(columnIndex) |
Dize |
Sütun dizininde belirtilen belirli bir sütunun türünü döndürür.
Döndürülen sütun türü şunlardan biri olabilir: |
getDistinctValues(columnIndex) |
Nesne dizisi |
Belirli bir sütundaki benzersiz değerleri, artan düzende döndürür.
Döndürülen nesnelerin türü |
getFilteredRows(filters) |
Nesne dizisi |
Belirtilen tüm filtrelerle eşleşen satırların satır dizinlerini döndürür. Dizinler artan düzende döndürülür. Bu yöntemin sonucu, görselleştirmedeki görüntülenen satır grubunu değiştirmek için
İsteğe bağlı başka bir özellik olan
Örnek: |
getFormattedValue(rowIndex, columnIndex)
|
Dize |
Belirtilen satır ve sütun dizinlerindeki hücrenin biçimlendirilmiş değerini döndürür.
Biçimlendirme sütunu değerleri hakkında daha fazla bilgi için sorgu dili referansına bakın. Şu makaleyi de inceleyebilirsiniz: setFormattedValue |
getNumberOfColumns() |
Sayı | Tablodaki sütun sayısını döndürür. |
getNumberOfRows() |
Sayı | Tablodaki satır sayısını döndürür. |
getProperties(rowIndex, columnIndex)
|
İtiraz et |
Belirtilen hücrenin tüm özelliklerinin bir haritasını döndürür. Bu özellik nesnesinin referans olarak döndürüldüğünü, dolayısıyla, alınan nesnedeki değerlerin değiştirilmesinin bunları
|
getProperty(rowIndex, columnIndex, name)
|
Otomatik |
Adlandırılmış özelliğin değerini veya belirtilen hücre için böyle bir özellik ayarlanmamışsa
Şu makaleyi de inceleyebilirsiniz: setCell setProperties setProperty |
getRowProperties(rowIndex)
|
İtiraz et |
Belirtilen satırdaki tüm özelliklerin haritasını döndürür. Bu özellik nesnesinin referans olarak döndürüldüğünü, dolayısıyla, alınan nesnedeki değerlerin değiştirilmesinin bunları
|
getRowProperty(rowIndex, name)
|
Otomatik |
Adlandırılmış özelliğin değerini veya belirtilen satır için bu tür bir özellik ayarlanmamışsa
Şu makaleyi de inceleyebilirsiniz: setRowProperty setRowProperties |
getSortedRows(sortColumns) |
Sayı dizisi |
Temel verilerin sırasını değiştirmeden tablonun sıralı sürümünü döndürür.
Temel verileri kalıcı olarak sıralamak için
Döndürülen değer bir sayı dizisidir. Her sayı,
Sıralamanın tutarlı olacağı garanti edilir: Diğer bir deyişle, iki satırın eşit değerlerini sıralarsanız aynı sıralama, satırları her seferinde aynı düzende döndürür. Örnek: Üçüncü sütuna göre sıralanmış satırları tekrarlamak için aşağıdakileri kullanın: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); } |
getTableProperties
|
İtiraz et | Tablodaki tüm tesislerin haritasını döndürür. |
getTableProperty(name) |
Otomatik |
Adlandırılmış özelliğin değerini veya tablo için böyle bir özellik ayarlanmamışsa
Şu makaleyi de inceleyebilirsiniz: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
İtiraz et |
Belirtilen satır ve sütun dizinlerindeki hücrenin değerini döndürür.
Döndürülen değerin türü sütun türüne bağlıdır (bkz. getColumnType):
|
insertColumn(columnIndex, type [,label [,id]])
|
Yok |
Veri tablosuna belirli bir dizinden yeni bir sütun ekler. Belirtilen dizinde veya daha sonra mevcut olan tüm sütunlar daha yüksek bir dizine taşınır.
Şu makaleyi de inceleyebilirsiniz: addColumn |
insertRows(rowIndex, numberOrArray) |
Yok |
Belirtilen satır dizinine belirtilen sayıda satır ekleyin.
Şu makaleyi de inceleyebilirsiniz: addRows |
removeColumn(columnIndex) |
Yok |
Belirtilen dizindeki sütunu kaldırır.
Şu makaleyi de inceleyebilirsiniz: removeColumn |
removeColumns(columnIndex, numberOfColumns)
|
Yok |
Belirtilen dizindeki sütundan başlayarak belirtilen sayıda sütunu kaldırır.
Şu makaleyi de inceleyebilirsiniz: removeColumn |
removeRow(rowIndex) |
Yok |
Belirtilen dizindeki satırı kaldırır.
Şu makaleyi de inceleyebilirsiniz: removeRows |
removeRows(rowIndex, numberOfRows) |
Yok |
Belirtilen dizindeki satırdan başlayarak belirtilen sayıda satırı kaldırır.
Şu makaleyi de inceleyebilirsiniz: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
Yok |
Bir hücrenin değerini, biçimlendirilmiş değerini ve/veya özelliklerini ayarlar.
Şu makaleyi de inceleyebilirsiniz: setValue(), setFormattedValue(), setProperty(), setProperties(). |
setColumnLabel(columnIndex, label)
|
Yok |
Bir sütunun etiketini ayarlar.
Şu makaleyi de inceleyebilirsiniz: getColumnLabel |
setColumnProperty(columnIndex, name, value)
|
Yok |
Tek bir sütun özelliği ayarlar. Bazı görselleştirmeler, görünümünü veya davranışını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Desteklenen özellikleri görmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz:setColumnProperties getColumnProperty |
setColumnProperties(columnIndex, properties)
|
Yok |
Birden fazla sütun özelliği ayarlar. Bazı görselleştirmeler, görünümünü veya davranışını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Desteklenen özellikleri görmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
Yok |
Hücrenin biçimlendirilmiş değerini ayarlar.
Şu makaleyi de inceleyebilirsiniz: getFormattedValue |
setProperty(rowIndex, columnIndex, name, value)
|
Yok |
Bir hücre özelliği ayarlar. Bazı görselleştirmeler, görünümünü veya davranışını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini öğrenmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setCell setProperties getProperty |
setProperties(rowIndex, columnIndex, properties)
|
Yok |
Birden çok hücre özelliklerini ayarlar. Bazı görselleştirmeler, görünümünü veya davranışını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Desteklenen özellikleri görmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setCell setProperty getProperty |
setRowProperty(rowIndex, name, value)
|
Yok |
Bir satır özelliği ayarlar. Bazı görselleştirmeler, görünümünü veya davranışını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini öğrenmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setRowProperties getRowProperty |
setRowProperties(rowIndex, properties)
|
Yok |
Birden fazla satır özelliğini ayarlar. Bazı görselleştirmeler, görünümünü veya davranışını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Desteklenen özellikleri görmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setRowProperty getRowProperty |
setTableProperty(name, value)
|
Yok |
Tek bir tablo özelliği ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için tablo, satır, sütun veya hücre özelliklerini destekler. Desteklenen özellikleri görmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setTableProperties getTableProperty |
setTableProperties(properties) |
Yok |
Birden çok tablo özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için tablo, satır, sütun veya hücre özelliklerini destekler. Desteklenen özellikleri görmek için görselleştirme dokümanlarına bakın.
Şu makaleyi de inceleyebilirsiniz: setTableProperty getTableProperty |
setValue(rowIndex, columnIndex, value) |
Yok |
Hücrenin değerini belirler. Bu yöntem, mevcut hücre değerlerinin üzerine yazmanın yanı sıra hücrenin biçimlendirilmiş değerini ve özelliklerini de siler.
Ayrıca bkz.: setCell, setFormattedValue, setProperty, setProperties |
sort(sortColumns) |
Yok |
Satırları belirtilen sıralama sütunlarına göre sıralar. DataTable , bu yöntemle değiştirilir. Sıralama ayrıntılarının açıklaması için getSortedRows() adresine göz atın. Bu yöntem, sıralanmış verileri döndürmez.Ayrıca bkz.: get RankedRows Örnek: Üçüncü sütuna ve ardından ikinci sütuna göre sıralamak için şunu kullanın: data.sort([{column: 2}, {column: 1}]);
|
toJSON() |
Dize |
DataTable oluşturucusuna iletilebilecek DataTable JSON JSON değerini döndürür. Örneğin:
{"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] } |
Oluşturucunun JavaScript Değişmez veri Parametresi biçimi
data parametresine bir JavaScript dizesi değişmez nesnesi ileterek DataTable
öğesini başlatabilirsiniz. Bu nesneye data nesnesi adını veririz. Bu nesneyi aşağıdaki açıklamaya göre manuel olarak kodlayabilir veya Python'un nasıl kullanılacağını biliyorsanız siteniz tarafından kullanılabilen yardımcı bir Python kitaplığından yararlanabilirsiniz. Ancak nesneyi elle oluşturmak istiyorsanız bu bölümde söz dizimi açıklanmaktadır.
İlk olarak, üç satırı ve üç sütunu (Dize, Sayı ve Tarih türleri) olan bir tabloyu açıklayan basit bir JavaScript nesnesi örneğini gösterelim:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ], p: {foo: 'hello', bar: 'world!'} }
Şimdi söz dizimini açıklayalım:
data nesnesi, cols
ve rows
olmak üzere iki gerekli üst düzey mülkten ve isteğe bağlı değerlerin haritası olan isteğe bağlı bir p
özelliğinden oluşur.
Not: Gösterilen tüm özellik adları ve dize sabitleri büyük/küçük harfe duyarlıdır. Ayrıca, bir dize değeri alma olarak tanımlanan özelliklerin değeri, tırnak işaretleri arasına alınmalıdır.
Örneğin, tür türünü sayı olarak belirtmek istiyorsanız şu şekilde ifade edilir: type: 'number'
ancak sayısal olarak değerin kendisi şu şekilde ifade edilir: v: 42
cols
Mülk
cols
, her sütunun kimliğini ve türünü açıklayan bir nesne dizisidir. Her özellik, aşağıdaki özelliklere sahip bir nesnedir (büyük/küçük harfe duyarlı):
-
type
[Zorunlu] Sütundaki verilerin veri türü. Aşağıdaki dize değerlerini destekler (örnekler, daha sonra açıklanan v: özelliğini içerir):-
"boole" - JavaScript boole değeri ("true" veya "false"). Örnek değer:
v:'true'
-
"number" (JavaScript) - JavaScript sayı değeri. Örnek değerler:
v:7
,v:3.14
,v:-55
- "string" - JavaScript dize değeri. Örnek değer:
v:'hello'
-
'date' - Saat kısaltılmış JavaScript Date nesnesi (sıfır tabanlı ay). Örnek değer:
v:new Date(2008, 0, 15)
-
'date' - Saat dahil JavaScript Date nesnesi. Örnek değer:
v:new Date(2008, 0, 15, 14, 30, 45)
-
"timeofday" - Üç rakam ve isteğe bağlı bir dördüncü dizi, saati (0'ı gösterir), dakika, saniye ve isteğe bağlı milisaniye. Örnek değerler:
v:[8, 15, 0]
,v: [6, 12, 1, 144]
-
"boole" - JavaScript boole değeri ("true" veya "false"). Örnek değer:
-
id
[İsteğe bağlı] Sütunun dize kimliği. Tabloda benzersiz olmalıdır. Temel alfanümerik karakterler kullanın. Böylece ana makine sayfasının JavaScript'teki sütuna erişmek için süslü kaçamaklar gerektirmez. JavaScript anahtar kelimesi seçmemeye dikkat edin. Örnek:id:'col_1'
-
label
[İsteğe bağlı] Bu görselleştirmede bazı görselleştirmelerin görüntülediği dize değeri. Örnek:label:'Height'
-
pattern
[İsteğe bağlı] Sayısal, tarih veya saat sütun değerlerini biçimlendirmek için veri kaynağı tarafından kullanılan dize kalıbı. Bu ad yalnızca referans amaçlıdır; muhtemelen deseni okumanız gerekmez ve bulunması zorunlu değildir. Google Görselleştirme istemcisi bu değeri kullanmaz (hücrenin biçimlendirilmiş değerini okur).DataTable
değeri, biçim yan tümcesine sahip bir sorguya yanıt olarak bir veri kaynağından geldiyse bu yan tümcede belirttiğiniz kalıp muhtemelen bu değerde döndürülür. Önerilen kalıp standartları, ICU DecimalFormat ve SimpleDateFormat 'dır. -
p
[İsteğe bağlı] Hücreye uygulanan özel değerlerin haritası olan bir nesne. Bu değerler herhangi bir JavaScript türünde olabilir. Görselleştirmeniz hücre düzeyindeki özellikleri destekliyorsa bunları açıklar, aksi takdirde bu özellik yok sayılır. Örnek:p:{style: 'border: 1px solid green;'}
.
cols
Örnek
cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'}]
rows
özelliği bir dizi satır nesnesi içerir.
Her satır nesnesinde gerekli olan bir özellik vardır. c
, bu satırdaki bir hücre dizisidir. Ayrıca, tüm satıra atanacak rastgele özel değerler eşlemesi tanımlayan isteğe bağlı bir p
özelliği vardır. Görselleştirmeniz satır düzeyinde özellikleri destekliyorsa bunları açıklar. Aksi takdirde bu özellik yok sayılır.
Tablodaki her bir hücre aşağıdaki özelliklere sahip bir nesne tarafından tanımlanır:
-
v
[İsteğe bağlı] Hücre değeri. Veri türü, sütun veri türüyle eşleşmelidir. Hücre null isev
özelliği null olmalıdır. Ancak yine def
vep
özelliklerine sahip olabilir. -
f
[İsteğe bağlı]v
değerinin dize biçiminde ve biçimi biçimlendirilmiş. Genellikle değerler eşleşecektir ancak zorunlu değildir. Bu nedenle,v
içinDate(2008, 0, 1)
özelliğini belirtirseniz "1 Ocak 2008" değerini veya bu özellik için bu tür bir dizeyi belirtmeniz gerekir. Bu değer,v
değeriyle karşılaştırılmaz. Görselleştirme bu değeri hesaplama için değil, yalnızca görüntüleme için bir etiket olarak kullanır. Atlanırsa varsayılan biçimlendirici kullanılarakv
dize sürümü otomatik olarak oluşturulur.f
değerleri, kendi biçimlendiriciniz kullanılarak değiştirilebilir veyasetFormattedValue()
ya dasetCell()
ile ayarlanabilir veyagetFormattedValue()
ile alınabilir. -
p
[İsteğe bağlı] Hücreye uygulanan özel değerlerin haritası olan bir nesne. Bu değerler herhangi bir JavaScript türünde olabilir. Görselleştirmeniz hücre düzeyindeki özellikleri destekliyorsa bunları açıklar. Bu özellikler,getProperty()
vegetProperties()
yöntemleriyle alınabilir. Örnek:p:{style: 'border: 1px solid green;'}
.
Satır dizisindeki hücreler, cols
içindeki sütun açıklamalarıyla aynı sırada olmalıdır. Boş hücre belirtmek için null
belirtebilir, bir dizideki hücreyi boş bırakabilir veya sondaki dizi üyelerini atlayabilirsiniz. Bu yüzden, ilk iki hücre için boş olan bir satır belirtmek üzere [ , , {cell_val}]
veya [null, null, {cell_val}]
belirtebilirsiniz.
Burada, üç satır veriyle dolu üç sütunlu bir örnek tablo nesnesi bulunmaktadır:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ] }
p Mülkü
Tablo düzeyindeki p
özelliği, DataTable
öğesinin tamamına uygulanan özel değerlerin haritasıdır. Bu değerler herhangi bir JavaScript türünde olabilir. Görselleştirmeniz veri tablosu düzeyinde herhangi bir özelliği destekliyorsa bu özellikleri açıklar. Aksi takdirde, bu özellik uygulama tarafından kullanılabilir.
Örnek: p:{className: 'myDataTable'}
.
DataView Sınıfı
Temel DataTable'ın salt okunur görünümü. DataView
sütunu, sütunların ve/veya satırların yalnızca bir alt kümesini seçmenize olanak tanır. Ayrıca, sütunların/satırların yeniden sıralanmasına ve sütun/satırların kopyalanmasına da olanak tanır.
Görünüm, verilerin statik bir anlık görüntüsü olarak değil, temel alınan DataTable
metriğindeki canlı bir penceredir.
Bununla birlikte, tablonun yapısını değiştirirken aşağıdaki gibi dikkatli olmanız gerekir:
-
Temel tabloya sütun eklemek veya kaldırmak, görünüme yansımaz ve görünümde beklenmeyen davranışlara neden olabilir. Bu değişiklikleri almak için
DataTable
ürününden yeni birDataView
oluşturmanız gerekir. -
Temel tabloya satır eklemek veya kaldırmak güvenlidir ve değişiklikler bu görünüme hemen uygulanır (ancak bu değişiklikten sonra görselleştirmede
draw()
satırını çağırmanız gerekir). GörünümünüzsetRows() or hideRows()
yöntemlerinden birini çağırarak satırları filtrelediyse ve temel tabloya satır ekleyip çıkarırsanız bu davranış beklenmeyen bir şeydir. Yeni tabloyu yansıtmak için yeni birDataView
oluşturmanız gerekir. -
Mevcut hücrelerdeki hücre değerlerini değiştirmek güvenlidir ve değişiklikler hemen
DataView
öğesine uygulanır (ancak bu hücre değişikliğinden sonra, yeni hücre değerlerinin oluşturulması için tüm görselleştirmelerdedraw()
çağrısı yapmanız gerekir).
Başka bir DataView
öğesinden DataView
oluşturmak da mümkündür. Temel bir tablo veya görünümden bahsedildiğinde bu seviyenin hemen altındaki seviyeyi ifade ettiğini unutmayın. Diğer bir deyişle, bu DataView
öğesini oluşturmak için kullanılan veri nesnesini belirtir.
DataView
, hesaplanan sütunları da destekler. Bunlar, sağladığınız bir işlev kullanılarak değeri anında hesaplanan sütunlardır. Örneğin, önceki iki sütunun toplamı olan bir sütun veya başka bir sütundaki bir tarihin takvim çeyreğini hesaplayıp gösteren bir sütun ekleyebilirsiniz. Ayrıntılı bilgi için setColumns()
göz atın.
Satırları veya sütunları gizleyerek veya göstererek bir DataView
öğesini değiştirdiğinizde görselleştirme, draw()
ile tekrar çağırana kadar etkilenmez.
Aşağıda gösterildiği gibi, ilginç bir veri alt kümesiyle DataView
oluşturmak için DataView.getFilteredRows()
öğesini DataView.setRows()
ile birleştirebilirsiniz:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); data.setCell(3, 0, 'Frank'); data.setCell(3, 1, new Date(2007, 11, 28)); data.setCell(4, 0, 'Floyd'); data.setCell(4, 1, new Date(2005, 3, 13)); data.setCell(5, 0, 'Fritz'); data.setCell(5, 1, new Date(2007, 9, 2)); // Create a view that shows everyone hired since 2007. var view = new google.visualization.DataView(data); view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}])); var table = new google.visualization.Table(document.getElementById('test_dataview')); table.draw(view, {sortColumn: 1});
Markalar
Yeni bir DataView
örneği oluşturmanın iki yolu vardır:
1. Oluşturucu
var myView = new google.visualization.DataView(data)
data
-
Görünümü başlatmak için
DataTable
veyaDataView
kullanılır. Varsayılan olarak görünüm, temel veri tablosu veya görünümdeki tüm sütun ve satırları orijinal sırayla içerir. Bu görünümde satırları veya sütunları gizlemek ya da göstermek için uygunset...()
veyahide...()
yöntemlerini çağırın.
Şunlara da bakın:
setColumn(), hideColumn(), setRows(), hideRows().
2. Oluşturucu
Bu oluşturucu, DataTable
uygulamasına serileştirilmiş bir DataView
atayarak yeni bir DataView
oluşturur.
DataView.toJSON()
kullanarak serileştirdiğiniz DataView
öğesini yeniden oluşturmanıza yardımcı olur.
var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
- veriler
-
DataView.toJSON()
adını verdiğinizDataView
öğesini oluşturmak için kullandığınızDataTable
nesnesi. Bu tablo orijinal tablodan farklıysa öngörülemez sonuçlar alırsınız. - görüntüAsJson
-
DataView.toJSON()
tarafından döndürülen JSON dizesi. Bu, data DataTable'da hangi satırların gösterileceği veya gizleneceğine dair açıklamadır.
Yöntemler
Yöntem | İade Değeri | Açıklama |
---|---|---|
Açıklamaları DataTable dilinde görebilirsiniz. |
Eşdeğer DataTable yöntemleriyle aynıdır ancak satır/sütun dizinlerinin temeldeki tablo/görünümde değil, görünümdeki dizine işaret etmesi gerekir.
|
|
getTableColumnIndex(viewColumnIndex)
|
Sayı |
Bu görünümde, dizinindeki belirli bir sütunun temel tablosunda (veya görünümünde) dizini döndürür.
Örnek: |
getTableRowIndex(viewRowIndex) |
Sayı |
Bu görünümde diziniyle belirtilen belirli bir satırın temel tablosundaki (veya görünümündeki) dizini döndürür.
Örnek: |
getViewColumnIndex(tableColumnIndex)
|
Sayı |
Bu görünümde, temel tablodaki (veya görünümdeki) dizini tarafından belirtilen belirli bir sütunla eşleşen dizini döndürür. Birden fazla dizin varsa ilkini (en küçük) döndürür. Böyle bir dizin yoksa (belirtilen sütun görünümde yer almaz) -1 değerini döndürür.
Örnek: |
getViewColumns() |
Sayı dizisi |
Bu görünümdeki sütunları sırayla döndürür. Yani, bir diziyle |
getViewRowIndex(tableRowIndex) |
Sayı |
Bu görünümde, temel tablodaki (veya görünümdeki) dizininde belirtilen belirli bir satırla eşleşen dizini döndürür. Birden fazla dizin varsa ilkini (en küçük) döndürür. Böyle bir dizin yoksa (belirtilen satır görünümde yer almıyorsa) -1 değerini döndürür.
Örnek: |
getViewRows() |
Sayı dizisi |
Bu görünümdeki satırları sırayla döndürür. Yani, bir diziyle |
hideColumns(columnIndexes) |
yok |
Belirtilen sütunları geçerli görünümden gizler.
Örnek: 10 sütunlu bir tablonuz varsa ve |
hideRows(min, max) |
Yok |
Mevcut görünümdeki min. ve maks. (dahil) değerleri arasında dizin içeren tüm satırları gizler.
Bu, yukarıdaki |
hideRows(rowIndexes) |
Yok |
Belirtilen satırları geçerli görünümden gizler.
Örnek: 10 satırlı bir tablonuz varsa ve |
setColumns(columnIndexes) |
Yok |
Bu görünümde hangi sütunların görünür olduğunu belirtir. Belirtilmeyen sütunlar gizlenir. Bu, temel tablodaki/görünümdeki veya hesaplanmış sütunlardaki sütun dizinleri dizisidir. Bu yöntemi çağırmazsanız varsayılan olarak tüm sütunlar gösterilir. Dizide, aynı sütunu birden çok kez göstermek için kopyalar da bulunabilir. Sütunlar, belirtilen sırada gösterilir.
Örnekler: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); } |
setRows(min, max) |
Yok |
Bu görünümdeki satırları, min. ve maks. (dahil) arasındaki tüm dizinler (alttaki tablo/görünümde) olarak ayarlar. Bu, aşağıdaki |
setRows(rowIndexes) |
Yok |
Temel tablodaki/görünümdeki dizin sayılarına göre bu görünümdeki görünür satırları ayarlar.
Örnek: Temel tablonun/görünümün üçüncü ve sıfır satırlarıyla bir görünüm oluşturmak için: |
toDataTable() |
Veri Tablosu |
DataView öğesinin görünür satırları ve sütunlarıyla doldurulan bir DataTable nesnesi döndürür.
|
toJSON() |
string |
Bu DataView öğesinin bir dize gösterimini döndürür. Bu dize gerçek verileri içermez; yalnızca görünür satırlar ve sütunlar gibi DataView özel ayarlarını içerir. Bu dizeyi depolayabilir ve bu görünümü yeniden oluşturmak için statik DataView.fromJSON()
oluşturucuya iletebilirsiniz. Oluşturulan sütunlar bu sütuna dahil edilmez.
|
ChartWrapper Sınıfı
Grafiğinizi sarmalamak ve grafiğinizle ilgili tüm yükleme, çizim ve Veri Kaynağı sorgulamalarını işlemek için ChartWrapper
sınıfı kullanılır. Sınıf, grafikte değer belirleme ve çizim yapmada kolaylık sağlayan yöntemler sunar. Bu sınıf, sorgu geri çağırma işleyicisi oluşturmanıza gerek olmadığından veri kaynağından okumayı basitleştirir. Grafiği, yeniden kullanılmak üzere kolayca kaydetmek için de kullanabilirsiniz.
ChartWrapper
kullanmanın bir diğer avantajı da dinamik yükleme özelliğini kullanarak kitaplık yükleme sayısını azaltmanızdır. Ayrıca, ChartWrapper
grafik grafiklerini aramayı ve yüklemeyi sizin yerinize yapacak olduğundan, paketleri açıkça yüklemenize gerek yoktur.
Ayrıntılar için aşağıdaki örnekleri inceleyin.
Ancak ChartWrapper
, şu anda grafikler tarafından atılan etkinliklerin yalnızca bir alt kümesini yaymaktadır: seçme, hazır ve hata. Diğer etkinlikler ChartWrapper örneği aracılığıyla iletilmez. Diğer etkinlikleri almak için getChart()
öğesini çağırmanız ve etkinliklere aşağıdaki gösterildiği gibi doğrudan grafik işleyici üzerinden abone olmanız gerekir:
var wrapper; function drawVisualization() { // Draw a column chart wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], [700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'visualization' }); // Never called. google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler); // Must wait for the ready event in order to // request the chart and subscribe to 'onmouseover'. google.visualization.events.addListener(wrapper, 'ready', onReady); wrapper.draw(); // Never called function uselessHandler() { alert("I am never called!"); } function onReady() { google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler); } // Called function usefulHandler() { alert("Mouseover event!"); } }
Marka
ChartWrapper(opt_spec)
- opt_spec
- [İsteğe bağlı] - Grafiği tanımlayan bir JSON nesnesi veya bu nesnenin serileştirilmiş bir dize sürümü. Bu nesnenin biçimi drawChart() dokümanlarında gösterilir. Belirtilmezse bu nesnenin gördüğü set... yöntemlerini kullanarak uygun özelliklerin tümünü ayarlamanız gerekir.
Yöntemler
ChartWrapper aşağıdaki ek yöntemleri sunar:
Yöntem | Dönüş Türü | Açıklama |
---|---|---|
draw(opt_container_ref) |
Yok |
Grafiği çizer. Değişiklikleri göstermek için grafikte veya verilerde yaptığınız değişikliklerden sonra bu yöntemi çağırmanız gerekir.
|
toJSON() |
Dize | Grafiğin JSON gösteriminin dize sürümünü döndürür. |
clone() |
Grafik Sarmalayıcı | Grafik sarmalayıcının derin bir kopyasını döndürür. |
getDataSourceUrl() |
Dize | Bu grafik, verilerini bir veri kaynağından alıyorsa bu veri kaynağının URL'sini döndürür. Aksi takdirde null değerini döndürür. |
getDataTable() |
google.visualization.DataTable |
Bu grafik, verilerini yerel olarak tanımlanmış bir
Döndürülen nesnede yaptığınız tüm değişiklikler, |
getChartType() |
Dize |
Sarmalanmış grafiğin sınıf adı. Bu bir Google grafiğiyse ad google.visualization için uygun değildir. Örneğin, bu bir ağaç grafikse "google.visualization.treemap" yerine "Treemap" döndürür.
|
getChartName() |
Dize | setChartName() tarafından atanan grafik adını döndürür. |
getChart() |
Grafik nesnesi referansı |
Bu ChartWrapper tarafından oluşturulan grafiğe bir referans döndürür (örneğin, bir
google.visualization.BarChart
veya
google.visualization.ColumnChart
).
ChartWrapper nesnesinde draw() çağrılana kadar boş değer döndürülür ve hazır bir etkinlik gerçekleşir. Döndürülen nesnede çağrılan yöntemler sayfaya yansıtılır.
|
getContainerId() |
Dize | Grafiğin DOM kapsayıcı öğesinin kimliği. |
getQuery() |
Dize | Bu grafiğin sorgu dizesi (varsa) ve bir veri kaynağını sorgular. |
getRefreshInterval() |
Sayı | Bir veri kaynağını sorguluyorsa bu grafik için herhangi bir yenileme aralığı. Sıfır, yenileme olmadığını gösterir. |
getOption(key, opt_default_val) |
Tüm türler |
Belirtilen grafik seçeneği değerini döndürür
|
getOptions() |
İtiraz et | Bu grafik için seçenekler nesnesini döndürür. |
getView() |
Nesne VEYA Dizi |
DataView başlatıcı nesnesini, dataview.toJSON() ile aynı biçimde veya bu tür bir diziyi döndürür.
|
setDataSourceUrl(url) |
Yok | Bu grafik için kullanılacak bir veri kaynağının URL'sini ayarlar. Bu nesne için de bir veri tablosu ayarlarsanız veri kaynağı URL'si yok sayılır. |
setDataTable(table) |
Yok | Grafik için DataTable'ı ayarlar. Şunlardan birini iletin: null; DataTable nesnesi; DataTable'ın JSON gösterimi; veya arrayToDataTable() söz diziminin ardından gelen dizi. |
setChartType(type) |
Yok |
Grafik türünü ayarlar. Sarmalanmış grafiğin sınıf adını iletin. Bu bir Google grafiğiyse, google.visualization olarak nitelendirilmeyin. Dolayısıyla, örneğin bir pasta grafik için "PieChart" değerini iletmeniz gerekir.
|
setChartName(name) |
Yok | Grafik için rastgele bir ad belirler. Özel bir grafik, özel olarak kullanılmak üzere tasarlanmadığı sürece grafikte herhangi bir yerde gösterilmez. |
setContainerId(id) |
Yok | Grafikte bulunan DOM öğesinin kimliğini ayarlar. |
setQuery(query_string) |
Yok | Bu grafik bir veri kaynağını sorguluyorsa sorgu dizesini ayarlar. Bu değeri belirtiyorsanız veri kaynağı URL'sini de ayarlamanız gerekir. |
setRefreshInterval(interval) |
Yok | Bir veri kaynağını sorguluyorsa bu grafiğin yenileme aralığını ayarlar. Bu değeri belirtiyorsanız bir veri kaynağı URL'si de ayarlamanız gerekir. Sıfır, yenileme olmadığını gösterir. |
setOption(key, value) |
Yok |
Tek bir grafik seçeneği değeri belirler. Burada anahtar seçenek adı, değer ise değerdir. Bir seçeneğin ayarını kaldırmak üzere değer için boş bırakın. Anahtarın, 'vAxis.title' gibi uygun bir ad olabileceğini unutmayın.
|
setOptions(options_obj) |
Yok | Bir grafik için tam seçenekler nesnesini ayarlar. |
setView(view_spec) |
Yok |
Temel veriler üzerinde filtre görevi gören DataView başlatıcı nesnesi ayarlar. Grafik sarmalayıcı, bu görünümün uygulanacağı veri tablosundan veya veri kaynağından temel veriler içermelidir. Bir dize veya DataView başlatıcı nesnesini (dataview.toJSON() tarafından döndürülene benzer) aktarabilirsiniz. Ayrıca, bir dizi DataView başlatıcı nesnesi de aktarabilirsiniz. Bu durumda, dizideki ilk DataView yeni bir veri tablosu oluşturmak için temel verilere ve ikinci DataView , ilk DataView uygulandığında vb. veri tablosuna uygulanır.
|
Etkinlikler
ChartWrapper nesnesi aşağıdaki etkinlikleri atar. Herhangi bir etkinlik atılmadan önce ChartWrapper.draw()
numarasını aramanız gerektiğini unutmayın.
Ad | Açıklama | Özellikler |
---|---|---|
error |
Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. | kimlik, mesaj |
ready |
Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşimde bulunmak ve yöntemleri çizdikten sonra çağırmak istiyorsanız draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.
|
Yok |
select |
Kullanıcı bir çubuğu veya göstergeyi tıkladığında tetiklenir. Bir grafik öğesi seçildiğinde, veri tablosundaki ilgili hücre seçilir; bir açıklama seçildiğinde veri tablosundaki ilgili sütun seçilir. Nelerin seçildiğini öğrenmek için ChartWrapper.getChart().
getSelection() numaralı telefonu arayın. Bunun, yalnızca alttaki grafik türü bir seçim etkinliği gerçekleştiğinde atlanacağını unutmayın.
|
Yok |
Örnek
Aşağıdaki iki snippet, eşdeğer bir çizgi grafik oluşturur. İlk örnek, grafiği tanımlamak için JSON değişmez gösterimini, ikinci örnek de bu değerleri ayarlamak için ChartWrapper yöntemlerini kullanır.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script> google.charts.load('current); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrap = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'containerId':'visualization', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); wrap.draw(); } </script> </head> <body> <div id="visualization" style="height: 400px; width: 400px;"></div> </body> </html>
Aynı grafik, artık ayarlayıcı yöntemleri kullanıyor:
<!DOCTYPE html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8'/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { // Define the chart using setters: var wrap = new google.visualization.ChartWrapper(); wrap.setChartType('LineChart'); wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); wrap.setContainerId('visualization'); wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'}); wrap.draw(); } </script> </head> <body> <div id='visualization' style='height: 400px; width: 400px;'></div> </body> </html>
ChartEditor Sınıfı
ChartEditor
sınıfı, kullanıcının hemen görselleştirmeyi özelleştirmesine olanak tanıyan bir sayfa içi iletişim kutusu açmak için kullanılır.
ChartEditor'ı kullanmak için:
-
charteditor
paketini yükleyin.google.charts.load()
içinde "grafik düzenleyici" paketini yükleyin. Düzenleyicide oluşturduğunuz grafik türü için paketleri yüklemeniz gerekmez. Grafik düzenleyici, gerektiğinde sizin için herhangi bir paket yükler. -
Kullanıcının özelleştireceği grafiği tanımlayan bir
ChartWrapper
nesnesi oluşturun. Bu grafik iletişim kutusunda gösterilir. Kullanıcı, grafiği yeniden tasarlamak, grafik türlerini ve hatta kaynak verileri değiştirmek için düzenleyiciyi kullanır. -
Yeni bir ChartEditor örneği oluşturun ve "ok" etkinliğini dinlemek için kaydolun. Bu etkinlik, kullanıcı iletişim kutusundaki "Tamam" düğmesini tıkladığında gösterilir. Alındığında, kullanıcı tarafından değiştirilen grafiği almak için
ChartEditor.getChartWrapper()
yöntemini çağırmanız gerekir. -
ChartWrapper
üzerindenChartEditor.openDialog()
numaralı telefonu arayın. Bu işlemle iletişim kutusu açılır. İletişim düğmeleri, kullanıcının düzenleyiciyi kapatmasını sağlar. Kapsamda olduğu süreceChartEditor
örneği kullanılabilir; kullanıcı iletişim kutusunu kapattıktan sonra örnek otomatik olarak kaldırılmaz. - Koddaki grafiği güncellemek için
setChartWrapper()
numaralı telefonu arayın.
Yöntemler
Yöntem | İade Değeri | Açıklama |
---|---|---|
openDialog(chartWrapper, opt_options) |
boş |
Grafik düzenleyici, sayfada yerleşik bir iletişim kutusu olarak açılır. İşlev hemen
döndürülür; iletişim kutusunun kapatılmasını beklemez. Örneğin kapsamını kaybetmezseniz iletişim kutusunu yeniden açmak için
|
getChartWrapper() |
ChartWrapper |
Kullanıcı değişikliklerini içeren, grafiği temsil eden bir ChartWrapper döndürür. |
setChartWrapper(chartWrapper) |
boş |
Düzenleyicide oluşturulan grafiği güncellemek için bu yöntemi kullanın.
ChartWrapper: Oluşturulacak yeni grafiği temsil eden bir |
closeDialog() |
boş | Grafik düzenleyici iletişim kutusunu kapatır. |
Seçenekler
Grafik düzenleyici aşağıdaki seçenekleri destekler:
Ad | Tür | Varsayılan | Açıklama |
---|---|---|---|
dataSourceInput |
Öğe tanıtıcısı veya "urlbox" | boş |
Kullanıcının grafik için bir veri kaynağı belirtmesini sağlamak amacıyla bunu kullanın. Bu özellik şu iki değerden biri olabilir:
|
Etkinlikler
Grafik düzenleyici aşağıdaki etkinlikleri düzenler:
Ad | Açıklama | Özellikler |
---|---|---|
ok |
Kullanıcı, iletişim kutusundaki "Tamam" düğmesini tıkladığında tetiklenir. Bu yöntemi aldıktan sonra, kullanıcı tarafından yapılandırılan grafiği almak için getChartWrapper() yöntemini çağırmanız gerekir.
|
yok |
cancel |
Kullanıcı, iletişim kutusundaki "İptal" düğmesini tıkladığında tetiklenir. | yok |
Örnek
Aşağıdaki örnek kod, doldurulmuş bir çizgi grafik içeren grafik düzenleyici iletişim kutusunu açar. Kullanıcı "Tamam"ı tıklarsa düzenlenen grafik sayfada belirtilen <div>
uygulamasına kaydedilir.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['charteditor']}); </script> <script type="text/javascript"> google.charts.setOnLoadCallback(loadEditor); var chartEditor = null; function loadEditor() { // Create the chart to edit. var wrapper = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chartEditor = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEditor, 'ok', redrawChart); chartEditor.openDialog(wrapper, {}); } // On "OK" save the chart to a <div> on the page. function redrawChart(){ chartEditor.getChartWrapper().draw(document.getElementById('vis_div')); } </script> </head> <body> <div id="vis_div" style="height: 400px; width: 600px;"></div> </body> </html>
Veri Manipülasyon Yöntemleri
google.visualization.data
ad alanı, DataTable
nesnelerinde SQL benzeri işlemler gerçekleştirmek için (örneğin, nesnelere katılmak veya sütun değerine göre gruplandırma) statik yöntemler içerir.
google.visualization.data
ad alanı aşağıdaki yöntemleri gösterir:
Yöntem | Açıklama |
---|---|
google.visualization.data.group
|
Belirtilen sütunlardaki değerlere göre gruplandırılmış bir tablo döndürmek için bir SQL GROUP BY işlemi gerçekleştirir. |
google.visualization.data.join
|
Bir veya daha fazla önemli sütundaki iki veri tablosunu birleştirir. |
group()
Doldurulan DataTable
nesnesini alır ve SQL benzeri bir GROUP BY işlemi gerçekleştirir. Bu sütun, belirtilen sütun değerlerine göre gruplandırılmış satır içeren bir tablo döndürür. Bunun DataTable
girişini değiştirmeyeceğini unutmayın.
Döndürülen tablo, belirtilen anahtar sütunlardaki her bir değer kombinasyonu için bir satır içerir. Her satırda anahtar sütunlarının yanı sıra anahtar kombinasyonuyla eşleşen tüm satırların birleştirilmiş sütun değerine sahip bir sütunu bulunur (örneğin, belirtilen sütundaki tüm değerlerin toplamı veya sayısı).
google.visualization.data
ad alanı, çeşitli kullanışlı toplama değerleri (örneğin, sum ve count) içerir ancak kendi tanımınızı tanımlayabilirsiniz (örneğin, standardDeviation veya secondsHighest). Kendi toplayıcınızı nasıl tanımlayacağınızla ilgili talimatlar, yöntem açıklamasından sonra verilir.
Söz dizimi
google.visualization.data.group(data_table, keys, columns)
- veri_tablosu
-
Giriş
DataTable
. Bu numara,group()
numaralı telefon aranarak değiştirilmez. - anahtarlar
-
Verilerin hangi sütunlara göre gruplanacağını belirten bir sayı ve/veya nesne dizisi. Sonuç tablosu, bu dizideki her sütunun yanı sıra sütunlardaki her sütunu içerir. Bu bir sayıysa gruplandırmak için
DataTable
girişinin sütun dizinidir. Bir nesne, belirtilen sütunu değiştirebilecek bir işlev içerir (örneğin, söz konusu sütundaki değere 1 ekleyin). Nesne aşağıdaki özelliklere sahip olmalıdır:- sütun: Dönüşümün uygulanacağı dt'den bir sütun dizini olan sayı.
- modifier: Bir değeri (her satırda bu sütundaki hücre değeri) kabul eden ve değiştirilen değeri döndüren bir işlev. Bu işlev, gruplamaya yardımcı olmak için sütun değerini değiştirmek amacıyla kullanılır. Örneğin, bir API'nin satırları üç aylık döneme göre gruplandırabilmesi için tarih sütunundan üç aylık bir hesaplama yapan birQuQuarter işlevi çağrılır. Hesaplanan değer, döndürülen tablodaki anahtar sütunlarında görüntülenir. Bu işlev bu nesnenin içinde satır içinde tanımlanabilir veya kodunuzun başka bir yerinde tanımladığınız bir işlev olabilir (bunun çağrı kapsama alanında olması gerekir). API, tek bir basit değiştirme işlevi sağlar. Kendinize ait daha kullanışlı işlevler oluşturmayla ilgili talimatları burada bulabilirsiniz. Bu işlevin kabul edebileceği veri türünü bilmeniz ve yalnızca bu türdeki sütunlarda çağırmanız gerekir. Ayrıca bu işlevin dönüş türünü bilmeniz ve bunu, aşağıda açıklanan tür özelliğinde belirtmeniz gerekir.
- tür: modifier işlevi tarafından döndürülen tür. Bu, bir JavaScript dize türü adı olmalıdır. Örneğin: "number" veya "boole".
-
label - [İsteğe bağlı] Döndürülen
DataTable
öğesinde bu sütunu atamak için bir dize etiketi. -
id - [İsteğe bağlı] Döndürülen
DataTable
sütununda bu sütunu atamak için bir dize kimliği.
Örnekler:[0]
,[0,2]
,[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
- sütunlar
-
[İsteğe bağlı] Çıkış sütunlarına ek olarak önemli sütunlara ek olarak hangi sütunların dahil edileceğini belirtmenizi sağlar. Satır grubundaki tüm satırlar tek bir çıkış satırı olarak sıkıştırıldığından, söz konusu satır grubu için hangi değerin gösterileceğini belirlemeniz gerekir. Örneğin, gruptaki ilk satırdaki sütun değerini veya söz konusu gruptaki tüm satırların ortalamasını göstermeyi seçebilirsiniz.
sütunlar, aşağıdaki özelliklere sahip bir nesne dizisidir:
- sütun - Gösterilecek sütunun dizinini belirten sayı.
- toplayıcı - Bu satır grubundaki bu sütunun tüm değerlerini içeren bir diziyi kabul eden ve sonuç satırında gösterilecek tek bir değeri döndüren bir işlev. Dönüş değeri, nesnenin type özelliği tarafından belirtilen türde olmalıdır. Kendi toplama işlevinizi oluşturmayla ilgili ayrıntılar aşağıda verilmiştir. Bu yöntemin hangi veri türlerini kabul ettiğini bilmeniz ve yalnızca uygun türdeki sütunlarda çağırmanız gerekir. API birçok yararlı toplama işlevi sağlar. Liste için aşağıdaki Sağlanan Toplama İşlevleri bölümüne veya kendi toplama işlevinizi nasıl yazacağınızı öğrenmek için Toplama işlevi oluşturma bölümüne bakın.
- tür - Toplama işlevinin dönüş türü. Bu, bir JavaScript dize türü adı olmalıdır. Örneğin: "number" veya "boole".
- label - [İsteğe bağlı] Döndürülen tabloda bu sütuna uygulanacak bir dize etiketi.
- id - [İsteğe bağlı] Döndürülen tabloda bu sütuna uygulanacak bir dize kimliği.
İade Değeri
Anahtarlarda listelenen her sütun için bir sütun ve sütunlarda listelenen her sütun için bir sütun içeren bir DataTable
. Tablo, soldan sağa doğru temel satırlara göre sıralanır.
Örnek
// This call will group the table by column 0 values. // It will also show column 3, which will be a sum of // values in that column for that row group. var result = google.visualization.data.group( dt, [0], [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}] ); *Input table* 1 'john' 'doe' 10 1 'jane' 'doe' 100 3 'jill' 'jones' 50 3 'jack' 'jones' 75 5 'al' 'weisenheimer' 500 *Output table* 1 110 3 125 5 500
Sağlanan Değiştirici İşlevleri
API, anahtarlara geçirebileceğiniz aşağıdaki değiştirici işlevlerini sağlar. Gruplandırma davranışını özelleştirmek için modifier parametresi.
İşlev | Giriş Dizi Türü | Dönüş Türü | Açıklama |
---|---|---|---|
google.visualization.data.month |
Tarih | number (sayı) | Bir tarih verildiğinde sıfır tabanlı ay değerini (0, 1, 2 vb.) döndürür. |
Sağlanan Toplama İşlevleri
API, sütunlara geçirebileceğiniz aşağıdaki toplama işlevlerini sağlar. aggregation dizisini uygulamalısınız.
İşlev | Giriş Dizi Türü | Dönüş Türü | Açıklama |
---|---|---|---|
google.visualization.data.avg |
number (sayı) | number (sayı) | Diziden geçen ortalama değer. |
google.visualization.data.count |
tüm türler | number (sayı) | Gruptaki satır sayısı. Boş ve yinelenen değerler sayılır. |
google.visualization.data.max |
sayı, dize, Tarih | sayı, dize, Tarih, boş | Dizideki maksimum değer. Dizelerde bu, sözlüksel olarak sıralanmış bir listedeki ilk öğedir; Tarih değerleri için bu en son tarihtir. Boş alanlar yoksayılır. Maksimum değer yoksa boş değer döndürür. |
google.visualization.data.min |
sayı, dize, Tarih | sayı, dize, Tarih, boş | Dizideki minimum değer. Dizelerde bu, sözlüksel olarak sıralanmış bir listedeki son öğedir; Tarih değerleri için bu en erken tarihtir. Boş alanlar yoksayılır. Minimum değer yoksa null değerini döndürür. |
google.visualization.data.sum |
number (sayı) | number (sayı) | Dizideki tüm değerlerin toplamı. |
Değiştirici işlevi oluşturma
Satırlarınızı group()
işlevinden önce basit bir dönüştürme işlemi gerçekleştirmek için bir değiştirici işlevi oluşturabilirsiniz. Bu işlev tek bir hücre değeri alır, bununla ilgili bir işlem gerçekleştirir (örneğin, değere 1 değerini ekler) ve değeri döndürür. Giriş ve dönüş türlerinin aynı türde olması gerekmez ancak arayanın giriş ve çıkış türlerini bilmesi gerekir. Tarihi kabul eden ve üç aylık dönemi döndüren bir işlev örneğini burada bulabilirsiniz:
// Input type: Date // Return type: number (1-4) function getQuarter(someDate) { return Math.floor(someDate.getMonth()/3) + 1; }
Toplama işlevi oluşturma
Bir satır grubundaki sütun değerleri grubunu kabul eden ve tek bir sayı döndüren (ör. değer sayısını veya ortalama değeri döndürme) bir toplama işlevi oluşturabilirsiniz. Aşağıda sağlanan sayı toplama işlevinin bir uygulamasını bulabilirsiniz. Bu işlev, satır grubunda kaç satır olduğunu gösterir:
// Input type: Array of any type // Return type: number function count(values) { return values.length; }
birleştirme()
Bu yöntem, bir SQL JOIN ifadesine benzer şekilde, iki veri tablosunu (DataTable
veya DataView
nesneleri) tek bir sonuç tablosunda birleştirir. İki tablo arasında bir veya daha fazla sütun çifti
(anahtar sütunları) belirtirsiniz ve çıkış tablosu, belirttiğiniz bir birleştirme yöntemine göre satırları içerir: yalnızca her iki anahtarın da eşleştiği satırlar; bir tablodan gelen tüm satırlar veya iki tablodan da gelen satırlar (anahtarların eşleşip eşleşmediğine bakılmaksızın). Sonuç tablosu yalnızca anahtar sütunlarının yanı sıra belirttiğiniz ek sütunları içerir. dt2'de yinelenen anahtarlar bulunamayacağını ancak dt1'de bulunabileceğini unutmayın. "Anahtar" terimi, belirli bir anahtar sütun değerinin değil, tüm anahtar sütununun değerinin kombinasyonu anlamına gelir. Dolayısıyla bir satırın A | B | C ve 0 ile 1 sütunları anahtar sütunlarsa bu satırın anahtarı AB'dir.
Söz dizimi
google.visualization.data.join(dt1, dt2, joinMethod, keys, dt1Columns, dt2Columns);
- 1. gün
- dt2 ile katılmak için doldurulan bir
DataTable
. - gt2
-
dt1 ile katılmak için doldurulan bir
DataTable
. Bu tabloda birden fazla özdeş anahtar olamaz (anahtar, anahtar sütun değerlerinin kombinasyonudur). - joinMethod
-
Birleştirme türünü belirten bir dize. dt1, bir dt2 satırıyla eşleşen birden fazla satıra sahipse çıkış tablosu, eşleşen tüm dt1 satırlarını içerir. Aşağıdaki değerler arasından seçim yapın:
- "full" (Çıkış) - Çıkış tablosu, anahtarların eşleşip eşleşmediğine bakılmaksızın her iki tablodaki tüm satırları içerir. Eşleşmeyen satırlarda boş hücre girişleri olur, eşleşen satırlar birleştirilir.
- 'internal' - Tam birleştirme yalnızca anahtarların eşleştiği satırları içerecek şekilde filtrelenir.
- "left" (sol): Çıkış tablosu, dt2'den eşleşen satır olup olmamasına bakılmaksızın dt1'den tüm satırları içerir.
- "right" (sağ) - Çıktı tablosu, dt1'den eşleşen satır olup olmamasına bakılmaksızın dt2'deki tüm satırları içerir.
- anahtarlar
-
Her iki tablodan da karşılaştırılacak önemli sütunlar dizisi. Her çift, iki öğeli bir dizidir. İlki dt1'deki bir anahtar, ikincisi dt2'deki bir anahtardır. Bu diziyi kullanarak sütunları dizin, kimlik veya etiketlerine göre
görebilirsiniz, bkz.
getColumnIndex
.
Sütunlar her iki tabloda da aynı türde olmalıdır. Tablodan bir satır eklemek için belirtilen tüm anahtarların joinMethod tarafından sağlanan kurala uygun olması gerekir. Anahtar sütunları, her zaman çıkış tablosuna dahil edilir. Yalnızca soldaki tablo olan dt1'de yinelenen anahtarlar bulunabilir. dt2'deki anahtarlar benzersiz olmalıdır. Buradaki "anahtar" terimi, bağımsız sütun değerleri değil, benzersiz anahtar sütunları kümesidir. Örneğin, anahtar sütunlarınız A ve B ise aşağıdaki tabloda yalnızca benzersiz anahtar değerleri olacaktır (ve bu nedenle dt2 olarak kullanılabilir):C B Jen Kırmızı Jen Mavi Fikret Kırmızı [[0,0], [2,1]]
, her iki tablodaki ilk sütundaki ve dt1 içindeki üçüncü sütundaki değerleri dt2'deki ikinci sütunla karşılaştırır. - dt1Sütunlar
-
dt1'in anahtar sütunlarına ek olarak çıkış tablosuna dahil edilecek dt1 öğesinden bir sütun dizisi. Bu dizi; sütunları dizinlerine, kimliklerine veya etiketlerine göre belirtebilir, bkz.
getColumnIndex
. - dt2Sütunlar
-
dt2'nin anahtar sütunlarına ek olarak dt2'den çıkış tablosuna dahil edilecek bir sütun dizisi. Bu dizi; sütunları dizinlerine, kimliklerine veya etiketlerine göre belirtebilir, bkz.
getColumnIndex
.
İade Değeri
dt1Sütunlar ve dt2Sütunlar anahtar sütunlarını içeren bir DataTable
. Bu tablo, soldan sağa doğru temel sütunlara göre sıralanmıştır. joinMethod "dahili" olduğunda tüm anahtar hücrelerin doldurulması gerekir. Diğer birleştirme yöntemleri için, eşleşen anahtar bulunamazsa tabloda, eşleşmeyen tüm anahtar hücreleri için boş değer bulunur.
Örnekler
*Tables* dt1 dt2 bob | 111 | red bob | 111 | point bob | 111 | green ellyn | 222 | square bob | 333 | orange jane | 555 | circle fred | 555 | blue jane | 777 | triangle jane | 777 | yellow fred | 666 | dodecahedron * Note that right table has duplicate Jane entries, but the key we will use is * columns 0 and 1. The left table has duplicate key values, but that is * allowed. *Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point jane | 777 | yellow | triangle * Note that both rows from dt1 are included and matched to * the equivalent dt2 row. *Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null ellyn | 222 | null | square fred | 555 | blue | null fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle *Left join* google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null fred | 555 | blue | null jane | 777 | yellow | triangle *Right join* google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point ellyn | 222 | null | square fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle
Biçimlendiriciler
Google Görselleştirme API'sı, görselleştirmede verileri yeniden biçimlendirmek için kullanılabilecek biçimlendiriciler sunar. Bu biçimlendiriciler, tüm satırlarda belirtilen sütunun biçimlendirilmiş değerini değiştirir. Not:
- Biçimlendiriciler yalnızca biçimlendirilmiş değerleri değiştirir, temel değerleri değiştirmez. Örneğin, gösterilen değer "1.000,00 TL" ancak temel değer yine "1000" olur.
- Biçimlendiriciler aynı anda yalnızca bir sütunu etkiler. Birden fazla sütunu yeniden biçimlendirmek için değiştirmek istediğiniz her sütuna bir biçimlendirici uygulayın.
- Kullanıcı tanımlı biçimlendiriciler de kullanıyorsanız belirli Google Görselleştirme biçimlendiricileri kullanıcı tanımlı tüm biçimlendiricileri geçersiz kılar.
- Doldurduğunuz
DataTable
nesnesini alın. - Yeniden biçimlendirmek istediğiniz her sütun için:
- Biçimlendiriciniz için tüm seçenekleri belirten bir nesne oluşturun. Bu, bir dizi özellik ve değere sahip temel bir JavaScript nesnesidir. Hangi özelliklerin desteklendiğini görmek için biçimlendiricinizin dokümanlarına bakın. (İsteğe bağlı olarak, seçeneklerinizi belirten bir nesne değişmez gösterim gösterimi nesnesi aktarabilirsiniz.)
- Seçenekler nesnenizi ileterek biçimleyicinizi oluşturun.
-
Yeniden biçimlendirilecek verilerin
DataTable
ve (sıfır) sütun numarasını ileterekformatter
.format(table, colIndex)
yöntemini çağırın. Her sütuna yalnızca bir biçimlendirme aracı uygulayabileceğinizi unutmayın. İkinci bir biçimlendirici uygulamak yalnızca ilkinin etkilerinin üzerine yazar.
Önemli: Biçimlendiricilerin çoğunda özel biçimlendirmenin görüntülenmesi için HTML etiketleri gerekir. GörselleştirmenizallowHtml
seçeneğini destekliyorsa doğru değerini ayarlamanız gerekir.
Verilere uygulanan gerçek biçimlendirme, API'nin yüklenmiş olduğu yerel ayardan türetilir. Daha ayrıntılı bilgi için belirli bir yerel ayara sahip grafikler yükleme başlıklı makaleyi inceleyin.
Önemli: Biçimlendiriciler yalnızca DataTable
ile kullanılabilir, DataView
ile kullanılamaz (DataView
nesne salt okunur).
Biçimlendiriciyi kullanmaya ilişkin genel adımlar şunlardır:
Bir tarih sütununun uzun tarih biçimini kullanacak şekilde biçimlendirilmiş tarih değerlerini değiştirmeyle ilgili bir örneği burada bulabilirsiniz: "1 Ocak 2009":
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(3); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); // Create a formatter. // This example uses object literal notation to define the options. var formatter = new google.visualization.DateFormat({formatType: 'long'}); // Reformat our data. formatter.format(data, 1); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true});
Biçimlendiricilerin çoğu aşağıdaki iki yöntemi açığa çıkarır:
Yöntem | Açıklama |
---|---|
google.visualization.formatter_name(options) |
formatter_name, özel bir biçimleyici sınıfı adıdır.
// Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options); |
format(data, colIndex) |
Belirtilen sütundaki verileri yeniden biçimlendirir.
|
Google Görselleştirme API'sı aşağıdaki biçimleri sunar:
Biçimlendirici Adı | Açıklama |
---|---|
OkBiçim | Hücre değerinin belirli bir değerin üstünde veya altında olduğunu belirten bir yukarı veya aşağı ok ekler. |
Çubuk Biçimi | Hücre değerinin belirtilen bir değerin üstünde veya altında olup olmadığını gösteren renkli bir çubuk ekler. |
Renk Biçimi | Değerin belirli bir aralıkta olup olmadığına göre hücreyi renklendirir. |
Tarih Biçimi | Date veya DateTime değerini "1 Ocak 2009", "1/1/09" ve "1 Ocak 2009" gibi birkaç farklı şekilde biçimlendirir. |
Sayı Biçimi | Sayısal değerlerin çeşitli yönlerini biçimlendirir. |
Desen Biçimi | Aynı satırdaki hücre değerlerini rastgele bir metinle birlikte belirli bir hücreye birleştirir. |
OkBiçim
Değerin belirtilen bir taban değerin üzerinde veya altında olmasına bağlı olarak sayısal hücreye yukarı veya aşağı ok ekler. Taban değere eşitse ok gösterilmez.
Seçenekler
ArrowFormat
, oluşturucuya aktarılan aşağıdaki seçenekleri destekler:
Option | Açıklama |
---|---|
base |
Hücre değerini karşılaştırmak için kullanılan, taban değeri belirten sayı. Hücre değeri daha yüksekse hücre yeşil bir yukarı ok, hücre değeri daha aşağıdaysa kırmızı aşağı ok içerir, aynıysa ok içermez. |
Örnek kod
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues Change'); data.addRows([ ['Shoes', {v:12, f:'12.0%'}], ['Sports', {v:-7.3, f:'-7.3%'}], ['Toys', {v:0, f:'0%'}], ['Electronics', {v:-2.1, f:'-2.1%'}], ['Food', {v:22, f:'22.0%'}] ]); var table = new google.visualization.Table(document.getElementById('arrowformat_div')); var formatter = new google.visualization.ArrowFormat(); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true});
Çubuk Biçimi
Sayısal hücreye, hücre değerinin belirli bir temel değerin üzerinde veya altında olduğunu belirten renkli bir çubuk ekler.
Seçenekler
BarFormat
, oluşturucuya aktarılan aşağıdaki seçenekleri destekler:
Option | ÖrnekAçıklama |
---|---|
base |
Hücre değerinin karşılaştırılacağı taban değer. Hücre değeri daha yüksekse tabanın sağına çizilirse sola doğru alınır. Varsayılan değer 0'dır. |
colorNegative |
Çubukların negatif değer bölümünü gösteren bir dizedir. Olası değerler "kırmızı", "yeşil" ve "mavi"dir; varsayılan değer "kırmızı"dır. |
colorPositive |
Çubukların pozitif değer bölümünün rengini belirten bir dizedir. Olası değerler "kırmızı", "yeşil" ve "mavi"dir. Varsayılan değer 'mavi'dir. |
drawZeroLine |
Negatif değerler mevcut olduğunda 1 piksellik koyu taban çizgisinin çizilip çizilmeyeceğini gösteren bir boole değeridir. Çubuklar, çubukların görsel taramasını geliştirmek için kullanılır. Varsayılan değer: "false". |
max |
Çubuk aralığı için maksimum sayı değeri. Varsayılan değer, tablodaki en yüksek değerdir. |
min |
Çubuk aralığı için minimum sayı değeri. Varsayılan değer, tablodaki en düşük değerdir. |
showValue |
Doğru ise değerleri ve çubukları, yanlışsa yalnızca çubukları gösterir. Varsayılan değer, true (doğru) değeridir. |
width |
Her çubuğun piksel cinsinden kalınlığı. Varsayılan değer 100'dür. |
Örnek kod
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('barformat_div')); var formatter = new google.visualization.BarFormat({width: 120}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
Renk Biçimi
Hücre değerine bağlı olarak sayısal bir hücrenin ön veya arka planına renk atar. Bu oluşturucu, seçeneklerini oluşturucuda almaması nedeniyle olağan dışı bir durum. Bunun yerine, format()
işlevini çağırmadan önce renk aralıkları eklemek için addRange()
veya addGradientRange()
değerlerini istediğiniz kadar çağırmanız gerekir. Renkler, "siyah", "#000000" veya "#000" gibi kabul edilebilir HTML biçimlerinde belirtilebilir.
Yöntemler
ColorFormat
aşağıdaki yöntemleri destekler:
Yöntem | Açıklama |
---|---|
google.visualization.ColorFormat() |
Kurucu. Bağımsız değişken almaz. |
addRange(from, to, color, bgcolor) |
Hücre değerine bağlı olarak, hücre için ön plan rengi ve/veya arka plan rengi belirtir. Belirtilen from - from aralığında bir değere sahip olan hücrelere color ve bgcolor değerleri atanır. 1-1000 arasında ve 1000 ile 2000 arasında bir aralık oluşturulduğundan 1.000 değerini kapsamayacağından aralığın kapsayıcı olmadığını unutmayın.
|
addGradientRange(from, to, color, fromBgColor,
toBgColor)
|
Hücre değerine göre bir aralıktan arka plan rengi atar. Renk, hücrenin değerini alt sınır renginden üst sınır rengine kadar bir aralıkla eşleşecek şekilde ölçeklendirilir. Bu yöntemin,
|
format(dataTable, columnIndex) |
Biçimlendirmeyi belirtilen sütuna uygulamak için kullanılan standart format() yöntemi. |
Örnek kod
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('colorformat_div')); var formatter = new google.visualization.ColorFormat(); formatter.addRange(-20000, 0, 'white', 'orange'); formatter.addRange(20000, null, 'red', '#33ff33'); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
Tarih Biçimi
JavaScript Date
değerini "1 Ocak 2016", "1/1/16" ve "1 Ocak 2016" dahil olmak üzere çeşitli şekillerde biçimlendirir.
Seçenekler
DateFormat
, oluşturucuya aktarılan aşağıdaki seçenekleri destekler:
Option | Açıklama |
---|---|
formatType |
Tarih için hızlı biçimlendirme seçeneği. Aşağıdaki dize değerleri, 28 Şubat 2016 tarihinin gösterildiği gibi yeniden biçimlendirilerek desteklenir:
Hem |
pattern |
ICU tarih ve saat biçimine benzer şekilde, değere uygulanacak özel bir biçim kalıbı.
Örneğin:
Hem |
timeZone |
Tarih değerinin görüntüleneceği saat dilimi. Bu, GMT + bu saat dilimi sayısını (negatif olabilir) gösteren sayısal bir değerdir. Tarih nesnesi, oluşturulduğu bilgisayarın varsayılan saat dilimiyle varsayılan olarak oluşturulur. Bu seçenek, söz konusu değeri farklı bir saat diliminde görüntülemek için kullanılır. Örneğin, İngiltere, Greenwich'te bulunan bir bilgisayarda 17:00'ye yönelik bir Tarih nesnesi oluşturduysanız ve saat diliminin -5 (options['timeZone'] = -5 veya ABD'de Doğu Pasifik Saati) olduğunu belirttiğinizde görüntülenen değer 12 öğlen olur.
|
Yöntemler
DateFormat
aşağıdaki yöntemleri destekler:
Yöntem | Açıklama |
---|---|
google.visualization.DateFormat(options) |
Kurucu. Daha fazla bilgi için yukarıdaki seçenekler bölümüne bakın. |
format(dataTable, columnIndex) |
Biçimlendirmeye belirtilen sütuna uygulanan standart format() yöntemi. |
formatValue(value) |
Belirli bir değerin biçimlendirilmiş değerini döndürür.
Bu yöntem, |
Örnek kod
function drawDateFormatTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date (Long)'); data.addColumn('date', 'Start Date (Medium)'); data.addColumn('date', 'Start Date (Short)'); data.addRows([ ['Mike', new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26)], ['Bob', new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0)], ['Alice', new Date(2006, 7, 16), new Date(2006, 7, 16), new Date(2006, 7, 16)] ]); // Create three formatters in three styles. var formatter_long = new google.visualization.DateFormat({formatType: 'long'}); var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'}); var formatter_short = new google.visualization.DateFormat({formatType: 'short'}); // Reformat our data. formatter_long.format(data, 1); formatter_medium.format(data,2); formatter_short.format(data, 3); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }
Tarih Kalıpları Hakkında Daha Fazla Bilgi
Desteklenen kalıplarla ilgili daha fazla ayrıntı aşağıda verilmiştir:
Kalıplar CUC tarih ve saat biçimine benzer, ancak şu kalıplar henüz desteklenmemektedir: Kalıplarla çakışmayı önlemek için çıkışta gösterilmesini istediğiniz tüm metin metinleri tek tırnak işareti içine alınmalıdır.
"K 'o''clock.'"
.
Kalıp | Açıklama | Örnek Çıkış |
---|---|---|
GG | Çağı belirleyici. | "REKLAM" |
yy veya yyyy | yıl. | 1996 |
A |
Yılın ayı. Ocak için:
|
"Temmuz" "07" |
g | Ayın günü. Ekstra 'd' değerleri baştaki sıfırları ekler. | 10 |
sa. | 12 saat ölçeğinde saat. Ekstra 'h' değerleri baştaki sıfırları da ekler. | 12 |
H | 24 saat ölçeğinde saat. Ekstra Hk değeri, baştaki sıfırları da ekler. | 0 |
m | Dakika olarak saat. Fazladan "M" değerleri baştaki sıfırları da ekler. | 30 |
sn. | Dakika olarak ikinci. Ekstra 's' değerleri baştaki sıfırları da ekler. | 55 |
C | Kesirli saniye. Fazladan "S" değerleri sıfırlarla doldurulur. | 978 |
E |
Haftanın günü. "Salı" için aşağıdaki çıkışlar:
|
"Salketler" "Salı" |
Aa | ÖÖ/ÖS | "ÖS" |
k | Gündüz saati (1~24). Ekstra 'k' değerleri baştaki sıfırları da ekler. | 24 |
K | Saat ÖÖ/ÖS (0~11). Ekstra 'k' değerleri baştaki sıfırları da ekler. | 0 |
z | Saat dilimi. 5. saat dilimi için "UTC+5" sonucunu verir |
"UTC+5" |
Z |
RFC 822 biçiminde saat dilimi. Saat dilimi -5 için: Z, ZZ, ZZZ -0500 ürün ZZZZ ve daha fazlası "GMT -05:00" üretir |
"-0800" "GMT -05:00" |
v | Saat dilimi (genel). |
"ET/GMT-5" |
' | metin için kaçış | 'Tarih=' |
'' | tek tırnak | "yy" |
Sayı Biçimi
Sayısal sütunların nasıl biçimlendirilmesi gerektiğini açıklar. Biçimlendirme seçenekleri, bir ön ek simgesi (dolar işareti gibi) veya bin işaretçi olarak kullanılacak noktalama işaretini belirtmeyi içerir.
Seçenekler
NumberFormat
, oluşturucuya aktarılan aşağıdaki seçenekleri destekler:
Option | Açıklama |
---|---|
decimalSymbol |
Ondalık işaretçi olarak kullanılacak bir karakter. Varsayılan değer noktadır (.). |
fractionDigits |
Ondalık işaretinin ardından kaç basamak gösterileceğini belirten bir sayı. Varsayılan değer 2'dir. Sayıdan daha fazla basamak belirtirseniz daha küçük değerler için sıfırlar gösterilir. Kısaltılan değerler yuvarlanır (5 yukarı yuvarlanır). |
groupingSymbol |
Ondalık işaretinin solundaki basamakları üçlü gruplar halinde kullanmak için kullanılacak karakter. Varsayılan değer virgüldür (,). |
negativeColor |
Negatif değerlerin metin rengi. Varsayılan değer yok. Değerler "kırmızı" veya "#FF0000" gibi kabul edilebilir HTML renk değerleri olabilir. |
negativeParens |
Doğru değeri, negatif değerlerin parantez içine alınması gerektiğini gösteren boole değeridir. Varsayılan değer, doğru değeridir. |
pattern |
Biçim dizesi. Sağlandığında
Biçim dizesi
ICU deseni grubunun
bir alt kümesidir.
Örneğin |
prefix |
Değer için bir dize ön eki (ör. "$"). |
suffix |
Değer için bir dize son eki (ör. "%"). |
Yöntemler
NumberFormat
aşağıdaki yöntemleri destekler:
Yöntem | Açıklama |
---|---|
google.visualization.NumberFormat(options) |
Kurucu. Daha fazla bilgi için yukarıdaki seçenekler bölümüne bakın. |
format(dataTable, columnIndex) |
Biçimlendirmeyi belirtilen sütuna uygulamak için kullanılan standart format() yöntemi. |
formatValue(value) |
Belirli bir değerin biçimlendirilmiş değerini döndürür. Bu yöntem, |
Örnek kod
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('numberformat_div')); var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
Desen Biçimi
Belirlenen sütunların değerlerini rastgele metinle birlikte tek bir sütunda birleştirmenizi sağlar. Örneğin, adınız ve soyadınız için bir sütun varsa üçüncü sütunu {last name} ve {first name} ile doldurabilirsiniz. Bu biçimlendirici, oluşturucu ve format()
yöntemi için kurallara uygun değil. Talimatlar için aşağıdaki Yöntemler bölümüne bakın.
Yöntemler
PatternFormat
aşağıdaki yöntemleri destekler:
Yöntem | Açıklama |
---|---|
google.visualization.PatternFormat(pattern) |
Kurucu. Seçenekler nesnesini almaz. Bunun yerine bir dize pattern parametresi alır. Bu, herhangi bir metnin yanı sıra hedef sütuna hangi sütun değerlerinin yerleştirileceğini açıklayan bir dizedir. Başka bir sütundaki değeri yerleştirmek için dizenize yer tutucular yerleştirin. Yer tutucular
Örnek kodAşağıdaki örnekte, birinci ve ikinci öğelerin var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
Birkaç ek parametreyle standart biçimlendirme çağrısı:
Tablodan sonraki biçimlendirme örneklerini inceleyin. |
Aşağıda, dört sütunlu bir tablo için birkaç örnek giriş ve çıkış örneği verilmiştir.
Row before formatting (4 columns, last is blank): John | Paul | Jones | [empty] var formatter = new google.visualization.PatternFormat("{0} {1} {2}"); formatter.format(data, [0,1,2], 3); Output: John | Paul | Jones | John Paul Jones var formatter = new google.visualization.PatternFormat("{1}, {0}"); formatter.format(data, [0,2], 3); Output: John | Paul | Jones | Jones, John
Örnek kod
Aşağıdaki örnekte, bir e-posta adresi oluşturmak için iki sütundaki verilerin nasıl birleştirileceği gösterilmektedir. Orijinal kaynak sütunlarını gizlemek için DataView nesnesi kullanır:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Email'); data.addRows([ ['John Lennon', 'john@beatles.co.uk'], ['Paul McCartney', 'paul@beatles.co.uk'], ['George Harrison', 'george@beatles.co.uk'], ['Ringo Starr', 'ringo@beatles.co.uk'] ]); var table = new google.visualization.Table(document.getElementById('patternformat_div')); var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [0, 1]); var view = new google.visualization.DataView(data); view.setColumns([0]); // Create a view with the first column only. table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
GadgetYardımcısı
Google Görselleştirme API'sını kullanan Gadget'lar yazmayı basitleştiren bir yardımcı sınıf.
Marka
google.visualization.GadgetHelper()
Yöntemler
Yöntem | İade Değeri | Açıklama |
---|---|---|
createQueryFromPrefs(prefs) |
google.visualization.Query |
Statik. Yeni bir google.visualization.Query örneği oluşturun ve özelliklerini gadget tercihlerindeki değerlere göre ayarlayın. prefs parametresinin türü _IG_Prefs
|
validateResponse(response) |
Boole |
Statik. response parametresi google.visualization.QueryResponse türündedir. Yanıt veri içeriyorsa true özelliğini döndürür. Sorgu yürütme başarısız olduysa ve yanıt veri içermiyorsa
false değerini döndürür. Bir hata oluştuysa bu yöntem bir hata mesajı gösterir.
|
Sorgu Sınıfları
Aşağıdaki nesneler, Google E-Tablolar gibi harici bir veri kaynağına veri sorguları göndermek için kullanılabilir.
- Sorgu: Giden veri isteğini sarmalar.
- QueryResponse: Veri kaynağından yanıtı işler.
Sorgu
Bir veri kaynağına gönderilen sorguyu temsil eder.
Marka
google.visualization.Query(dataSourceUrl, opt_options)
Parametreler
- veri Kaynağı URL'si
- [Zorunlu, Dize] Sorgunun gönderileceği URL. Google E-Tabloları için Grafikler ve E-Tablolar belgelerini inceleyin.
- opt_seçenekleri
-
[İsteğe bağlı, Nesne] İstek için kullanılan seçenekler haritası. Not: Kısıtlanmış bir veri kaynağına erişiyorsanız bu parametreyi kullanmamalısınız. Desteklenen özellikler şunlardır:
-
sendMethod - [İsteğe bağlı, Dize] Sorguyu göndermek için kullanılacak yöntemi belirtir. Aşağıdaki dize değerlerinden birini seçin:
- 'xhr' - Sorguyu XmlHttpRequest kullanarak gönderin.
- 'scriptInjection' - Komut dosyası yerleştirmeyi kullanarak sorguyu gönderin.
-
'makeRequest' - [Yalnızca kullanımdan kaldırılan gadget'lar için kullanılabilir] Sorguyu Gadget API'yi
makeRequest()
kullanarak gönderin. Belirtilirse makeRequestParams değerini de belirtmeniz gerekir. -
'auto' - Veri kaynağı URL'sinden
tqrt
URL parametresi tarafından belirtilen yöntemi kullanın.tqrt
şu değerlere sahip olabilir: "xhr", "scriptInjection" veya "makeRequest".tqrt
eksik veya geçersiz bir değere sahipse varsayılan değer, aynı alan adı istekleri için "xhr" ve web alanları arası istekler için "scriptInjection" parametreleridir.
-
makeRequestParams - [Object] Bir
makeRequest()
sorgusu için parametre eşlemesi. Yalnızca sendMethod değeri "makeRequest" ise kullanılır ve gereklidir.
-
sendMethod - [İsteğe bağlı, Dize] Sorguyu göndermek için kullanılacak yöntemi belirtir. Aşağıdaki dize değerlerinden birini seçin:
Yöntemler
Yöntem | İade Değeri | Açıklama |
---|---|---|
abort() |
Yok |
setRefreshInterval() ile başlayan otomatik sorgu gönderme işlemini durdurur.
|
setRefreshInterval(seconds)
|
Yok |
Sorguyu, Bu yöntemi kullanıyorsanız
Bu yöntemi sıfır olarak (varsayılan) tekrar çağırarak veya |
setTimeout(seconds) |
Yok |
Zaman aşımı hatası yükseltilmeden önce veri kaynağının yanıt vermesi için beklenecek saniye sayısını ayarlar. seconds sıfırdan büyük bir sayı. Varsayılan zaman aşımı süresi 30 saniyedir. Bu yöntem kullanılıyorsa, send yöntemini çağırmadan önce çağrılmalıdır.
|
setQuery(string) |
Yok |
Sorgu dizesini ayarlar. string parametresinin değeri geçerli bir sorgu olmalıdır. Kullanılırsa bu yöntem, send yöntemini çağırmadan önce çağrılmalıdır.
Sorgu dili hakkında daha fazla bilgi edinin.
|
send(callback) |
Yok |
Sorguyu veri kaynağına gönderir. callback , veri kaynağı yanıt verdiğinde çağrılacak bir işlev olmalıdır. Geri çağırma işlevi, google.visualization.QueryResponse türünde tek bir parametre alır.
|
Sorgu yanıtı
Veri kaynağından alınan sorgu yürütme yanıtını temsil eder. Bu sınıfın bir örneği, Query.send çağrıldığında ayarlanan geri çağırma işlevi için bağımsız değişken olarak iletilir.
Yöntemler
Yöntem | İade Değeri | Açıklama |
---|---|---|
getDataTable() |
Veri Tablosu |
Veri tablosunu veri kaynağının döndürdüğü şekilde döndürür. Sorgu yürütme başarısız olduysa ve veri döndürülmezse null değerini döndürür.
|
getDetailedMessage() |
Dize | Başarısız olan sorgular için ayrıntılı hata mesajı döndürür. Sorgu yürütme başarılı olduysa bu yöntem boş bir dize döndürür. Döndürülen mesaj, geliştiricilere yönelik olan ve teknik bilgi (ör. {salary} sütunu yok) içerebilen bir mesajdır. |
getMessage() |
Dize | Başarısız olan sorgular için kısa bir hata mesajı döndürür. Sorgu yürütme başarılı olduysa bu yöntem boş bir dize döndürür. Döndürülen mesaj, son kullanıcılara yönelik kısa bir mesajdır (ör. "Geçersiz Sorgu" veya "Erişim Reddedildi"). |
getReasons() |
Dize dizisi |
Daha fazla girişin sıfır dizisini döndürür. Her giriş, sorgu yürütülürken karşılaşılan bir hata veya uyarı kodunu içeren kısa bir dizedir. Olası kodlar:
|
hasWarning() |
Boole | Sorgu yürütme herhangi bir uyarı mesajı alırsa true değerini döndürür. |
isError() |
Boole |
Sorgu yürütme başarısız olursa ve yanıt hiçbir veri tablosu içermiyorsa true değerini döndürür. Sorgu yürütme başarılı olduysa ve yanıt bir veri tablosu içeriyorsa <false> değerini döndürür.
|
Hatalı Görüntüleme
API, kullanıcılarınıza özel hata iletileri göstermenize yardımcı olmak için çeşitli işlevler sunar. Bu işlevleri kullanmak için sayfada biçimlendirilmiş bir hata mesajı alacağı API kapsayıcısını (genellikle <div>
olur) sağlayın. Bu kapsayıcı, görselleştirme kapsayıcı öğesi veya yalnızca hatalar için kullanılan bir kapsayıcı olabilir. Görselleştirmeyi içeren öğeyi belirtirseniz hata mesajı görselleştirmenin üstünde gösterilir.
Ardından, hata mesajını göstermek veya kaldırmak için aşağıdan uygun işlevi çağırın.
Tüm işlevler, google.visualization.errors
ad alanındaki statik işlevlerdir.
Birçok görselleştirme hata etkinliği verebilir. Bu konuda daha fazla bilgi edinmek için aşağıdaki hata etkinliğine bakın.
Sorgu Sarmalayıcı Örneği'nde örnek bir özel hata görebilirsiniz.
İşlev | İade Değeri | Açıklama |
---|---|---|
addError(container, message, opt_detailedMessage,
opt_options)
|
Oluşturulan hata nesnesini tanımlayan dize kimliği değeri. Bu, sayfadaki benzersiz bir değerdir ve hatayı kaldırmak veya kapsayıcı öğesini bulmak için kullanılabilir. |
Belirtilen sayfa öğesine, metin ve biçimlendirmenin belirtildiği bir hata görüntüleme bloğu ekler.
|
addErrorFromQueryResponse(container, response) |
Oluşturulan hata nesnesini tanımlayan dize kimliği değeri veya yanıt bir hata belirtmiyorsa null. Bu, sayfadaki benzersiz bir değerdir ve hatayı kaldırmak veya kapsayıcı öğesini bulmak için kullanılabilir. |
Bu yönteme bir sorgu yanıtı ve hata mesajı kapsayıcısı iletme: Sorgu yanıtı bir sorgu hatasını gösteriyorsa belirtilen sayfa öğesinde bir hata mesajı görüntüler. Sorgu yanıtı boşsa yöntem bir JavaScript hatası verir. Hata görüntülemek için sorgu işleyicinizde alınan QueryResponse öğesini bu iletiye iletin. Ayrıca, ekranın stilini türe uygun (ör.
|
removeError(id) |
Boole: Hata kaldırıldıysa true (doğru), aksi durumda false (yanlış). |
Kimlik ile belirtilen hatayı sayfadan kaldırır.
|
removeAll(container) |
Yok |
Belirtilen kapsayıcıdaki tüm hata bloklarını kaldırır. Belirtilen kapsayıcı yoksa bir hata oluşur.
|
getContainer(errorId) |
Belirtilen hatayı içeren bir DOM öğesini işleyin veya bulunamazsa boş bırakın. |
errorID tarafından belirtilen hatayı içeren kapsayıcı öğesine bir tutma yeri alır.
|
Etkinlikler
Çoğu görselleştirme, bir şey olduğunu belirtmek için etkinlikleri tetikler. Bir grafik kullanıcısı olarak genellikle bu etkinlikleri dinlemek istersiniz. Kendi görselleştirmenizi kodluyorsanız bu tür etkinlikleri kendi başınıza da tetiklemek isteyebilirsiniz.
Aşağıdaki yöntemler, bir görselleştirmenin içinden geliştiricilerin etkinlikleri dinlemesini, mevcut etkinlik işleyicilerini kaldırmasını veya etkinlikleri tetiklemesini sağlar.
- google.visualization.events.addHearer() ve google.visualization.events.addOneTimeHearer() etkinlikleri kullanır.
- google.visualization.events.removeHearer() mevcut bir işleyiciyi kaldırır
- google.visualization.events.removeAllHearers() belirli bir grafiğin tüm dinleyicilerini kaldırır
- google.visualization.events.trigger() bir etkinliği tetikler.
addHearer()
Sayfanızda barındırılan görselleştirme tarafından tetiklenen etkinlikleri almak için kaydolmak üzere bu yöntemi çağırın. Varsa hangi bağımsız değişkenin işleme işlevine iletileceğini belgelemeniz gerekir.
google.visualization.events.addListener(source_visualization, event_name, handling_function)
- kaynak_görselleştirme
- Kaynak görselleştirme örneğinin tutma yeri.
- event_name
- Dinlenecek etkinliğin dize adı. Görselleştirme hangi etkinlikleri atadığını belgelemelidir.
- sevkiyata_hazırlık_işlevi
- source_visualization etkinlik_adı etkinliğini tetiklediğinde çağrılacak yerel JavaScript işlevinin adı. İşleme işlevi, tüm etkinlik bağımsız değişkenlerini parametre olarak iletir.
İadeler
Yeni dinleyici için bir işleyici işleyici. İşleyici, daha sonra gerekirse google.visualization.events.removeHearer() yöntemini çağırarak bu dinleyiciyi kaldırmak için kullanılabilir.
Örnek
Seçim etkinliğini almak için kaydolmayla ilgili bir örneği aşağıda bulabilirsiniz
var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, options); google.visualization.events.addListener(table, 'select', selectHandler); function selectHandler() { alert('A table row was selected'); }
eklemeOneTimeHearer()
Bu ad addListener()
ile aynıdır ancak yalnızca bir kez dinlemesi gereken etkinlikler için tasarlanmıştır. Etkinliğin daha sonra atılması, işleme işlevini çağırmaz.
Bunun ne zaman faydalı olduğuna dair bir örnek: Her çizim bir ready
etkinliğinin gönderilmesine neden olur. Kodunuzu yalnızca ilk ready
tarafından yürütülmesini istiyorsanız addListener
yerine addOneTimeListener
kullanmanız gerekir.
removeHearer()
Mevcut bir etkinlik işleyicinin kaydını iptal etmek için bu yöntemi çağırın.
google.visualization.events.removeListener(listener_handler)
- dinleyici_kullanıcı
- google.visualization.events.addHearer() tarafından döndürüldüğü gibi kaldırılacak dinleyici işleyicisi.
allAllHearers()
Belirli bir görselleştirme örneğinin tüm etkinlik dinleyicilerinin kaydını iptal etmek için bu yöntemi çağırın.
google.visualization.events.removeAllListeners(source_visualization)
- kaynak_görselleştirme
- Tüm etkinlik işleyicilerin kaldırılması gereken kaynak görselleştirme örneği için bir herkese açık kullanıcı adı.
trigger()
Görselleştirme uygulamacıları tarafından çağrılır. Görselleştirmeniz aracılığıyla bu yöntemi çağırarak rastgele bir ada ve değer grubuna sahip bir etkinlik tetikleyebilirsiniz.
google.visualization.events.trigger(source_visualization, event_name, event_args)
- kaynak_görselleştirme
-
Kaynak görselleştirme örneğinin tutma yeri. Bu işlevi, gönderen görselleştirme tarafından tanımlanan bir yöntemle çağırıyorsanız
this
anahtar kelimesini iletmeniz yeterlidir. - event_name
- Etkinliği çağıracak bir dize adı. Dilediğiniz dize değerini seçebilirsiniz.
- etkinlik_bağımsızlıkları
- [isteğe bağlı] Alma yöntemine aktarılacak ad/değer çiftleri haritası. Örneğin:{message: "Merhaba,!", skor: 10, ad: "Fred"}. Herhangi bir etkinliğe gerek yoksa null değerini iletebilirsiniz. Alıcı, bu parametre için null değerini kabul etmeye hazır olmalıdır.
Örnek
Aşağıda, onclick yöntemi çağrıldığında "select" adlı bir yöntemi atlayan görselleştirme örneği verilmiştir. Herhangi bir değer geri vermez.
MyVisualization.prototype.onclick = function(rowIndex) { this.highlightRow(this.selectedRow, false); // Clear previous selection this.highlightRow(rowIndex, true); // Highlight new selection // Save the selected row index in case getSelection is called. this.selectedRow = rowIndex; // Trigger a select event. google.visualization.events.trigger(this, 'select', null); }
Standart Görselleştirme Yöntemleri ve Özellikleri
Her görselleştirmede aşağıdaki zorunlu ve isteğe bağlı yöntem ve özellikler grubu bulunmalıdır. Ancak, bu standartları uygulamak için tür denetimi olmadığını, bu yüzden her görselleştirmenin dokümanlarını okumanız gerektiğini unutmayın.
- Oluşturucu
- draw()
- getAction() [isteğe bağlı]
- getSelection() [isteğe bağlı]
- removeAction() [isteğe bağlı]
- setAction() [isteğe bağlı]
- setSelection() [isteğe bağlı]
Not: Bu yöntemler google.visualization ad alanı değil, görselleştirmenin ad alanındadır.
Oluşturucu
Oluşturucu, görselleştirme sınıfınızın adına sahip olmalı ve söz konusu sınıfın bir örneğini döndürmelidir.
visualization_class_name(dom_element)
- dom_Element
- Görselleştirmenin yerleştirilmesi gereken DOM öğesinin işaretçisi.
Örnek
var org = new google.visualization.OrgChart(document.getElementById('org_div'));
draw()
Sayfadaki görselleştirmeyi çizer. Perde arkası, bir sunucudan grafik getirme veya bağlı görselleştirme kodunu kullanarak sayfada grafik oluşturma olabilir. Veriler veya seçenekler her değiştiğinde bu yöntemi çağırmanız gerekir. Nesne, oluşturucuya iletilen DOM öğesinin içinde çizilmelidir.
draw(data[, options])
- veriler
-
Grafik çekmek için kullanılacak verileri tutan
DataTable
veyaDataView
. Bir grafiktenDataTable
çıkarmaya yönelik standart bir yöntem yoktur. - seçenekler
-
[İsteğe bağlı] Özel seçeneklerin ad/değer çiftleri haritası. Yükseklik ve genişlik, arka plan renkleri ve altyazılar buna örnek olarak verilebilir. Görselleştirme dokümanlarında hangi seçeneklerin kullanılabildiğini listelemeli ve bu parametreyi belirtmezseniz varsayılan seçenekleri desteklemelisiniz.
Bir seçenek eşlemesine aktarmak için JavaScript nesne değişmez söz dizimini kullanabilirsiniz:
{x:100, y:200, title:'An Example'}
Örnek
chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
getAction()
İsteğe bağlı olarak bu, ipuçları içeren ve ipucu işlemlerine izin veren görselleştirmeler tarafından açığa çıkarılır.
İstenen actionID
değerini içeren ipucu işlem nesnesini döndürür.
Örnek:
// Returns the action object with the ID 'alertAction'. chart.getAction('alertAction');
getSelection()
İsteğe bağlı olarak, grafikte seçili olan mevcut verilere erişmenize olanak veren görselleştirmeler isteğe bağlıdır.
selection_array getSelection()
İadeler
selection_array. row
özelliği null ise seçim bir sütundur. column
özelliği null ise seçim bir satırdır; her ikisi de null değilse, bu belirli bir veri öğesidir. Seçili öğenin değerini almak için DataTable.getValue()
yöntemini çağırabilirsiniz. Alınan dizi setSelection()
içine aktarılabilir.
Örnek
function myClickHandler(){ var selection = myVis.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) { message += '{row:' + item.row + ',column:' + item.column + '}'; } else if (item.row != null) { message += '{row:' + item.row + '}'; } else if (item.column != null) { message += '{column:' + item.column + '}'; } } if (message == '') { message = 'nothing'; } alert('You selected ' + message); }
removeAction()
İsteğe bağlı olarak bu, ipuçları içeren ve ipucu işlemlerine izin veren görselleştirmeler tarafından açığa çıkarılır.
İstenen actionID
değerini içeren ipucu işlem nesnesini grafiğinizden kaldırır.
Örnek:
// Removes an action from chart with the ID of 'alertAction'. chart.removeAction('alertAction');
setAction()
İsteğe bağlı olarak bu, ipuçları içeren ve ipucu işlemlerine izin veren görselleştirmeler tarafından açığa çıkarılır. Yalnızca temel grafikler için (çubuk, sütun, çizgi, alan, dağılım, birleşik, balon, pasta, halka, mum, histogram, basamaklı alan) çalışır.
Kullanıcı işlem metnini tıkladığında yürütülecek bir ipucu işlemi belirler.
setAction(action object)
setAction
yöntemi, bir nesneyi işlem parametresi olarak alır. Bu nesnede 3 özellik belirtilmelidir: id
- ayarlanan işlemin kimliği, text
- işlem için ipucunda görünmesi gereken metin ve action
- bir kullanıcı işlem metnini tıkladığında çalışması gereken işlev.
İpucu işlemlerinin tümü, grafiğin draw()
yöntemini çağırmadan önce ayarlanmalıdır.
Örnek:
// Sets a tooltip action which will pop an alert box on the screen when triggered. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); } });
setAction
yöntemi de iki ek özellik tanımlayabilir: visible
ve enabled
. Bu özellikler, ipucu işleminin görünür ve/veya etkin olup olmayacağını belirten boolean
değerleri döndüren işlevler olmalıdır.
Örnek:
// The visible/enabled functions can contain any logic to determine their state // as long as they return boolean values. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); }, visible: function() { return true; }, enabled: function() { return true; } });
setSelection()
İsteğe bağlı olarak görselleştirmedeki bir veri girişini (ör. alan grafiğindeki bir nokta veya çubuk grafikteki bir çubuk) seçer. Bu yöntem çağrıldığında, görselleştirme yeni seçimin ne olduğunu görsel olarak belirtmelidir. setSelection()
uygulandığında "seçim" etkinliği etkinleştirilmemelidir. Görselleştirmeler seçimin bir kısmını yoksayabilir. Örneğin, yalnızca seçilen satırları gösterebilecek bir tablo, setSelection()
uygulamasındaki hücre veya sütun öğelerini yoksayabilir veya tüm satırı seçebilir.
Bu yöntem her çağrıldığında seçili öğelerin seçimi kaldırılır ve iletilen yeni seçim listesi uygulanır. Belirli öğelerin seçimini kaldırmanın açık bir yolu yoktur. Öğelerin seçimini kaldırmak için setSelection()
öğesini seçilen öğe olarak kalır; tüm öğelerin seçimini kaldırmak için setSelection()
, setSelection(null)
veya setSelection([])
numaralı telefonu arayın.
setSelection(selection_array)
- seçim_dizisi
-
Her biri sayısal satır ve/veya sütun özelliğine sahip bir nesne dizisi.
row
vecolumn
, seçilecek veri tablosundaki bir öğenin sıfır tabanlı satır veya sütun numarasıdır. Bütün bir sütunu seçmek içinrow
değerini boş, tüm satırı seçmek içinsecolumn
değerini null olarak ayarlayın. Örnek:setSelection([{row:0,column:1},{row:1, column:null}])
(0,1) hücresini ve 1. satırın tamamını seçer.
Çeşitli Statik Yöntemler
Bu bölümde, google.visualization
ad alanında gösterilen çeşitli faydalı yöntemler yer almaktadır.
diziToDataTable()
Bu yöntem, iki boyutlu bir diziyi alıp bunu bir DataTable biçimine dönüştürür.
Sütun veri türleri, sağlanan verilere göre otomatik olarak belirlenir. Sütun veri türleri, dizinin ilk satırında (sütun başlığı satırı) nesne değişmez değeri gösterimiyle de belirtilebilir (ör. {label: 'Start Date', type: 'date'}
). İsteğe bağlı veri rolleri de kullanılabilir ancak nesne değişmez gösterimi kullanılarak açıkça tanımlanmalıdır. Nesne değişmez değeri gösterimi, herhangi bir hücre için de kullanılabilir. Böylece Hücre Nesneleri'ni tanımlayabilirsiniz).
Söz dizimi
google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
- ikiDizi
- Her satırın veri tablosundaki bir satırı temsil ettiği iki boyutlu dizi. opt_firstRowIsData yanlışsa (varsayılan) ilk satır başlık etiketleri olarak yorumlanır. Her sütunun veri türleri, verilen verilerden otomatik olarak yorumlanır. Bir hücrenin değeri yoksa uygun şekilde boş veya boş bir değer belirtin.
- opt_firstRowIsData
- İlk satırın bir başlık satırı tanımlayıp tanımlamadığı. Bu değer doğruysa tüm satırların veri olduğu varsayılır. Yanlış değerine ayarlanırsa ilk satır bir başlık satırı olarak kabul edilir ve değerler sütun etiketleri olarak atanır. Varsayılan, yanlıştır.
İadeler
Yeni bir DataTable
.
Örnekler
Aşağıdaki kodda, aynı DataTable
nesnesini oluşturmanın üç yolu gösterilmektedir:
// Version 1: arrayToDataTable method var data2 = google.visualization.arrayToDataTable([ [{label: 'Country', type: 'string'}, {label: 'Population', type: 'number'}, {label: 'Area', type: 'number'}, {type: 'string', role: 'annotation'}], ['CN', 1324, 9640821, 'Annotated'], ['IN', 1133, 3287263, 'Annotated'], ['US', 304, 9629091, 'Annotated'], ['ID', 232, 1904569, 'Annotated'], ['BR', 187, 8514877, 'Annotated'] ]); // Version 2: DataTable.addRows var data3 = new google.visualization.DataTable(); data3.addColumn('string','Country'); data3.addColumn('number','Population'); data3.addColumn('number','Area'); data3.addRows([ ['CN', 1324, 9640821], ['IN', 1133, 3287263], ['US', 304, 9629091], ['ID', 232, 1904569], ['BR', 187, 8514877] ]); // Version 3: DataTable.setValue var data = new google.visualization.DataTable(); data.addColumn('string','Country'); data.addColumn('number', 'Population'); data.addColumn('number', 'Area'); data.addRows(5); data.setValue(0, 0, 'CN'); data.setValue(0, 1, 1324); data.setValue(0, 2, 9640821); data.setValue(1, 0, 'IN'); data.setValue(1, 1, 1133); data.setValue(1, 2, 3287263); data.setValue(2, 0, 'US'); data.setValue(2, 1, 304); data.setValue(2, 2, 9629091); data.setValue(3, 0, 'ID'); data.setValue(3, 1, 232); data.setValue(3, 2, 1904569); data.setValue(4, 0, 'BR'); data.setValue(4, 1, 187); data.setValue(4, 2, 8514877);
çizim grafiği()
Bu yöntem, tek bir görüşmede grafik oluşturur. Bu yöntemi kullanmanın avantajı, daha az kod gerektirmesidir ve görselleştirmeleri yeniden kullanmak için seri dizeleri olarak serileştirip kaydedebilirsiniz. Bu yöntem, oluşturulan grafiğe bir tanıtıcı döndürmediği için grafik etkinliklerini yakalamak amacıyla yöntem dinleyicilerini atayamazsınız.
Söz dizimi
google.visualization.drawChart(chart_JSON_or_object)
- grafiği_JSON_veya_nesne
- Aşağıdaki özelliklere sahip bir JSON değişmez dizesi veya JavaScript nesnesi (büyük/küçük harfe duyarlı):
Özellik | Tür | Zorunlu | Varsayılan | Açıklama |
---|---|---|---|---|
grafik türü | Dize | Zorunlu | yok |
Görselleştirmenin sınıf adı. Google paketleri için google.visualization paket adı atlanabilir. İlgili görselleştirme kitaplığı henüz yüklenmediyse bu yöntem, kitaplığı bir Google görselleştirmesiyse sizin için yükler. Üçüncü taraf görselleştirmelerini açık bir şekilde yüklemeniz gerekir. Örnekler: Table ,
PieChart , example.com.CrazyChart .
|
kapsayıcı kimliği | Dize | Zorunlu | yok | Sayfanızda görselleştirmeyi barındıracak DOM öğesinin kimliği. |
seçenekler | İtiraz et | İsteğe bağlı | yok |
Görselleştirme seçeneklerini açıklayan bir nesne. JavaScript değişmez gösterimini kullanabilir veya nesneye tutma yeri sağlayabilirsiniz. Örnek:
"options": {"width": 400, "height": 240,
"is3D": true, "title": "Company Performance"}
|
veri tablosu | İtiraz et | İsteğe bağlı | Yok |
Görselleştirmeyi doldurmak için kullanılan DataTable . Bu, yukarıda açıklandığı gibi bir DataTable'ın tam JSON dizesi temsilidir veya doldurulan bir google.visualization.DataTable nesnesine yönelik bir tutma yeri ya da
arrayToDataTable(opt_firstRowIsData=false)
tarafından kabul edilen 2 boyutlu bir dizi olabilir.
Bu özelliği ya da dataSourceUrl özelliğini belirtmeniz gerekir.
|
veriKaynak URL'si | Dize | İsteğe bağlı | Yok |
Grafik verilerini doldurmak için bir veri kaynağı sorgusu (örneğin, Google E-Tablosu). Bu özelliği veya dataTable özelliğini belirtmeniz gerekir.
|
sorgu | Dize | İsteğe bağlı | Yok |
dataSourceUrl değerini belirtirseniz verileri filtrelemek veya değiştirmek için Görselleştirme sorgu dilini kullanarak SQL benzeri bir sorgu dizesi belirtebilirsiniz.
|
yenilemeInterval | Sayı | İsteğe bağlı | Yok |
Görselleştirmenin sorgu kaynağını ne sıklıkta yenilemesi gerektiği saniye cinsinden belirtilir. Bunu yalnızca dataSourceUrl belirlerken belirtin.
|
göster | Nesne VEYA Dizi | İsteğe bağlı | Yok |
dataTable veya dataSourceUrl parametresi tarafından tanımlandığı şekilde temel veriler üzerinde filtre görevi gören bir DataView başlatıcı nesnesi ayarlar.
Bir dize veya DataView başlatıcı nesnesini (ör. dataview.toJSON() tarafından döndürülen) aktarabilirsiniz.
Örnek: "view": {"columns": [1, 2]} Ayrıca, bir dizi başlatıcı nesnesi ekleyebilirsiniz. Bu durumda, dizideki ilk DataView yeni bir veri tablosu oluşturmak için temel verilere uygulanır ve ikinci DataView ise ilk DataView uygulamasından kaynaklanan sonucu elde etmek için veri tablosuna uygulanır.
|
Örnekler
E-tablo veri kaynağına dayalı bir tablo grafiği oluşturur ve SELECT A,D WHERE D > 100 ORDER BY D sorgusunu içerir.
<script type="text/javascript"> google.charts.load('current'); // Note: No need to specify chart packages. function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
Sonraki örnekte aynı tablo oluşturulur, ancak yerel olarak bir DataTable
oluşturulur:
<script type='text/javascript'> google.charts.load('current'); function drawVisualization() { var dataTable = [ ["Country", "Population Density"], ["Indonesia", 117], ["China", 137], ["Nigeria", 142], ["Pakistan", 198], ["India", 336], ["Japan", 339], ["Bangladesh", 1045] ]; google.visualization.drawChart({ "containerId": "visualization_div", "dataTable": dataTable, "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true, } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
Bu örnekte, bir dosyadan yüklemiş olabileceğiniz grafiğin JSON dizesi temsili iletilir:
<script type="text/javascript"> google.charts.load('current'); var myStoredString = '{"containerId": "visualization_div",' + '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' + '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' + '"refreshInterval": 5,' + '"chartType": "Table",' + '"options": {' + ' "alternatingRowStyle": true,' + ' "showRowNumber" : true' + '}' + '}'; function drawVisualization() { google.visualization.drawChart(myStoredString); } google.charts.setOnLoadCallback(drawVisualization); </script>
drawToolbar()
Bu, birçok görselleştirmeye eklenebilen araç çubuğu öğesinin kurucusudur. Bu araç çubuğu, kullanıcının görselleştirme verilerini farklı biçimlerde dışa aktarmasına veya görselleştirmenin farklı yerlerde kullanılmak üzere yerleştirilebilir bir sürümünü sağlamasına olanak tanır. Daha fazla bilgi ve kod örneği için araç çubuğu sayfasını inceleyin.