Görselleştirme: Tablo

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:

  • headerRow - Tablo başlığı satırına (<tr> öğesi) bir sınıf adı atar.
  • tableRow - Başlık olmayan satırlara bir sınıf adı atar (<tr> öğe).
  • oddTableRow - Tek tablo satırlarına (<tr> öğe) bir sınıf adı atar. Not: changenatingRowStyle seçeneği true olarak ayarlanmalıdır.
  • selectedTableRow - Seçilen tablo satırına (<tr> öğesi) bir sınıf adı atar.
  • hoverTableRow - Vurgulanan tablo satırına (<tr> öğesi) bir sınıf adı atar.
  • headerCell - Başlık satırındaki (<td> öğesi) tüm hücrelere bir sınıf adı atar.
  • tableCell - Tüm başlık olmayan tablo hücrelerine (<td> öğesi) bir sınıf adı atar.
  • rowNumberCell - Satır numarası sütunundaki hücrelere sınıf adı atar (<td> öğesi). Not: showRowNumber seçeneği true olarak ayarlanmalıdır.

Örnek: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

Not: CSS'de bazı öğeler, diğerlerini geçersiz kılar. Örneğin, bir <tr> öğesi ve bir <td> öğesi için arka plan rengi belirtirseniz ikinci öğe, önceki öğeye göre öncelikli olur. Çakışmaları önlemek için cssClassNames ile ilgili tüm CSS stillerini belirttiğinizden emin olun.

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. showRowNumber değeri false ise frozenColumns öğesini 0 olarak ayarlamak, null değerine ayarlı olarak görünür ancak showRowNumber true olarak ayarlanırsa satır numarası sütunu dondurulur.

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:

  • "enable" (etkinleştir) - Tabloda sayfa ileri ve sayfa geri düğmeleri bulunur. Bu düğmeler tıklandığında sayfa oluşturma işlemi gerçekleştirilir ve görüntülenen sayfa değiştirilir. pageSize seçeneğini de ayarlayabilirsiniz.
  • "event" - Tabloda sayfa ileri ve sayfa geri düğmeleri bulunur ancak bunların tıklanması bir "sayfa" etkinliğini tetikler ve görüntülenen sayfayı değiştirmez. Kod kendi sayfa dönüştürme mantığını uyguladığında bu seçenek kullanılmalıdır. Sayfalama etkinliklerinin manuel olarak nasıl işleneceğine ilişkin bir örnek için TableQueryWrapper örneğine bakın.
  • "devre dışı bırak" - [Varsayılan] Sayfalandırma desteklenmiyor.
  • 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:

  • "her ikisi": Önceki ve sonraki düğmeleri etkinleştirme
  • "önceki" - yalnızca önceki düğme etkinleştirildi
  • "sonraki": Yalnızca sonraki düğmesi etkinleştirildi
  • "auto" - düğmeler geçerli sayfaya göre etkinleştirilir. Yalnızca ilk sayfada, sonraki sayfa gösteriliyor. Son sayfada yalnızca önceki bölüm gösterilir. Aksi takdirde her ikisi de etkinleştirilir.
  • number - gösterilecek sayfalama düğmelerinin sayısı. Bu açık numara, pageSize'dan hesaplanan sayıyı geçersiz kılar.
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:

  • "enable" - [Varsayılan] Kullanıcılar, tıklanan sütuna göre sıralamak için sütun başlıklarını tıklayabilir. Kullanıcılar sütun başlığını tıkladığında, satırlar otomatik olarak sıralanır ve bir "sıralama" etkinliği tetiklenir.
  • "event": Kullanıcılar sütun başlığını tıkladığında bir "sıralama" etkinliği tetiklenir ancak satırlar otomatik olarak sıralanmaz. Bu seçenek, sayfa kendi sıralamasını uyguladığında kullanılmalıdır. Etkinliklerin manuel olarak nasıl işleneceğine ilişkin bir örnek için TableQueryWrapper örneğine bakın.
  • "devre dışı bırak": Bir sütun başlığını tıklamanın herhangi bir etkisi yoktur.
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ış. sortColumn belirtilmezse yok sayılır.

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 page, modu etkinleştirme/etkinlik modundaysa kullanılır.

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:
  • column - (sayı) Tablonun sıralandığı sütunun dizini.
  • Sıralama artansa ascending - (boole) doğru, azalansa false (yanlış) değerini alır.
  • sortedIndexes - (sayısal dizi) Dizideki dizinin (görünen tabloda) sıralı satır numarası olduğu ve değer, temel (sıralanmamış) veri tablosunda ilgili satırın dizinidir.
setSelection(selection)

Standart setSelection() uygulaması, ancak yalnızca tüm satırları veya birden fazla satırı seçebilir. Seçim nesnesindeki satır dizinleri, kullanıcı etkileşiminden (sıralama, sayfalandırma vb.) bağımsız olarak orijinal veri tablosuna başvuruda bulunur.

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:
  • column - (sayı) Tablonun sıralandığı sütunun dizini.
  • Sıralama artansa ascending - (boole) doğru, azalansa false (yanlış) değerini alır.
  • sortedIndexes - (sayısal dizi) Dizideki dizinin (görünür tabloda) sıralı satır numarası olduğu ve değer (sıralanmamış) veri tablosunda bu satırın dizini olduğu sayı dizisi.
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.