Etkileşimli Grafikler Oluşturmak için 9 Javascript Kütüphanesi

Yani elinizde tonlarca veri var, bir dizi değişkenle, bir şekilde bir başkasına aktarmanız gerekiyor. Ham, örgütsüz verilerin anlaşılmaları zor olacaktır. Bu yüzden çizelgelerden yardıma ihtiyacınız var. Web tasarımında, grafikler veri görselleştirme için en iyi araçlardan biridir. Okunması kolay, gözleri kolay ve kurulumu kolay.

Ama hadi işleri bir kenara bırakalım: haydi bu çizelgelere animasyon ve etkileşim ekleyin, böylece okuyucular sadece grafikten yeni bir şey öğrenemez, aynı zamanda onunla da oynayabilir. Dışarıdaki bazı JS kütüphaneleri sayesinde, aslında göründüğünden daha kolaydır. Onları kontrol edelim.

1. Grafik JS

Chart.js 6 farklı türde grafikler oluşturmak için bağımlılık içermeyen bir kütüphanedir: çizgi grafikler, çubuk grafikler, radar grafikler, kutupsal alan grafikler, pasta ve halka grafikler. Kütüphane ayrıca grafik türüne göre ayrılmıştır, böylece sayfalarınız gerekmeyen şeylerle tıkanmaz. Duyarlı tasarımı destekler ve grafik arayüzünü özelleştirmek için renk veya animasyon gibi değişkenleri kolayca değiştirebilirsiniz.

2. Grafikçi JS

Grafikçi JS SVG'yi kullanan duyarlı grafikler oluşturmak için harika bir kütüphanedir. Duyarlılığının yanı sıra, Chartist endişelerin net bir şekilde ayrılmasını kullanarak size esneklik sağlar: CSS ile stil ve JS ile kontrol. Özelleştirmeyi kolaylaştırmak için SASS dosyaları dahil edilmiştir. Buradaki en güzel şey, size ilave animasyon seçenekleri sunan Chartist animasyon API'sı SMIL'i kullanarak grafiğinizi canlandırmak için sınırsız seçeneklere sahip olmanızdır..

3. C3 JS

C3 JS D3 JS'ye dayalı grafikler oluşturmak için bir kütüphanedir. D3 JS ile grafikler oluşturmak için gereken kodu sarar, böylece D3 kodunu yazmayı atlayabilir ve yalnızca verilerinizi girebilirsiniz. C3, çizelgelerinizi kolayca kontrol etmek için kullanabileceğiniz çeşitli API'ler ile birlikte gelir. Grafiğinizi özelleştirmek için, verilen CSS sınıflarına kendi özel stillerinizi tanımlayın. Basit çizgi grafiklerden gösterge tablolarına grafikler oluşturun. Kütüphanenin nasıl çalıştığını görmek için bu sayfaya göz atın.

4. Flot

Flot Bir seriyi açmak veya kapatmak, veri noktası etkileşimleri, kaydırma, yakınlaştırma ve daha fazlası gibi etkileşimli öğeler içeren grafikler oluşturmak için bir jQuery plguin. Flot, çeşitli grafik tipi seçenekleriyle birlikte gelir ve grafiğinizde daha fazla yetenek istiyorsanız, işte kullanabileceğiniz bazı eklentiler. Grafikler, HTML tuvallerini destekleyen tarayıcılarla iyi çalışacaktır.

5. EChart

Echart çoklu grafik türlerini destekleyen, büyük verileri işleyebilen (bir Kartezyen çizelgesinde 200.000'e kadar veri noktası çizerek) Çin'den inanılmaz derecede kapsamlı bir kütüphanedir, ölçek dolaşımına sahiptir, birden fazla çizelge arasında zahmetsizce veri alma, tümleştirme ve veri alışverişi yapma olanağı sağlar. bir veri türünden diğerine kolayca geçmek için bir tane ve daha fazlası.

6. Peity

Peity web sayfanıza bir mini grafik ekleyecektir. Bir elemanı mini'ye dönüştüren küçük bir jQuery eklentisidir. svg çizgi, çubuk, çörek veya pasta grafiği. Sadece bir eleman yaratmanız ve bunun gibi bir değer vermeniz gerekiyor. 1/5 ve bir arama yap peity ( 'pasta') Bu öğe üzerinde bir mini pasta grafiği yapmak için. Örneğin, sadece beşte birinin vurgulandığı bir donut grafiği oluşturmak için işte HTML:

1/5

Grafik rengini, yarıçapını, genişliğini ve yüksekliğini özelleştirebilirsiniz, ancak varsayılan olarak küçük boyutlu olarak görüntülenir..

7. DC JS

DC JS kullanılan motor bakımından C3 JS ile benzerlik gösterir; ikisi de SVG'de çizelge oluşturmak için D3 kütüphanesini kullanıyor. DC JS, tarayıcılar ve mobil cihazlar için veri ve analizleri görselleştirmenize yardımcı olmak için oluşturulmuştur. D3 JS'de kaldıraç olduğundan, grafiğinize kullanıcı etkileşimi eklemenizi sağlar. DC JS, basitten karmaşığa yüksek grafikler yaratan güçlü bir kütüphanedir.

8. Google Şeması

Google Grafiği üzerinden Google Görselleştirme API'sini kullanarak etkileşimli grafikler ve veri araçları oluşturabilirsiniz. Google Grafik’in veri görselleştirme yeteneklerini incelemek için grafik galerileri var. Başlamak için ihtiyacınız olan Google Chart kitaplıklarını yüklemek için web sayfanıza basit bir JavaScript yerleştirin. Ardından grafiklendirmek istediğiniz verileri listeleyin ve grafik seçenekleriyle bazı özelleştirmeler yapın. Sonunda bir kimliği olan bir grafik nesnesi oluşturun ve web sayfanızda bir

grafiğinizi görüntülemek için bu kimliğe sahip.

9. NVD3

NVD3 D3 JS ile oluşturulan yeniden kullanılabilir grafikler ve harita bileşenleri kümesidir. Bu nedenle bu kütüphane grafik oluşturmanızı kolaylaştıracak bir şablondur. NVD3 ile oluşturulan birçok örnek tabloya buradan göz atın.

Şimdi Okuyun: İnteraktif ve Özel Haritalar Oluşturmak için JavaScript Kütüphaneleri