Genel bakış
Sıralanabilir ve sayfalandırılabilir. Tablo hücreleri, biçim dizeleri kullanılarak veya hücre değerleri olarak doğrudan HTML eklenerek biçimlendirilebilir. Sayısal değerler sağa hizalanır; boole değerleri onay işaretleri olarak gösterilir. Kullanıcılar klavye veya fare kullanarak tek satırlar seçebilir. Kullanıcılar, sütun başlıklarını tıklayarak satırları sıralayabilir. Kullanıcı sayfayı kaydırırken başlık satırı sabit kalır. Tablo, kullanıcı etkileşimine karşılık gelen çeşitli etkinlikleri etkinleştirir.
Örnek
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
Yükleniyor
google.charts.load
paket adı "table"
.
google.charts.load('current', {packages: ['table']});
Görselleştirmenin sınıf adı: google.visualization.Table
.
var visualization = new google.visualization.Table(container);
Veri Biçimi
DataTable, karşılık gelen bir HTML tablosuna dönüştürülür. DataTable'daki her satır/sütun, HTML tablosundaki bir satıra/sütuna dönüştürülür. Her sütun aynı veri türünde olmalıdır ve tüm standart görselleştirme veri türleri (dize, boole, sayı vb.) desteklenir.
Özel Özellikler
DataTable'ın setProperty()
yöntemini kullanarak veri tablosu öğelerine aşağıdaki özel özellikleri atayabilirsiniz.
Mülk Adı | Şunlar İçin Geçerlidir: | Açıklama |
---|---|---|
sınıf adı | Cell | Tek bir hücreye atanacak dize sınıfı adı. Hücrelere tek tek CSS stili atamak için bunu kullanın. |
style | Cell | Hücreye satır içinde atanacak bir stil dizesi. Bu işlem, bu hücreye uygulanan CSS sınıf stillerini geçersiz kılar. Bu özelliğin çalışması için allowHtml=true özelliğini ayarlamanız gerekir. Örnek: 'border: 1px solid green;' . |
Örnek
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Yapılandırma Seçenekleri
Ad | |
---|---|
allowHtml |
Doğru değerine ayarlanırsa HTML etiketleri içeren hücrelerin biçimlendirilmiş değerleri HTML olarak oluşturulur. Yanlış değerine ayarlanırsa çoğu özel biçimlendirici düzgün çalışmaz. Tür: boole
Varsayılan: false
|
alternatifStil |
Alternatif renk stilinin tek ve çift satırlara atanıp atanmayacağını belirler. Tür: boole
Varsayılan: true
|
cssSınıfAdları |
Her özellik adının bir tablo öğesini tanımladığı ve özellik değerinin bir dize olduğu ve bu tablo öğesine atanacak sınıfı tanımlayan bir nesne. Tablonuzun belirli öğelerine özel CSS atamak için bu özelliği kullanın. Bu özelliği kullanmak için nesne adı belirtin. Burada, özellik adı tablo öğesini belirtir, özellik değeri de dize olup söz konusu öğeye atanacak bir sınıf adı belirtir. Ardından sayfanızda söz konusu sınıf için bir CSS stili tanımlamanız gerekir. Aşağıdaki mülk adları desteklenir:
Örnek:
Not: CSS'de bazı öğeler, diğerlerini geçersiz kılar. Örneğin, bir Tür: nesne
Varsayılan: null
|
ilkSatırNumarası |
dataTable'daki ilk satırın satır numarası. Yalnızca showRowNumber doğruysa kullanılır. Tür: sayı
Varsayılan: 1
|
dondurulmuş Sütunlar |
Soldan dondurulacak sütunların sayısı. Kalan sütunlar yatay olarak kaydırılırken bu sütunlar yerinde kalır. Tür: sayı
Varsayılan: null
|
yükseklik |
Görselleştirmenin kapsayıcı öğesinin yüksekliğini ayarlar. Standart HTML birimlerini kullanabilirsiniz (örneğin, "100 piksel", "80em", "60"). Birim belirtilmezse numaranın piksel olduğu varsayılır. Belirtilmezse tarayıcı, yüksekliği tabloya sığacak şekilde otomatik olarak ayarlar ve işlem sırasında mümkün olduğunca küçülür. Tablo, gereken yükseklikten küçük bir değere ayarlanırsa tablo dikey bir kaydırma çubuğu ekler (başlık satırı da dondurulur). "%100" olarak ayarlandığında tablo, kapsayıcı öğesine mümkün olduğunca genişletilir. Tür: dize
Varsayılan: otomatik
|
sayfa |
Veriler arasında sayfalara ayırmanın etkinleştirilip etkinleştirilmeyeceği ve nasıl etkinleştirileceği. Aşağıdaki dize değerlerinden birini seçin:
Tür: dize
Varsayılan: "devre dışı bırak"
|
sayfa Boyutu |
Sayfa seçeneği ile sayfalama etkinleştirildiğinde her bir sayfadaki satır sayısı. Tür: sayı
Varsayılan: 10
|
sayfalandırma Düğmeleri |
Sayfalara ayırma düğmeleri için belirtilen bir seçeneği belirler. Seçenekler aşağıdaki gibidir:
Tür: dize veya sayı
Varsayılan: "auto"
|
rtlTablo |
Sağdan sola diller (Arapça veya İbranice gibi) için temel destek ekleyerek tablonun sütun sırasını tersine çevirebilir. Böylece, sütunun en sağdaki sütun, son sütunun da en soldaki sütun olmasını sağlayabilirsiniz. Bu, temel verilerdeki sütun dizinini değil, yalnızca görüntüleme sırasını etkiler. Tablo görselleştirme, tam çift yönlü (BiDi) dil görüntülemeyi bu seçenekle bile desteklemiyor. Sayfalandırmayı etkinleştirirseniz (sayfa seçeneğini kullanarak) veya tabloda, yükseklikleri ve genişlik seçenekleri gerekli tablo boyutundan küçük olduğu için kaydırma çubukları varsa bu seçenek yok sayılır. Tür: boole
Varsayılan: false
|
soldan SolBaşlangıçKonumu |
Genişlik özelliğini ayarladığınız için tabloda yatay kaydırma çubukları varsa yatay kaydırma konumunu piksel cinsinden ayarlar. Tablo, en soldaki sütunun ardından kaç piksel kaydırıldığı açılır. Tür: sayı
Varsayılan: 0
|
satır_sayısı |
Doğru değerine ayarlanırsa satır numarasını tablonun ilk sütunu olarak gösterir. Tür: boole
Varsayılan: false
|
sıralama |
Kullanıcı bir sütun başlığını tıkladığında sütunların nasıl sıralanacağı ve nasıl sıralanacağı. Sıralama etkinleştirildiyse sıralama sıralama ve sıralama sütunu özelliklerini de ayarlayabilirsiniz. Aşağıdaki dize değerlerinden birini seçin:
Tür: dize
Varsayılan: "etkinleştir"
|
Sıralama ölçütü artan |
İlk sıralama sütununun sıralandığı sıralama. Artan için doğru, azalan için yanlış. Tür: boole
Varsayılan: true
|
sıralanacak Sütun |
Veri tablosunda, tablonun başlangıçta sıralandığı dizin. Sütun, sıralama sırasını belirten küçük bir okla işaretlenir. Tür: sayı
Varsayılan: -1
|
başlangıç sayfası |
Gösterilecek ilk tablo sayfası. Yalnızca Tür: sayı
Varsayılan: 0
|
genişlik |
Görselleştirmenin kapsayıcı öğesinin genişliğini ayarlar. Standart HTML birimlerini kullanabilirsiniz (örneğin, "100 piksel", "80em", "60"). Birim belirtilmezse numaranın piksel olduğu varsayılır. Belirtilmezse tarayıcı, genişliği tabloya sığacak şekilde otomatik olarak ayarlar ve işlem sırasında mümkün olduğunca küçülür. Gereken genişlikten küçük olacak şekilde tablo, yatay bir kaydırma çubuğu ekler. "%100" olarak ayarlandığında tablo, kapsayıcı öğesine mümkün olduğunca genişletilir. Tür: dize
Varsayılan: otomatik
|
Yöntemler
Yöntem | |
---|---|
draw(data, options) |
Tabloyu çizer. Dönüş Türü: yok
|
getSelection() |
Standart getSelection uygulaması. Seçim öğelerinin tümü satır öğesidir. Seçilen birden fazla satırı döndürebilir. Seçim nesnesindeki satır dizinleri, tüm kullanıcı etkileşimlerine (sıralama, sayfalandırma vb.) bakılmaksızın orijinal veri tablosuna başvuruda bulunur. Seçimlerin açma/kapatma düğmesi: Bir hücre ilk kez tıklandığında seçilidir. Hücre tekrar tıklandığında hücrenin seçimi kaldırılır. Bu işlem, seçim etkinliğiyle sonuçlanır ancak alınan seçim nesnesinde seçilen öğe yoktur. Dönüş Türü: Seçim öğeleri dizisi
|
getSortInfo() |
Sıralanmış bir tablonun mevcut sıralama durumu hakkında bilgi almak için bu yöntemi çağırın (genellikle kullanıcı tarafından, satırları belirli bir sütuna göre sıralamak için sütun başlığını tıklayan kullanıcı). Sıralamayı devre dışı bıraktıysanız bu yöntem çalışmaz. Koddaki verileri sıralamadıysanız veya kullanıcı, kodu seçerek verileri sıralamadıysa varsayılan sıralama değerleri döndürülür. Dönüş Türü: Aşağıdaki özelliklere sahip bir nesne:
|
setSelection(selection) |
Standart Dönüş Türü: yok
|
clearChart() |
Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Dönüş Türü: yok
|
Etkinlikler
Ad | |
---|---|
seçer |
Standart seçim etkinliği, ancak yalnızca satırların tamamı seçilebilir. Özellikler: Yok
|
sayfa |
Kullanıcılar sayfada gezinme düğmesini tıkladığında tetiklenir. Özellikler:
page : Numara. Gidilecek sayfanın dizini. |
sıralama |
Kullanıcılar bir sütun başlığını tıkladığında ve sıralama seçeneği "devre dışı bırak" olmadığında tetiklenir. Özellikler: Aşağıdaki özelliklere sahip bir nesne:
|
hazır |
Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz, çizim yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir. Özellikler: Yok
|
Biçimlendiriciler
Not: Tablo görselleştirmesinde, genel biçimlendirme araçları tarafından geçersiz kılınan ve aynı şekilde davranan ancak herhangi bir görselleştirmede kullanılabilen biçimlendirme aracı nesneleri bulunur.
Aşağıdaki tabloda, eski tablo biçimlendirici ve eşdeğer genel biçimlendiricisi gösterilmektedir. Yeni kod yazarken genel biçimleyiciyi kullanmanız gerekir.
Tablo Biçimlendirici | |
---|---|
TabloOkBiçimi | google.visualization.OkBiçim |
TablobarBiçimi | google.visualization.BarBiçim |
TabloRenk Biçimi | google.visualization.ColorFormat |
TabloTarih Biçimi | google.visualization.DateBiçim |
TabloSayısı Biçimi | google.visualization.NumberBiçim |
TabloKalıp Biçimi | google.visualization.PatternBiçim |
Önemli: Biçimlendiriciler, metinlerini biçimlendirmek için genellikle HTML kullanır. Bu nedenle, allowHtml
seçeneğini true
olarak ayarlamanız gerekir.
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.