Google Görselleştirme API'sı Referansı

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'ımı JavaScript'te mi yoksa nesne değişmez değeri gösteriminde mi oluşturmalıyım?

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() ve addRows() ç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

addColumn(type, opt_label, opt_id)

VEYA

addColumn(description_object)

Sayı

Veri tablosuna yeni bir sütun ekler ve yeni sütunun dizinini döndürür. Yeni sütunun tüm hücrelerine null değeri atanır. Bu yöntemin iki imzası vardır:

İlk imzada aşağıdaki parametreler vardır:

  • type - Sütundaki değerlerin veri türünü içeren bir dize. Tür, şunlardan biri olabilir: 'string', 'number', 'boolean', 'date', 'datetime', ve 'timeofday'.
  • opt_label - [İsteğe bağlı] Sütun etiketi bulunan bir dize. Sütun etiketi genellikle görselleştirmenin bir parçası olarak, örneğin bir tabloda sütun başlığı olarak veya bir pasta grafikte açıklama etiketi olarak görüntülenir. Değer belirtilmemişse boş bir dize atanır.
  • opt_id - [İsteğe bağlı] Sütun için benzersiz bir tanımlayıcıya sahip dize. Değer belirtilmemişse boş bir dize atanır.

İkinci imzada aşağıdaki üyelerle birlikte tek bir nesne parametresi bulunur:

  • type - Sütun veri türünü açıklayan bir dizedir. Yukarıdaki type değerleriyle aynı değerler.
  • label - [İsteğe bağlı, dize] Sütun için bir etiket.
  • id - [İsteğe bağlı, dize] Sütunun kimliği.
  • role - [İsteğe bağlı, dize] Sütun için bir rol.
  • pattern - [İsteğe bağlı, dize] Sütun değerinin nasıl gösterileceğini belirten sayı (veya tarih) biçimi dizesi.

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

  • opt_cellArray [isteğe bağlı] JavaScript gösterimindeki yeni satır için verileri belirten bir satır nesnesi. Bu parametre dahil edilmezse bu yöntem, tablonun sonuna yeni ve boş bir satır ekler. Bu parametre, bir hücre değerleri dizisidir: Yalnızca bir hücre için değer belirtmek isterseniz hücre değerini belirtmeniz yeterlidir (ör. hücre için biçimlendirilmiş bir değer ve/veya özellik belirtmek istiyorsanız 55 veya 'hello'); bir hücre nesnesi kullanın (ör. {v:55, f:'Elli beş'}). Aynı yöntem çağrısında basit değerleri ve hücre nesnelerini karıştırabilirsiniz). Boş bir hücre için null veya boş bir dizi girişi kullanın.

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

  • numOrArray - Sayı veya dizi:
    • Sayı - Kaç tane yeni, doldurulmamış satır ekleneceğini belirten bir sayı.
    • Dizi: Bir dizi yeni satırı doldurmak için kullanılan satır nesneleri dizisi. Her satır, addRow() konusunda açıklandığı gibi bir nesnedir. Boş bir hücre için null veya boş bir dizi girişi kullanın.

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

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.

Sorgular tarafından alınan veri tablolarında sütun kalıbı, veri kaynağı veya sorgu dilinin format ifadesi tarafından ayarlanır. Desene örnek olarak '#,##0.00' verilebilir. Kalıplar hakkında daha fazla bilgi edinmek için sorgu dili referansını inceleyin.

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ı DataTable içinde değiştirdiğini unutmayın.

  • columnIndex, özellik alınacak sütunun sayısal dizinidir.
getColumnProperty(columnIndex, name) Otomatik

Adlandırılmış özelliğin değerini veya belirtilen sütun için bu tür bir özellik ayarlanmadığında null değerini döndürür. İade türü, mülke bağlı olarak değişir.

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • name, özellik adı olarak bir dizedir.

Ş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 min ve max. Aralıkta değer yoksa min ve max, null değerini içerir.

columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.

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.

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.

Döndürülen sütun türü şunlardan biri olabilir: 'string', 'number', 'boolean', 'date', 'datetime', ve 'timeofday'

getDistinctValues(columnIndex) Nesne dizisi

Belirli bir sütundaki benzersiz değerleri, artan düzende döndürür.

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.

Döndürülen nesnelerin türü getValue yöntemiyle döndürülenle aynı.

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 DataView.setRows() giriş olarak kullanılabilir.

filters - Kabul edilebilir bir hücre değerini açıklayan nesneler dizisi. Bu yöntem, belirtilen filtrelerin tümüyle eşleşiyorsa satır dizini döndürür. Her filtre, değerlendirilecek satırdaki sütunun dizinini ve aşağıdakilerden birini belirten sayısal bir column özelliğine sahip bir nesnedir:

  • Belirtilen sütundaki hücrenin tam olarak eşleşmesi gereken bir değere sahip value özelliği. Değer, sütunla aynı türde olmalıdır; veya
  • Aşağıdaki özelliklerden biri veya her ikisi de filtrelenen sütunla aynı türdedir:
    • minValue - Hücre için minimum değer. Belirtilen sütundaki hücre değeri, bu değerden büyük veya bu değere eşit olmalıdır.
    • maxValue - Hücrenin maksimum değeri. Belirtilen sütundaki hücre değeri, bu değerden küçük veya buna eşit olmalıdır.
    minValue (veya maxValue) için null veya tanımlanmamış bir değer, aralığın alt (veya üst) sınırının uygulanmayacağı anlamına gelir.

İsteğe bağlı başka bir özellik olan test, değer veya aralık filtrelemeyle birleştirilecek bir işlevi belirtir. İşlev; hücre değeri, satır ve sütun dizinleri ve veri tablosuyla çağrılır. Satırın sonuçtan hariç tutulması gerekiyorsa yanlış değerini döndürmelidir.

Örnek: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]), dördüncü sütunun (sütun dizini 3) tam olarak 42 sütun, üçüncü sütunun (sütun dizini 2) ise "bar" ile "foo" (dahil) arasında olduğu tüm satırların dizinlerini artan sırayla içerir.

getFormattedValue(rowIndex, columnIndex) Dize

Belirtilen satır ve sütun dizinlerindeki hücrenin biçimlendirilmiş değerini döndürür.

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • ColumnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdı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ı DataTable içinde değiştirdiğini unutmayın.

  • rowIndex hücrenin satır dizinidir.
  • columnIndex hücrenin sütun dizinidir.
getProperty(rowIndex, columnIndex, name) Otomatik

Adlandırılmış özelliğin değerini veya belirtilen hücre için böyle bir özellik ayarlanmamışsa null değerini döndürür. İade türü, mülke bağlı olarak değişir.

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • name, özellik adına sahip bir dizedir.

Ş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ı DataTable içinde değiştirdiğini unutmayın.

  • rowIndex, özellik alınacak satırın dizinidir.
getRowProperty(rowIndex, name) Otomatik

Adlandırılmış özelliğin değerini veya belirtilen satır için bu tür bir özellik ayarlanmamışsa null değerini döndürür. İade türü, mülke bağlı olarak değişir.

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • name, özellik adına sahip bir dizedir.

Ş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 sort() numaralı telefonu arayın. Sıralamayı, sortColumns parametresine ilettiğiniz türe bağlı olarak birkaç şekilde belirtebilirsiniz:

  • Tek bir sayı, sıralama ölçütü olarak kullanılacak sütunun dizinini belirtir. Sıralama artan düzende olacaktır. Örnek: sortColumns(3), artan düzende 4. sütuna göre sıralanır.
  • Sıralama ölçütü sütun dizininin sayısını ve isteğe bağlı desc boole özelliğini içeren tek bir nesne. desc doğru değerine ayarlanırsa belirli sütun azalan düzende sıralanır. Aksi takdirde sıralama artan düzende yapılır. Örnekler: sortColumns({column: 3}), 4. sütuna göre artan düzende; sortColumns({column: 3, desc: true}) ise 4. sütuna göre artan düzende sıralar.
  • Sütunun sıralanacağı bir dizi dizi. İlk numara, sıralanacak birincil sütundur, ikincisi ikincildir ve bu şekilde devam eder. Bu, ilk sütundaki iki değer eşit olduğunda sonraki sütundaki değerlerin karşılaştırıldığı anlamına gelir. Örnek: sortColumns([3, 1, 6]) önce 4. sütuna (artan düzende), ardından 2. sütuna (artan düzende) ve ardından 7. sütuna (artan düzende) göre sıralama yapar.
  • Her biri sıralama ölçütü sütun numarası ve isteğe bağlı desc boole özelliği içeren bir dizi nesne. desc doğru değerine ayarlanırsa belirli sütun azalan düzende sıralanır (varsayılan değer artan düzende). Birinci nesne sıralanacak birincil sütundur, ikinci nesne ikincildir ve bu şekilde devam eder. Yani ilk sütundaki iki değer eşit olduğunda sonraki sütundaki değerler karşılaştırılır. Örnek: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) önce 4. sütuna (artan düzende), ardından 2 sütunu azalan düzende ve ardından 7 sütun azalan düzende sıralanır.

Döndürülen değer bir sayı dizisidir. Her sayı, DataTable satırının dizinidir. DataTable satırın döndürülmesi, döndürülen dizinin sırasına göre yapıldığında söz konusu satırların sortColumns ile sıralanması gerekir. Bir görselleştirmede görüntülenen satır kümesini hızlı bir şekilde değiştirmek için çıkış, DataView.setRows() girişi olarak kullanılabilir.

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.
Ayrıca bkz. sıra

Ö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 null değerini döndürür. İade türü, mülke bağlı olarak değişir.

  • name, özellik adına sahip bir dizedir.

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

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.

Döndürülen değerin türü sütun türüne bağlıdır (bkz. getColumnType):

  • Sütun türü "dize" ise değer bir dizedir.
  • Sütun türü "number" ise değer bir sayıdır.
  • Sütun türü "boole" ise değer boole'dir.
  • Sütun türü "date" veya "date" ise değer bir Date nesnesidir.
  • Sütun türü "timeofday" ise değer, dört sayı dizisinden oluşur: [saat, dakika, saniye, milisaniye].
  • Hücre değeri boşsa null değerini döndürür.
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.

  • columnIndex, yeni sütunun gerekli dizinini içeren bir sayıdır.
  • type, sütunun değerlerinin veri türüne sahip bir dize olmalıdır. Tür, şunlardan biri olabilir: 'string', 'number', 'boolean', 'date', 'datetime', ve 'timeofday'.
  • label, sütun etiketine sahip bir dize olmalıdır. Sütun etiketi genellikle görselleştirmenin bir parçası olarak, örneğin bir sütun başlığı olarak veya pasta grafikte açıklama etiketi olarak görüntülenir. Değer belirtilmemişse boş bir dize atanır.
  • id, sütun için benzersiz bir tanımlayıcıya sahip dize olmalıdır. Herhangi bir değer belirtilmezse boş bir dize atanır.

Şu makaleyi de inceleyebilirsiniz: addColumn

insertRows(rowIndex, numberOrArray) Yok

Belirtilen satır dizinine belirtilen sayıda satır ekleyin.

  • rowIndex, yeni satırların ekleneceği dizin numarasıdır. Belirtilen dizin numarasından başlayarak satırlar eklenecek.
  • numberOrArray, eklenecek yeni boş satırların sayısı veya dizine eklenecek bir veya daha fazla doldurulmuş satırın dizisidir. Satır nesnesi dizisi ekleme söz dizimi için addRows() adresine göz atın.

Şu makaleyi de inceleyebilirsiniz: addRows

removeColumn(columnIndex) Yok

Belirtilen dizindeki sütunu kaldırır.

  • columnIndex, geçerli bir sütun dizinine sahip bir sayı olmalıdır.

Şu makaleyi de inceleyebilirsiniz: removeColumn

removeColumns(columnIndex, numberOfColumns) Yok

Belirtilen dizindeki sütundan başlayarak belirtilen sayıda sütunu kaldırır.

  • numberOfColumns sütunu, kaldırılacak sütun sayısıdır.
  • columnIndex, geçerli bir sütun dizinine sahip bir sayı olmalıdır.

Şu makaleyi de inceleyebilirsiniz: removeColumn

removeRow(rowIndex) Yok

Belirtilen dizindeki satırı kaldırır.

  • rowIndex, geçerli bir satır dizinine sahip bir sayı olmalıdır.

Şu makaleyi de inceleyebilirsiniz: removeRows

removeRows(rowIndex, numberOfRows) Yok

Belirtilen dizindeki satırdan başlayarak belirtilen sayıda satırı kaldırır.

  • numberOfRows, kaldırılacak satır sayısıdır.
  • rowIndex, geçerli bir satır dizinine sahip bir sayı olmalıdı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.

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • value [İsteğe bağlı], belirtilen hücreye atanan değerdir. Bu değerin üzerine yazmamak için bu parametreyi undefined olarak ayarlayın; bu değeri temizlemek için null olarak ayarlayın. Değerin türü sütun türüne bağlıdır (bkz. getColumnType()):
    • Sütun türü "dize" ise değer bir dize olmalıdır.
    • Sütun türü "sayı" ise değer bir sayı olmalıdır.
    • Sütun türü "boole" ise değer boole olmalıdır.
    • Sütun türü "date" veya "date" ise değer bir Date nesnesi olmalıdır.
    • Sütun türü "timeofday" ise değer, dört sayı dizisi olmalıdır: [saat, dakika, saniye, milisaniye].
  • formattedValue [İsteğe bağlı], değerin dize olarak biçimlendirildiği bir dizedir. Bu değerin üzerine yazmamak için bu parametreyi undefined olarak ayarlayın. Bu değeri temizlemek ve API'nin gerektiğinde varsayılan biçimlendirmeyi value özelliğine uygulamasını sağlamak için değeri null; açık bir şekilde biçimlendirilmiş bir değer ayarlamak için boş bir dizeye ayarlayın. Biçimlendirilmiş değer genellikle görselleştirmeler tarafından değer etiketlerini görüntülemek için kullanılır. Örneğin, biçimlendirilmiş değer bir pasta grafikte etiket metni olarak görünebilir.
  • properties [İsteğe bağlı] bu hücre için ek özelliklere sahip bir Object (ad/değer eşlemesidir). Bu değerin üzerine yazmamak için bu parametreyi undefined olarak ayarlayın; bu değeri temizlemek için null olarak ayarlayın. 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: setValue(), setFormattedValue(), setProperty(), setProperties().

setColumnLabel(columnIndex, label) Yok

Bir sütunun etiketini ayarlar.

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • label, sütuna atanacak etiketi içeren bir dizedir. Sütun etiketi genellikle görselleştirmenin bir parçası olarak görüntülenir. Örneğin, sütun etiketi bir tabloda sütun başlığı olarak veya pasta grafikte açıklama etiketi olarak görüntülenebilir.

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

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • name, özellik adına sahip bir dizedir.
  • value, belirtilen sütunun belirtilen adlandırılmış özelliğine atanacak herhangi bir tür değeridir.

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

  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • properties, bu sütun için ek özelliklere sahip bir Object (ad/değer eşlemesi) şeklindedir. null belirtilirse sütunun tüm ek özellikleri kaldırılır.

Şu makaleyi de inceleyebilirsiniz: setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) Yok

Hücrenin biçimlendirilmiş değerini ayarlar.

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • formattedValue, görüntüleme için biçimlendirilmiş değeri olan bir dizedir. Bu değeri temizlemek ve API'nin hücre değerine gereken şekilde varsayılan biçimlendirmeyi uygulamasını sağlamak için değeri formatValue olarak null ile ayarlayın. Boş bir biçimlendirilmiş değeri açık bir şekilde ayarlamak için değeri boş bir dizeye ayarlayın.

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

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • name, özellik adına sahip bir dizedir.
  • value, belirtilen hücrenin belirtilen adlandırılmış özelliğine atanacak herhangi bir tür değeridir.

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

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır.
  • properties, bu hücre için ek özelliklere sahip bir Object (ad/değer eşlemesi). null belirtilirse hücrenin tüm ek özellikleri kaldırılır.

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

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • name, özellik adına sahip bir dizedir.
  • value, belirtilen satırın belirtilen adlandırılmış özelliğine atanacak herhangi bir türden bir değerdir.

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

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • properties, bu satır için ek özelliklere sahip bir Object (ad/değer eşlemesi) öğesidir. null belirtilirse satırın tüm ek özellikleri kaldırılır.

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

  • name, özellik adına sahip bir dizedir.
  • value, tablonun belirtilen adlandırılmış özelliğine atanacak herhangi bir türden bir değerdir.

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

  • properties, tablo için ek özelliklere sahip bir Object (ad/değer eşlemesi) öğesidir. null belirtilirse tablonun tüm ek özellikleri kaldırılır.

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

  • rowIndex sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.
  • columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır. Bu yöntem, bu hücre için biçimlendirilmiş bir değer belirlemenize izin vermez. Bunun için setFormattedValue() yöntemini çağırın.
  • value, belirtilen hücreye atanan değerdir. Döndürülen değerin türü sütun türüne bağlıdır (getColumnType'ı inceleyin):
    • Sütun türü "dize" ise değer bir dize olmalıdır.
    • Sütun türü "sayı" ise değer bir sayı olmalıdır.
    • Sütun türü "boole" ise değer boole olmalıdır.
    • Sütun türü "date" veya "date" ise değer bir Date nesnesi olmalıdır.
    • Sütun türü "timeofday" ise değer, dört sayı dizisi olmalıdır: [saat, dakika, saniye, milisaniye].
    • Herhangi bir sütun türü için değer null olarak ayarlanabilir.

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]
  • 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 Mülk

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.

Hücre Nesneleri

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 ise v özelliği null olmalıdır. Ancak yine de f ve p ö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çin Date(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ılarak v dize sürümü otomatik olarak oluşturulur. f değerleri, kendi biçimlendiriciniz kullanılarak değiştirilebilir veya setFormattedValue() ya da setCell() ile ayarlanabilir veya getFormattedValue() 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() ve getProperties() 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 bir DataView 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üz setRows() 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 bir DataView 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ştirmelerde draw() ç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 veya DataView 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 uygun set...() veya hide...() 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ğiniz DataView öğesini oluşturmak için kullandığınız DataTable 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. viewColumnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından daha küçük bir sayı olmalıdır. Bu, oluşturulan bir sütun ise -1 döndürür.

Örnek: setColumns([3, 1, 4]) daha önce aranmışsa getTableColumnIndex(2), 4 değerini döndürür.

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. viewRowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.

Örnek: setRows([3, 1, 4]) daha önce aranmışsa getTableRowIndex(2), 4 değerini döndürür.

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. tableColumnIndex, sıfırdan büyük veya sıfıra eşit bir sayı ve temel tablonun/ görünümün getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından az olmalıdır.

Örnek: setColumns([3, 1, 4]) daha önce aranmışsa getViewColumnIndex(4), 2 değerini döndürür.

getViewColumns() Sayı dizisi

Bu görünümdeki sütunları sırayla döndürür. Yani, bir diziyle setColumns yöntemini çağırır ve ardından getViewColumns() yöntemini çağırırsanız aynı diziyi alırsınız.

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. tableRowIndex, sıfıra eşit veya sıfırdan büyük bir sayı olmalı ve temel tablonun/görünümün getNumberOfRows() yöntemi tarafından döndürülen satır sayısından az olmalıdır.

Örnek: setRows([3, 1, 4]) daha önce aranmışsa getViewRowIndex(4), 2 değerini döndürür.

getViewRows() Sayı dizisi

Bu görünümdeki satırları sırayla döndürür. Yani, bir diziyle setRows yöntemini çağırıp ardından getViewRows() yöntemini çağırırsanız aynı diziyi alırsınız.

hideColumns(columnIndexes) yok

Belirtilen sütunları geçerli görünümden gizler. columnIndexes, gizlenecek sütunların dizinlerini temsil eden bir sayı dizisidir. Bu dizinler, temeldeki tablodaki/görünümdeki dizin numaralarıdır. columnIndexes içindeki sayıların sıralı olması gerekmez (yani [3,4,1] uygundur). Kalan sütunlar, siz iterleri kullanarak sıralamalarını korur. Daha önce gizlenmiş bir sütun için dizin numarası girmek hatalı değildir ancak temel tabloda/görünümde bulunmayan bir dizin girmek hata verir. Sütunları göstermek için setColumns() numaralı telefonu arayın.

Örnek: 10 sütunlu bir tablonuz varsa ve setColumns([2,7,1,7,9]) ve ardından hideColumns([7,9]) çağrısı yaparsanız görünümdeki sütunlar [2,1] olur.

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) için bir rahatlık söz dizimidir. Örneğin, hideRows(5, 10), hideRows([5, 6, 7, 8, 9, 10]) ile eşdeğerdir.

hideRows(rowIndexes) Yok

Belirtilen satırları geçerli görünümden gizler. rowIndexes, gizlenecek satırların dizinlerini temsil eden bir sayı dizisidir. Bu dizinler, temeldeki tablodaki/görünümdeki dizin numaralarıdır. rowIndexes içindeki sayıların sıralı olması gerekmez (yani [3,4,1] uygundur). Kalan satırlar dizin sıralarını korur. Daha önce gizlenmiş bir satır için dizin numarası girmek yanlış değildir ancak temel tabloda/görünümde bulunmayan bir dizin girmek hata verir. Satırları göstermek için setRows() numaralı telefonu arayın.

Örnek: 10 satırlı bir tablonuz varsa ve setRows([2,7,1,7,9]) ve ardından hideRows([7,9]) çağrısı yaparsanız görünümdeki satırlar [2,1] olur.

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.

  • columnIndexes - Bir dizi sayı ve/veya nesne (karma karıştırılabilir):
    • Sayılar, görünüme dahil edilecek kaynak veri sütununun dizinini belirtir. Veriler değiştirilmeden aktarılır. Bir rolü veya ek sütun özelliklerini açıkça tanımlamanız gerekiyorsa sourceColumn özelliğine sahip bir nesne belirtin.
    • Nesneler, hesaplanmış bir sütun belirtir. Hesaplanmış bir sütun, her satır için anında bir değer oluşturur ve bu değeri görünüme ekler. Nesne aşağıdaki özelliklere sahip olmalıdır:
      • calc [işlev] - Hücredeki bir değeri hesaplamak için sütundaki her satıra çağrılacak bir işlev. İşlev imzası func(dataTable, row) şeklindedir. Burada dataTable kaynak DataTable, row ise kaynak veri satırının dizinidir. İşlev, type tarafından belirtilen türde tek bir değer döndürmelidir.
      • type [dize] - calc işlevinin döndürdüğü değerin JavaScript türü.
      • label [İsteğe bağlı, dize] - Oluşturulan bu sütuna atanacak isteğe bağlı bir etiket. Belirtilmezse, görünüm sütununda etiket bulunmaz.
      • id [İsteğe bağlı, dize] - Oluşturulan bu sütuna atanacak isteğe bağlı bir kimlik.
      • sourceColumn - [İsteğe bağlı, sayı] Değer olarak kullanılacak kaynak sütunu; belirtilirse calc veya type özelliğini belirtmeyin. Bu, nesne yerine sayı iletmeye benzer, ancak yeni sütun için bir rol ve özellik belirtmenizi sağlar.
      • properties [İsteğe bağlı, nesne] - Bu sütuna atanacak rastgele özellikleri içeren bir nesne. Belirtilmezse görünüm sütununun hiçbir özelliği olmaz.
      • role [İsteğe bağlı, dize] - Bu sütuna atanacak bir rol. Belirtilmezse mevcut rol içe aktarılmaz.

Ö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) için bir rahatlık söz dizimidir. Örneğin, setRows(5, 10), setRows([5, 6, 7, 8, 9, 10]) ile eşdeğerdir.

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. rowIndexes, görünümde gösterilecek satırları belirten bir dizin numaraları dizisi olmalıdır. Dizi, satırların hangi sırada gösterileceğini belirtir ve satırlar yinelenebilir. Yalnızca rowIndexes içinde belirtilen satırların gösterileceğini unutmayın. Bu yöntem, görünümdeki diğer tüm satırları temizler. Dizide de belirtilen satır etkili şekilde kopyalanarak yinelenen öğeler bulunabilir (örneğin, setRows([3, 4, 3, 2]), 3 görünümünün bu görünümde iki kez gösterilmesine neden olur). Böylece dizi, temeldeki tablo/görünümdeki satırların bu görünüme eşlenmesini sağlar. Bu yöntemle giriş oluşturmak için getFilteredRows() veya getSortedRows() kullanabilirsiniz.

Ö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: view.setRows([3, 0])

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.

  • opt_container_ref [İsteğe bağlı] - Sayfadaki geçerli bir kapsayıcı öğeye referans. Belirtilirse grafik oraya çizilir. Aksi takdirde, grafik, containerId tarafından belirtilen kimliğe sahip öğede çizilir.
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 DataTable öğesinden alırsa grafiğin DataTable referansını döndürür. Bu grafik bir veri kaynağından veri alırsa boş değer döndürür.

Döndürülen nesnede yaptığınız tüm değişiklikler, ChartWrapper.draw() öğesini bir sonraki sefer çağırdığınızda grafiğe yansıtılır.

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

  • anahtar: Alınan seçeneğin adı. 'vAxis.title' gibi uygun bir ad olabilir.
  • opt_default_value [İsteğe bağlı] - Belirtilen değer tanımlanmamış veya boşsa bu değer döndürülü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:

  1. 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.
  2. 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.
  3. 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.
  4. ChartWrapper üzerinden ChartEditor.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ürece ChartEditor örneği kullanılabilir; kullanıcı iletişim kutusunu kapattıktan sonra örnek otomatik olarak kaldırılmaz.
  5. 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 openDialog() çağrısını tekrar yapabilirsiniz ancak ChartWrapper nesnesini tekrar iletmeniz gerekir.

  • ChartWrapper: Pencerede oluşturulacak ilk grafiği tanımlayan bir ChartWrapper nesnesi. Grafikte doldurulmuş bir DataTable öğesi olmalı veya geçerli bir veri kaynağına bağlı olmalıdır. Bu sarmalayıcı, grafik düzenleyicide dahili olarak kopyalanır. Bu nedenle, ChartWrapper işleyicinizde daha sonra yapacağınız değişiklikler grafik düzenleyicinin kopyasına yansıtılmaz.
  • opt_option - [İsteğe bağlı] Grafik düzenleyici için tüm seçenekleri içeren bir nesne. Aşağıdaki seçenekler tablosuna bakın.
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 ChartWrapper nesnesi. Grafikte DataTable doldurulmalı veya geçerli bir veri kaynağına bağlı olmalıdır.

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:

  • 'urlbox' - Grafikteki veri kaynağı URL'sini düzenlenebilir bir metin kutusunda iletişim kutusunda gösterin. Kullanıcı bu ayarı değiştirebilir ve yeni veri kaynağına göre grafik yeniden çizilir.
  • DOM öğesi: Veri kaynağı seçmek için kullanılacak özel bir HTML öğesi sağlamanıza olanak tanır. Kodda oluşturulan veya sayfadan kopyalanan bir HTML öğesine tutma yeri iletin. Bu öğe iletişim kutusunda görüntülenir. Bunu, kullanıcının grafik veri kaynağını seçmesine izin vermek için kullanın. Örneğin, kullanıcının seçebileceği birkaç veri kaynağı URL'si veya kullanıcı dostu adlar içeren bir liste kutusu oluşturun. Öğe, bir seçim işleyicisi uygulamalı ve grafiğin veri kaynağını değiştirmek için bunu kullanmalıdır: Örneğin, temel DataTable öğesini değiştirin veya grafiğin dataSourceUrl alanını değiştirin.

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ı
Örnek: [[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.
  • 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:

    1. Doldurduğunuz DataTable nesnesini alın.
    2. Yeniden biçimlendirmek istediğiniz her sütun için:
      1. 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.)
      2. Seçenekler nesnenizi ileterek biçimleyicinizi oluşturun.
      3. Yeniden biçimlendirilecek verilerin DataTable ve (sıfır) sütun numarasını ileterek formatter.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ştirmeniz allowHtml seçeneğini destekliyorsa doğru değerini ayarlamanız gerekir.

    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.

    • option - Biçimlendirici için seçenekleri belirten genel bir JavaScript nesnesi. Bu nesne, biçimlendiriciye özgü özellikleri içeren özellik/değer çiftlerine sahip genel bir nesnedir. Hangi seçeneklerin desteklendiğini öğrenmek için ilgili biçimlendiricinizin dokümanlarına bakın. DateFormat nesnesi için oluşturucuyu çağırmanın iki yolu vardır ve bunlar iki iletilebilir:
    // 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.

    • data: Yeniden biçimlendirilecek verileri içeren bir DataTable. Burada DataView kullanamazsınız.
    • colIndex - Biçimlendirilecek sütunun sıfır tabanlı dizini. Birden fazla sütunu biçimlendirmek için bu yöntemi farklı colIndex değerleriyle birden fazla kez çağırmanız gerekir.

     

    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

    Örnek

    Açı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.

    • from - [Dize, Sayı, Tarih, TarihSaat veya SaatOfi] Aralığın alt sınırı (dahil). veya null. Boşsa -∞ ile eşleşir. Dize sınırları, dize değerleriyle alfabetik olarak karşılaştırılır.
    • to - [Dize, Sayı, Tarih, TarihSaat veya SaatOfi] Aralığın üst sınırı (dahil değil) veya null. Boşsa +∞ ile eşleşir. Dize sınırları, alfabetik olarak dize değerleriyle karşılaştırılır.
    • renk - Eşleşen hücrelerdeki metne uygulanacak renk. Değerler, "#RRGGBB" değerleri veya tanımlı renk sabitleri (örnek: "#FF0000" veya "kırmızı") olabilir.
    • bgcolor - Eşleşen hücrelerin arka planına uygulanacak renk. Değerler, "#RRGGBB" değerleri veya tanımlı renk sabitleri (örnek: "#FF0000" veya "kırmızı") olabilir.
    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, addRange() tarafından yapılabileceği gibi dize değerlerini karşılaştıramayacağını unutmayın. İpucu: Renk aralıklarının izleyiciler tarafından doğru şekilde ölçülmesi genellikle zordur.Okunabilen en basit ve kolay olan aralık ise tamamen doymuş renkten beyaza (ör. #FF0000 - FFFFFF).

    • from - [Number, Date, DateTime veya TimeOfDay] Aralığın alt sınırı (dahil). veya null. Boşsa -∞ ile eşleşir.
    • to - [Number, Date, DateTime veya TimeOfDay] Aralığın üst sınırı (dahil değil) veya null. Boşsa +∞ ile eşleşir.
    • renk - Eşleşen hücrelerdeki metne uygulanacak renk. Değerleri ne olursa olsun bu renk tüm hücreler için aynıdır.
    • fromBgColor - Gradyanın alt ucunda değerleri tutan hücrelerin arka plan rengi. Değerler, "#RRGGBB" değerleri veya tanımlı renk sabitleri (örnek: "#FF0000" veya "kırmızı") olabilir.
    • toBgColor - Gradyanın üst ucunda değerler barındıran hücreler için arka plan rengi. Değerler, "#RRGGBB" değerleri veya tanımlı renk sabitleri (örnek: "#FF0000" veya "kırmızı") olabilir.

     

    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:

    • 'short' - Kısa biçim: ör. "28/02/16"
    • "medium" - Orta biçim: ör. "28 Şubat 2016"
    • "long" - Uzun biçim: ör. "28 Şubat 2016"

    Hem formatType hem de pattern belirtemezsiniz.

    pattern

    ICU tarih ve saat biçimine benzer şekilde, değere uygulanacak özel bir biçim kalıbı. Örneğin: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});

    Hem formatType hem de pattern belirtemezsiniz. Bir sonraki bölümde kalıplarla ilgili daha fazla ayrıntı bulabilirsiniz.

    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, DataTable gerektirmez.

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

    • M 1 üretir
    • MM 01 üretiyor
    • MKM yapımcılığı
    • Ocak MMMM'si

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

    • E, T olarak üretilir
    • EE veya EEE Sal veya Sal
    • EEEE Salı günleri üretiyor

    "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 negativeColor dışındaki diğer tüm seçenekler yok sayılır.

    Biçim dizesi ICU deseni grubunun bir alt kümesidir. Örneğin {pattern:'#,###%'}, 10, 7,5 ve 0,5 değerleri için "%1.000", "%750" ve "%50" çıkış değerleriyle sonuçlanır.

    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, DataTable gerektirmez.

    Ö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 {#} yer alır. #, kullanılacak kaynak sütunun dizinidir. Dizin, aşağıdaki format() yönteminden srcColumnIndexes dizisinde yer alan bir dizindir. Değişmez bir { veya } karakteri eklemek için karakteri şu şekilde kod dışına alın: \{ veya \}. Değişmez bir \ işareti eklemek için karakteri \\ olarak kod dışına alın.

    Örnek kod

    Aşağıdaki örnekte, birinci ve ikinci öğelerin format() yönteminden alındığı, sabit öğe oluşturan bir kalıp için bir oluşturucu gösterilmektedir:

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

    • dataTable: Üzerinde işlem yapılacak DataTable.
    • srcColumnIndexes: Temel Veri Tablosundan kaynaklar olarak alınacak bir veya daha fazla (sıfır tabanlı) sütun dizinidir. Bu veri oluşturucudaki pattern parametresi için veri kaynağı olarak kullanılır. Sütun numaralarının sıralı sırada olması gerekmez.
    • opt_dstColumnIndex - [isteğe bağlı] Desen manipülasyonunun çıkışını yerleştireceğiniz hedef sütun. Belirtilmemesi halinde srcColumIndexes içindeki ilk öğe hedef olarak kullanılır.

    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
    1. _table_query_url tercihi, Sorgu veri kaynağı URL'sini ayarlamak için kullanılır.
    2. _table_query_refresh_interval tercihi, Sorgu yenileme aralığını (saniye cinsinden) ayarlamak için kullanılır.
    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.

    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, send ilk çağrısından başlayarak, belirtilen her süre boyunca send yöntemini otomatik olarak çağıracak şekilde (saniye sayısı) ayarlar. seconds, sıfırdan büyük veya sıfıra eşit bir sayıdır.

    Bu yöntemi kullanıyorsanız send yöntemini çağırmadan önce yöntemi çağırmanız gerekir.

    Bu yöntemi sıfır olarak (varsayılan) tekrar çağırarak veya abort() yöntemini arayarak iptal edin.

    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:
    • access_denied Kullanıcının veri kaynağına erişim izni yok.
    • invalid_query Belirtilen sorguda söz dizimi hatası var.
    • data_truncated Çıkış boyutu sınırları nedeniyle sorgu seçimiyle eşleşen bir veya daha fazla veri satırı döndürülmedi. (uyarı).
    • timeout Sorgu, beklenen süre içinde yanıt vermedi.
    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.

    • container (kapsayıcı) - Hata mesajının ekleneceği DOM öğesi. Kapsayıcı bulunamazsa işlev bir JavaScript hatası verir.
    • message - Gösterilecek dize mesajı.
    • opt_detailedMessage - İsteğe bağlı ayrıntılı bir ileti dizesi. Varsayılan olarak bu simge fareyle üzerine gelindiğinde gösterilen metindir, ancak bunu aşağıda açıklanan opt_option.showInToolTip özelliğinde değiştirebilirsiniz.
    • opt_option - Mesaj için çeşitli görüntüleme seçenekleri ayarlayan özelliklere sahip isteğe bağlı bir nesne. Aşağıdaki seçenekler desteklenir:
      • showInTooltip - Doğru mesajının yalnızca ipucu metni olarak, false değerinin ise kısa mesajdan sonra kapsayıcı gövdesindeki ayrıntılı mesajı gösterdiği boole değeri. Varsayılan değer, true (doğru) değeridir.
      • type: Bu mesaja hangi css stillerinin uygulanması gerektiğini belirleyen hata türünü açıklayan bir dizedir. Desteklenen değerler "error" ve "warning". Varsayılan değer "error"dır.
      • stil: Hata mesajı için kullanılan stil dizesi. Bu stil, uyarı türüne (opt_option.type) uygulanan tüm stilleri geçersiz kılar. Örnek: 'background-color: #33ff99; padding: 2px;' Varsayılan değer boş bir dizedir.
      • removable - Doğru (true), mesajın kullanıcının fare tıklaması ile kapatılabileceği anlamına gelir. Varsayılan değer, false (yanlış) değeridir.
    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. addError(opt_options.type) veya uyarı) ayarlar.

    • container (kapsayıcı) - Hata mesajının ekleneceği DOM öğesi. Kapsayıcı bulunamazsa işlev bir JavaScript hatası verir.
    • response: Bir sorguya yanıt olarak sorgu işleyiciniz tarafından alınan bir QueryResponse nesnesi. Bu boşsa yöntem bir JavaScript hatası verir.
    removeError(id) Boole: Hata kaldırıldıysa true (doğru), aksi durumda false (yanlış).

    Kimlik ile belirtilen hatayı sayfadan kaldırır.

    • id - addError() veya addErrorFromQueryResponse() kullanılarak oluşturulan bir hatanın dize kimliği.
    removeAll(container) Yok

    Belirtilen kapsayıcıdaki tüm hata bloklarını kaldırır. Belirtilen kapsayıcı yoksa bir hata oluşur.

    • kapsayıcı: Kaldırılacak hata dizelerini tutan DOM öğesi. Kapsayıcı bulunamazsa işlev bir JavaScript hatası verir.
    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.

    • errorId - addError() veya addErrorFromQueryResponse() kullanılarak oluşturulan bir hatanın dize kimliği.

    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.

    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.

    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 veya DataView. Bir grafikten DataTable çı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 ve column, 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çin row değerini boş, tüm satırı seçmek içinse column 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.