Genel bakış
Sıralanabilen ve sayfa numarası verilebilen tablo. Tablo hücreleri, biçim dizeleri kullanılarak veya HTML'nin doğrudan hücre değerleri olarak eklenerek biçimlendirilebilir. Sayısal değerler sağa hizalanır; Boole değerleri, onay işareti olarak gösterilir. Kullanıcılar klavyeyi veya fareyi 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 tetikler.
Ö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 paketinin 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 bir 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 desteklenir (dize, boole, sayı vb.).
Özel Mülkler
DataTable'ın setProperty() yöntemini kullanarak veri tablosu öğelerine aşağıdaki özel özellikleri atayabilirsiniz.
| Mülk Adı | Şunlar İçin Geçerlidir: | Açıklama |
|---|---|---|
| className | Cell | Tek bir hücreye atanacak dize sınıfı adı. CSS stilini tek tek hücrelere atamak için bunu kullanın. |
| style | Cell | Hücreye satır içi atanacak bir stil dizesi. Bu, söz konusu hücreye uygulanan CSS sınıf stillerini geçersiz kılar. Bunun ç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. Bu politika yanlış değerine ayarlanırsa çoğu özel biçimlendirici düzgün çalışmaz. Tür: boole
Varsayılan: false
|
| alternatingRowStyle |
Tek ve çift satırlara alternatif renk stilinin atanıp atanmayacağını belirler. Tür: boole
Varsayılan: true
|
| cssClassNames |
Her özellik adının bir tablo öğesini açıkladığı 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 bir nesne atayın. Burada özellik adı, tablo öğesini belirtir ve özellik değeri bir dizedir. Bu durumda, söz konusu öğeye atanacak bir sınıf adı belirtilir. Daha sonra, sayfanızda bu sınıf için bir CSS stili tanımlamanız gerekir. Aşağıdaki özellik adları desteklenir:
Örnek:
Not: CSS'de bazı öğeler diğerlerini geçersiz kılar. Örneğin, bir Tür: nesne
Varsayılan: null
|
| firstRowNumber |
dataTable'daki ilk satırın satır numarası. Yalnızca showRowNumber doğru olduğunda kullanılır. Tür: numara
Varsayılan: 1
|
| frozenColumns |
Sol taraftaki dondurulacak sütun sayısı. Kalan sütunlar yatay olarak kaydırılırken bu sütunlar yerinde kalır. Tür: numara
Varsayılan: null
|
| yükseklik |
Görselleştirmenin kapsayıcı öğesinin yüksekliğini ayarlar. Standart HTML birimleri kullanabilirsiniz (örneğin, "100 piksel", "80em", "60"). Herhangi bir birim belirtilmezse sayını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üçültür. Gereken yükseklikten daha küçük bir değere ayarlanırsa tablo, dikey kaydırma çubuğu ekler (başlık satırı da dondurulur). "%100" olarak ayarlanırsa tablo, kapsayıcı öğesine mümkün olduğunca genişler. Tür: dize
Varsayılan: auto
|
| sayfa |
Veriler arasında sayfalandırmanın etkinleştirilip etkinleştirilmeyeceğini ve nasıl etkinleştirileceğini. Aşağıdaki dize değerlerinden birini seçin:
Tür: dize
Varsayılan: "devre dışı bırak"
|
| pageSize |
Sayfa seçeneği ile sayfalandırma etkinleştirildiğinde, her bir sayfadaki satır sayısı. Tür: numara
Varsayılan: 10
|
| pagingButtons |
Sayfa düğmeleri için belirtilen bir seçeneği ayarlar. Seçenekler şunlardır:
Tür: dize veya sayı
Varsayılan: 'auto'
|
| rtlTable |
Tablonun sütun sırasını tersine çevirerek sağdan sola diller (Arapça veya İbranice gibi) için temel destek ekler. Böylece, sütun sıfır en sağdaki sütun, son sütun ise en soldaki sütun olur. Bu durum temel verilerdeki sütun dizinini etkilemez, yalnızca görüntülenme sırasını etkiler. Tam çift yönlü (BiDi) dilde görüntüleme, bu seçenek olsa bile tablo görselleştirme tarafından desteklenmez. Sayfalara ayırma özelliğini etkinleştirirseniz (sayfa seçeneğini kullanarak) veya gerekli tablo boyutundan daha küçük yükseklik ve genişlik seçenekleri belirttiğiniz için tabloda kaydırma çubukları olursa bu seçenek yoksayılır. Tür: boole
Varsayılan: false
|
| scrollLeftStartPosition |
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ütundan sonra belirtilen sayıda piksel kaydırılarak açılır. Tür: numara
Varsayılan: 0
|
| showRowNumber |
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 sıralanıp sıralanmayacağı ve nasıl sıralanacağı. Sıralama etkinleştirildiyse SortAscending ve SortColumn özelliklerini de ayarlamayı düşünebilirsiniz. Aşağıdaki dize değerlerinden birini seçin:
Tür: dize
Varsayılan: 'enable'
|
| sortAscending |
İlk sıralama sütununun sıralandığı sıra. Artan için doğru, azalan için false. Tür: boole
Varsayılan: true
|
| sortColumn |
Veri tablosundaki bir sütunun dizinidir ve tablonun başlangıçta sıralandığı sütundur. Sütun, sıralama düzenini gösteren küçük bir okla işaretlenir. Tür: numara
Varsayılan: -1
|
| startPage |
Gösterilecek ilk tablo sayfası. Yalnızca Tür: numara
Varsayılan: 0
|
| genişlik |
Görselleştirmenin kapsayıcı öğesinin genişliğini ayarlar. Standart HTML birimleri kullanabilirsiniz (örneğin, "100 piksel", "80em", "60"). Herhangi bir birim belirtilmezse sayını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üçültür. Gereken genişlikten daha küçük bir değere ayarlanırsa tablo, yatay bir kaydırma çubuğu ekler. "%100" olarak ayarlanırsa tablo, kapsayıcı öğesine mümkün olduğunca genişler. Tür: dize
Varsayılan: auto
|
Yöntemler
| Yöntem | |
|---|---|
draw(data, options) |
Tabloyu çizer. Return Type (Dönüş Türü): yok
|
getSelection() |
Standart getSelection uygulaması. Seçim öğelerinin tümü satır öğeleri. Birden fazla seçili satır döndürülebilir. Seçim nesnesindeki satır dizinleri, kullanıcı etkileşimlerinden (sıralama, sayfalama vb.) bağımsız olarak orijinal veri tablosunu belirtir. Seçimler arasında geçiş yapıldığında bir hücre ilk kez tıklandığında seçilir; tekrar tıklandığında hücrenin seçimi kaldırılır, bu da bir seçim etkinliğiyle sonuçlanır, ancak alınan seçim nesnesinde seçili öğe olmaz. Dönüş Türü: Seçim öğeleri dizisi
|
getSortInfo() |
Sıralanmış bir tablonun geçerli sıralama durumu hakkında bilgi almak için bu yöntemi çağırın (genellikle satırları belirli bir sütuna göre sıralamak için sütun başlığını tıklayan kullanıcı tarafından). Sıralamayı devre dışı bıraktıysanız bu yöntem çalışmaz. Verileri kodda sıralamadıysanız veya kullanıcı verileri kod seçerek sıralamadıysa varsayılan sıralama değerleri döndürülür. Döndürme Türü: Aşağıdaki özelliklere sahip bir nesne:
|
setSelection(selection) |
Standart Return Type (Dönüş Türü): yok
|
clearChart() |
Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type (Dönüş Türü): yok
|
Etkinlikler
| Ad | |
|---|---|
| seç |
Standart seçim etkinliği, ancak yalnızca satırların tamamı seçilebilir. Özellikler: Yok
|
| sayfa |
Kullanıcılar bir sayfada gezinme düğmesini tıkladığında tetiklenir. Mülkler:
page: Sayı. Gidilecek sayfanın dizini. |
| sıralama |
Kullanıcılar bir sütun başlığını tıkladığında tetiklenir ve sıralama seçeneği "devre dışı bırak" değilse tetiklenir. Özellikler: Aşağıdaki özelliklere sahip bir nesne:
|
| hazır |
Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak 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, aynı şekilde davranan ancak herhangi bir görselleştirmede kullanılabilen genel biçimlendiriciler tarafından yerini alan bir dizi biçimlendirici nesne bulunur.
Aşağıdaki tabloda, eski tablo biçimlendirici ve eşdeğer genel biçimlendirici gösterilmektedir. Yeni kod yazarken genel biçimlendiriciyi kullanmalısınız.
| Tablo Biçimlendirici | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Önemli: Biçimlendiriciler genellikle metinlerini biçimlendirmek için 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şlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.