JavaScript Grafik Kitaplıkları: 13 Popüler Seçenek

#1 – Chart.js

Chart.js, grafikleri oluşturmak için HTML5'in <canvas> 'ını kullanan pratik bir grafik kitaplığıdır.

Kitaplık, varsayılan olarak duyarlı olması gibi nedenlerle basit projeler için kolayca en iyi seçimdir ve ayrıca kullanıcı davranışına göre animasyon efektleri uygulayabilirsiniz.

Chart.js ile oluşturabileceğiniz 8 grafik türü:

• Alan Grafiği
• Grafik çubuğu
• Kabarcık Grafiği
• Çörek ve Pasta Grafikleri
• Çizgi grafik
• Karışık Grafik Türleri
• Kutup Alanı Tablosu
• Radar Grafiği

Kullanım kolaylığı söz konusu olduğunda, sözdizimi basittir ve daha önce JavaScript ile hiç çalışmamış olsanız bile, yeni bir grafik oluşturmak kolaydır.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Grafikleri dinamik işlevler ve veri havuzuyla genişletmek isterseniz, kitaplıkta yeni işlevler eklemek için kullanabileceğiniz bir Eklentiler sistemi vardır.

Chart.js Örneği

Pen Proof of concept: CodePen'de Sven (@hofmannsven) tarafından hazırlanan Background Gradient ile Chart.js'ye bakın.

Chart.js Ek Kaynakları

• Chart.js + Next.js = Güzel, Veriye Dayalı Panolar
• Chart.js'ye Başlarken; Görev Tabanlı Öğrenme

#2 – D3.js

D3'ün geleneksel bir grafik kitaplığından ziyade bir veri görselleştirme aracı olduğunu söyleyerek başlayayım.

D3, bir veri seti belirlemenize ve onu DOM'a bağlamanıza izin verir, daha sonra bu verileri benzersiz bir görsel temsile dönüştürmek için kitaplık işlevlerini kullanabilirsiniz. Görsel sunuma gelince, D3, verileri bir sayfada işlemek için HTML tablolarından, SVG'den ve <canvas> 'tan yararlanır.

Üzerinde birden fazla etkileşimli veri noktası bulunan coğrafi tabanlı dönen kürelerden birini daha önce gördüyseniz, bu sunumun D3 ile oluşturulmuş olma ihtimali vardır. Ancak, aşağıdaki demoda görebileceğiniz temel grafik gibi pratik kullanımlar için de iyi çalışır. Sonuç olarak, D3'ün daha karmaşık özelliklerini keşfetmek için resmi Öğreticiler bölümüne başvurmak isteyeceksiniz.

D3.js Örneği

CodePen'de Web Dev (@ronaldmarin) tarafından hazırlanan Pen D3 Chart + ReactJS'ye bakın.

D3.js Ek Kaynakları

• D3.js öğreticisi
• D3.js Takvim Isı Haritası Oluşturma

#3 – Apache EChart'ları

Apache ECharts'ın bu kadar popüler olmasının nedenlerinden biri, kutudan çıkar çıkmaz yüzlerce önceden hazırlanmış grafik örneğine erişebilmenizdir. Örnekler dizinini ziyaret ederek bunu kendiniz kontrol edebilirsiniz. Bu sayfa, çizgiler, çubuklar, pasta grafikler, dağılım, ısı haritaları, grafikler ve çok daha fazlası gibi kategorilerdeki çizelgeleri ve örnekleri kapsar.

Ve her bir örnekte JavaScript ve TypeScript kod örnekleri bulunur. Ama hepsi bu kadar değil, bu kütüphaneyi kullanmanın gerçek hayattaki bazı faydaları var. İşte bunlardan birkaçı:

• Veri akışı. Milyonlarca veri noktasıyla etkileşimli grafikler oluşturmak ister misiniz? ECharts, veri akışını sağlamak için WebSockets kullanır, böylece çok büyük veri kümeleriyle bile eşzamansız olarak yüklenebilir.
• Mobil uyumlu. Kullanıcılar bir EChart'ı mobil cihazlarında görüntülediğinde, grafiğin kendisi etkileşimli özellikler sağlamak üzere optimize edilmiştir - yakınlaştırma, kaydırma ve SVG oluşturma, en iyi teslim edilebilirliği sağlamak için.
• Dinamik Veri. EChart'lara birden fazla (ayrı) veri noktası besleyebilirsiniz ve kitaplık, kullanıcılara etkileşimli bir deneyim sunmak için grafiği otomatik olarak canlandıracaktır.
• Ulaşılabilirlik. Apache Echarts (v4.0 ve üstü), WAI-ARIA yönergelerini takip edecek şekilde oluşturulmuştur.

Grafiklerinizi harici bir CDN kullanarak web sitenizde de görüntüleyebilirsiniz.

Apache ECharts Örneği

CodePen'de Vale (@vsigno) tarafından kaleme alınan Apache Ecchart Örneğine bakın.

Apache ECharts Ek Kaynakları

• Bir Haftada Daha İyi Bir GitHub Insight Aracı Oluşturun

#4 – Olay Yeri

Plotly, veri uygulaması dağıtımı için düşük kodlu bir çözüm olan Dash'in ana şirketidir. Ve şirket içinde kendi grafik kitaplıklarını ( Plotly ) geliştirirler.

Plotly ile en temel grafik görselleştirmelerini oluşturabilirsiniz, ancak kitaplığın gerçek gücü istatistik tabanlı grafikler, 3B veri temsilleri ve finansal verilere dayalı grafikler üretme yeteneğinde yatmaktadır.

Hem Node.js modülü olarak mevcuttur hem de doğrudan bir CDN'den kullanılabilir.

Konulu Örnek

CodePen'de plotly (@plotly) tarafından yapılan tıklama olayında Pen Add ek açıklamasına bakın.

#5 – Frappe

Frappe çizelgeleri kitaplığı, Frappe Çerçevesini oluşturan kişiler tarafından yapılmıştır. Bu kütüphane olabildiğince basittir. Ve bu sadelik, kütüphanenin popülaritesine katkıda bulunan önemli bir faktördür.

Kitaplık, harici bağımlılık gerektirmez ve yalnızca birkaç satır kodla mobil uyumlu SVG çizelgeleri oluşturabilir. İşte temel bir Eksen grafiği için bir kod örneği:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

Ve bu küçük pasaj şöyle bir grafiğe dönüşür:

Ayrıca, karma grafikler (bir arada birden çok grafik), ek açıklamalar, ısı haritaları için destek vardır ve verileri gerçek zamanlı olarak güncellemeyi veya dışa aktarmayı planlıyorsanız bir API mevcuttur.

Frappe Örneği

CodePen'de Jang Rush (@weakish) tarafından kaleme alınan Pen Frappe Hello World'e bakın.

#6 – Apeks Grafikleri

ApexCharts çok geleneksel bir grafik kütüphanesidir. ApexCharts ve Frappe (örneğin) arasındaki temel fark, ApexCharts'ın biraz daha fazla demo sağlamasıdır. Ancak aynı zamanda React, Vue ve Angular gibi popüler çerçeveler için yerel destek sunar. Bu aynı zamanda, tüm demo çizelgelerinin, söz konusu çerçevelerin sözdiziminde yazılı ilgili örneklerine sahip olduğu anlamına gelir.

Özelliklere gelince, tüm grafikler SVG formatında oluşturulur ve varsayılan olarak mobil uyumludur. Ayrıca akıcı animasyonlar ve ek açıklamalar gibi özelliklerden yararlanabilir ve 10 örnek stilden birini seçerek grafik tema paletinizi özelleştirebilirsiniz.

ApexCharts Örneği

CodePen'de ApexCharts (@apexcharts) tarafından kalemin Gerçek Zamanlı Panosuna bakın.

#7 – G2

Kısa süre önce React.js ve Vue için bileşen kitaplıkları hakkındaki makalelerim de dahil olmak üzere birkaç kez Ant Design hakkında konuştum. Ant sadece GitHub'da son derece popüler olmakla kalmıyor, aynı zamanda topluluklar da onları dünyanın tüm bölgelerinde seviyor.

Ve G2 çizelge kitaplığı (ya da “Görselleştirme Dilbilgisi” olarak adlandırdıkları) Ant Design'ın Ant Design System kullanan bir grafik sistemi uygulamasıdır. Gerçek zamanlı veri görselleştirmeyle ilgili birçok kitaplık bulabileceğiniz AntV ana sayfasına göz atmanızı şiddetle tavsiye ederim.

Genellikle yönetici panoları oluşturmak, veri yolları oluşturmak ve işleme motorunu kullanarak etkileşimli veri görselleştirme örnekleri oluşturmak için kullanılır. Bu motor, WebGL, Canvas ve SVG aracılığıyla çizelgeleri ve veri vektörlerini işleyebilir. Kitaplık takılabilir olduğundan, D3.js (daha önce gördüğümüz) gibi daha sağlam kitaplıklar aracılığıyla grafik sunumlarınızı daha da geliştirebilirsiniz.

#8 – kabaViz

Jared Wilber'in kabaViz kitaplığı 3 farklı kitaplığın birleşimidir: D3.js, Rough.js ve kullanışlı - elle çizilmiş eskiz işlemcisi. Yukarıdaki örnek ekran görüntüsünden de anlayabileceğiniz gibi, bu sizin tipik grafik kitaplığınız değil. kabaViz, tamamen JavaScript kullanarak elle çizilmiş, eskiz tarzı grafikler oluşturmanıza yardımcı olmak amacıyla oluşturulmuştur.

Bu tür bir kütüphane, kişisel projelere, diğer bir deyişle geleneksel profesyonel tarz yaklaşımından daha yaratıcı bir kıvılcım gerektiren projelere harika bir katkı sağlayacaktır. Ve sözdiziminin kendisi olabildiğince basit, Frappe ve ApexCharts'ın beğenilerine çok uygun.

Bunu aşağıdaki demoda kendiniz görebilirsiniz.

kabaViz Örneği

CodePen'de Danny Englishby (@DanEnglishby) tarafından kaleme alınan Pen RoughViz Demosuna bakın.

#9 – Hafif Grafikler

Finansla ilgili bir proje (veya bu konuda kripto para birimi) üzerinde çalışıyorsanız, daha önce bahsedilen grafik kitaplıklarının çoğunun bunu kesmeyeceği oldukça açıktır. Bu nedenle, işte Lightweight Charts - özellikle finans tabanlı çizelgeleri ve grafikleri görüntülemek için oluşturulmuş bir grafik kitaplığı.

Bu kitaplık yalnızca açık kaynak kodlu ve hafif olmakla kalmaz, aynı zamanda finans ve dinamik yapısıyla ilgili grafik verilerini görüntülemek için gerekli olan tüm gerekli özellikleri de içerir.

Bu özelliklerden biri, tuvalinize gerçek zamanlı veri aktarmanıza ve ardından kullanıcının sayfayı yenilemesine gerek kalmadan güncellenmesini sağlayan veri akışıdır. Ve göz önünde bulundurabileceğiniz bir diğer faktör, bu kütüphanenin ana sayfasında açıklandığı gibi bir sorun olmaması gereken performanstır.

"Grafik çözümlerimiz, baştan itibaren devasa veri dizileriyle çalışacak şekilde tasarlandı. Grafikler, yeni tiklerle saniyede birden çok kez yapılan güncellemelerde bile binlerce çubukta bile duyarlı ve çevik kalıyor.”

Bir fikir edinmek için aşağıdaki demoya göz atın, aynı zamanda birçok grafik seçeneği ve özelliği.

Hafif Grafikler Örneği

CodePen'de truong (@truong160196) tarafından kalem ticareti görünümü gelişmiş tablosuna bakın.

Hafif Grafikler Ek Kaynaklar

• Uygulamanız için mali tablolar

#10 – İlan Tahtası

Billboard, D3 tabanlı bir arayüz grafik kütüphanesidir. Beklediğiniz tüm modern özelliklere sahiptir - SVG oluşturma, mobil cihazlar için dokunma desteği, basit bir arayüz ve harika API belgeleri.

Ancak, benim favorim ve muhtemelen diğerleri için de en sevdiğim özellik, Billboard'un bu kitaplık ile oluşturabileceğiniz 230'dan fazla çizelge örneği sağlamasıdır. Bu örnekler Temel, Eksen, Veri, Izgara, Etkileşim, Bölge ve diğerleri gibi grafik kategorilerine ayrılmıştır.

Bu, yalnızca projeniz ve gereksinimleri için doğru grafik türünü bulamayacağınız, aynı zamanda diğer seçenekleri keşfedebileceğiniz ve belirli bir örneğin dikkatinizi çekip çekmediğini görebileceğiniz anlamına gelir.

Billboard.js Örneği

CodePen'de DTCC (@dtcc) tarafından hazırlanan Kalem Tablosu İstekleri – Billboard.js'ye bakın.

#11 – Perspektif

Perspektif, FINOS'un (Açık Kaynak Fintech) yürüttüğü projelerden biridir ve FINOS'un kendisi de Linux Vakfı'nın bir parçasıdır. Hafif Grafikler gibi – Perspective.js, finans tabanlı projeler için grafik çözümleri sağlamaya yöneliktir. Ancak bundan çok daha fazlasını yapabilir ve e-Ticaret, veri ızgaraları ve gönderi segmentasyonu ile ilgili projelerde sıklıkla kullanılır.

Covid-19, Havaalanları ve Olimpiyatlar gibi büyük spor etkinlikleri hakkında çizelgeler gördüyseniz, arayüz ve veri akışı entegrasyonunun Perspective ile yapılmış olma ihtimali yüksek. Veri akışları ve karmaşık gerçek zamanlı analiz için optimize edilmiş zengin bir Kullanıcı Arayüzüne sahiptir.

JavaScript ve Python geliştiricileri için mevcuttur ve Özel Öğeler Web Bileşeni'ni kullanır.

#12 – Tost UI Grafiği

Bir şey olursa, Toast UI grafik kitaplığı, grafik stilleri ve tasarımları açısından dikkate alınması gereken başka bir seçenektir. Buradaki işlevsellik, daha önce incelediğimiz kitaplıklara çok benzer.

Toast UI'nin diğer seçeneklerden farklı olduğu alanın API özelliği olduğunu düşünüyorum. Muhtemelen edinebileceğiniz en iyi API'lerden biridir ve ücretsiz kapsamlı belgelerle birlikte gelir. API özelliklerinden biri, veri kaynağınız değiştiğinden veya kullanıcı girişi nedeniyle grafik verilerini dinamik olarak değiştirmenizin bir yolu olan Örnekler'dir .

Toast'ın desteklediği grafik türleri arasında çubuklar, sütunlar, çizgiler, alanlar, kabarcıklar, ağaç haritaları, radarlar, radyal çubuklar ve diğerleri bulunur. Bu kitaplığı kullanmanın tercih edilen yolu npm'dir, ancak bir CDN mevcuttur ve tek yapmanız gereken grafiğin görüntülenmesini istediğiniz yer için bir div id="chart" kapsayıcı belirtmektir.

#13 – Yeniden çizelgeler

Öncelikle React.js ile çalışıyorsanız, Recharts kitaplığı, React ile D3.js üzerine kuruludur. Yerel React.js bileşen mimarisine uygundur ve Recharts ile oluşturulan çizelgeler ayrıştırılabilir ve ihtiyacınız olan sayfalarda ayrı bileşenler olarak yeniden kullanılabilir.

Mevcut bir projede denemek istemeniz durumunda, tüm grafik örneklerinin bileşen yapısı önceden yazılmıştır. Kütüphane ilk olarak 2016'da piyasaya sürüldü, ancak hala aktif olarak geliştiriliyor.

Örnek çizelgeler

CodePen'de binu (@binutomy) tarafından kaleme alınan ReCharts'a bakın.