PivotTable.js Nedir?
Herkese merhaba,
Bu yazıda PivotTable.js‘nin ne olduğundan bahsedeceğim.
PivotTable.js , Nicolas Kruchten tarafından yazılmış, sürükle ve bırak işlevine sahip, açık kaynaklı bir Javascript Pivot Table (diğer adıyla Pivot Grid, Pivot Chart, Cross-Tab) library’dir.
PivotTable.js, jQuery/jQueryUI üzerine inşa edilmiş ve orijinal olarak Nicolas Kruchten tarafından CoffeeScript’te yazılmış, sürükle ve bırak işlevine sahip bir Javascript Özet Tablo kitaplığıdır .
PivotTable.js’nin React desteği de mevcuttur.
PivotTable.js’nin temel işlevi, bir veri kümesini bir özet tabloya dönüştürmek ve ardından isteğe bağlı olarak bir kullanıcının bu özet tabloyu manipüle edip Microsoft Excel’in eski sürümlerinde bulunana çok benzeyen, geliştiricilere yönelik bir dizi ekstra özellik ve bazı görselleştirme efektleri içeren bir pivot tablo işlevi sunmaktır. İsteğe bağlı eklentilerle özet tablo , çeşitli türlerde grafikler olarak oluşturulabilir ve bu, pivot tabloyu bir pivot grafiğe dönüştürür. PivotTable.js’nin D3.js ve C3.js chart desteği bulunmaktadır.
PivotTable.js Özellikleri
- PivotTable.js Hafiftir: çekirdek (grafik desteği olmadan) 1000 LOC’den daha az CoffeeScript içeren tek bir dosyadır, küçültülmüş ve sıkıştırılmış 6.3 kb Javascript’e kadar derler ve yalnızca jQuery ve jQueryUI’nin ‘sıralanabilir’ özelliklerine bağlılığı bulunmaktadır.
- PivotTable.js jQuery ve jQueryUI’nin çalıştığı her yerde çalışır. (jQuery 1.8.3 ve jQueryUI 1.9.2 ile test edilmiştir)
- PivotTable.js özelliklerin kardinalitesine bağlı olarak, yaklaşık yüz bin kayda kadar ticari donanım üzerinde Chrome’da kabul edilebilir bir hızda çalışır.
- PivotTable.js kullanıcı arayüzü özelleştirilebilir.
- PivotTable.js’nin katmanlı mimarisi, etrafında pivot tablo UI’si olsun veya olmasın özet tablo oluşturmaya izin verir. (UI’yi kullanmıyorsanız, jQueryUI’ye bağımlılık yoktur)
- PivotTable.js temel input format biçimleriyle çalışır.
- PivotTable.js türetilmiş öznitelikleri, bir fonksiyondan geçerek tüm girdi kaydına dayalı olarak anında oluşturulabilir.
- PivotTable.js karmaşık toplama işlevleri , tüm girdi kaydına dayalı değerleri hesaplayabilir. (örneğin ağırlıklı ortalamalar)
- PivotTable.js temel ısı haritası ve çubuk grafik oluşturucular için yerleşik desteğe ve grafik veya TSV dışa aktarma desteği ekleyen isteğe bağlı ekstra oluşturuculara sahiptir.
- PivotTable.js uzatma noktaları, toplama işlevlerine, tablo çıktısına, kullanıcı arayüzüne ve görselleştirmelerin belirli uygulamalara göre uyarlanmasına olanak tanır.
- jQuery UI Touch Punch ile mobil cihazlarda çalışır.
- PivotTable.js’nin bir test paketi vardır.
PivotTable.js Kurulumu
PivotTable.js’yi npm install pivottable ile yükleyebileceğiniz gibi bower install pivottable komutu ile de yükleyebilirsiniz ya da dilerseniz aşağıdaki sıralamayı da izleyebilirsiniz.
Komut dosyalarını doğrudan yüklüyorsanız şunları yapmanız gerekir:
- PivotTable.js bağımlılıklarını yükleyin. (pivot.min.js)
- PivotTable.js için her durumda jQuery yüklenmelidir. (jjquery-3.6.1.min.js)
- Etkileşimli PivotTable.js için jQueryUI gereklidir.(jquery-ui.min.js)
- PivotTable.js için grafik eklentileri kullanıyorsanız D3.js, C3.js ve/veya Google Charts bu kütüphaneler yüklenmelidir.
- PivotTable.js’nin diğer dosyalarını yükleyin.
Aşağıdaki kod yardımıyla siz de bu kütüphaneyi rahatlıkla kullanabilirsiniz.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PivotTable.js Nedir?</title>
</head>
<body>
<div id="pivottable"></div>
</body>
</html>CSS Kodu
body {
font-family: Verdana;
}JAVASCRIPT Kodu
var utils = $.pivotUtilities;
var heatmap = utils.renderers["Heatmap"];
var sumOverSum = utils.aggregators["Sum over Sum"];
$("#pivottable").pivot(
utils.tipsData, {
rows: ["sex", "smoker"],
cols: ["day", "time"],
aggregator: sumOverSum(["tip", "total_bill"]),
renderer: heatmap
});[codepen_embed height=300 theme_id=1 slug_hash=’ZEoWbJJ’ user=’yavuzselimkart’ default_tab=’html’ animations=’run’][/codepen_embed]
Sitenizde kullanmak için linkini ziyaret ederek, kendinize göre revizeler yapabilirsiniz.
Kullanımı ile ilgili daha fazla detay için linkini ziyaret ederek detaylı kullanabilirsiniz.
Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.
