Bunlar 2019 için en iyi JavaScript grafik kütüphaneleridir

İlk olarak, kısa bir tarihçe:

Veri toplama ve katlanarak artmaya devam etme kullanımında, bu verileri görselleştirme ihtiyacı daha da önem kazanıyor. Geliştiriciler, milyonlarca veri tabanı kaydını, insanların hızlı ve sezgisel olarak yorumlayabilecekleri güzel tablolara ve gösterge tablolarına birleştirmeyi amaçlamaktadır.

Veri görselleştirme teknolojisi son on yılda gelişmeye devam etti ve birçok gelişmiş grafik kütüphanesi artık tüketiciler için mevcut. 2000'li yılların başında, grafik oluşturma, sunucu tarafı görüntü bitmap çizelgeleri tarafından domine edildi. Flash ve Silverlight gibi Eklentiler daha etkileşimli bir grafik oluşturma deneyimi sunarken, indirme hızı, pil ömrü ve sistem kaynaklarını da çok etkiledi.

Mobil ve tablet kullanımının patlamasıyla eklentiler artık büyük platformlarda desteklenmiyordu ve geliştiriciler her yerde çalışabilecek müşteri tarafı teknolojilerini açmak zorunda kaldılar. Aynı zamanda, çok yüksek çözünürlüklü ekranların ortaya çıkması ve dokunma hareketleriyle daha yaygın yakınlaştırma, çözünürlükte bağımsız vektörel çizelgeleri ön plana çıkardı.

JavaScript ve SVG'nin (Ölçeklenebilir Vektör Grafikleri) hâkim olduğu veri görselleştirme dönemine girin. Grafikler artık tüm tarayıcılarda çalışmakta, özel eklentiler olmadan etkileşimi ve animasyonları desteklemekte ve en yüksek çözünürlüklü cihazlarda bile keskin görünmektedir. 50'den fazla görselleştirme kütüphanesini inceleyen bu 9 ürün öne çıktı:

d3.js

D3.js çok kapsamlı ve güçlü bir grafik JavaScript kütüphanesidir. İsteğe bağlı verileri Belge Nesne Modeli'ne (DOM) bağlamanıza ve ardından veriye dayalı dönüştürmeleri belgeye uygulamanıza olanak tanır.

D3, eksenler, renkler, hiyerarşiler, kontürler, hareket hızı, çokgenler ve daha fazlası gibi diğer birçok küçük teknik modüller dahil olmak üzere tipik grafik kitaplıklarının ötesine geçer. Bütün bunlar dik bir öğrenme eğrisi için yapar.

Basit bir tablo oluşturmaya çalışmak karmaşık olabilir. Eksenler ve diğer grafik öğeleri de dahil olmak üzere tüm elemanların açıkça tanımlanması gerekir. Pek çok örnek, CSS'nin grafik öğelerini stillendirmek için nasıl kullanılabileceğini göstermektedir. Grafik tabanlı hiçbir özellik otomatik olarak uygulanmaz. Yabancı otların içine girmek ve her elemanı tamamen kontrol etmek için yaratıcılığı kullanmak istiyorsanız, en iyi seçim budur. Veri görselleştirme projesi gereksinimlerini karşılamak için zamana karşı çalışmak, sıfırdan başlayarak en iyi seçenek olmayabilir.

D3.js, bir grafik kitaplığı için bir yapı taşı olabilir. Geliştiriciler D3'ü NVD3 gibi tüketen grafik çözümlerini kullanmayı kolaylaştırmak için kullandılar.

D3.js açık kaynak kodlu ve kullanımı ücretsizdir.

JSCharting

JSCharting grafik kitaplığı, haritalar, gantt, hisse senedi ve kullanmak için genellikle ayrı kitaplıklar gerektiren diğerlerini içeren çok sayıda grafik türünü destekler. Tüm dünya ülkelerinin yerleşik haritalarını ve bir SVG ikonları kütüphanesini içerir. Bağımsız mikro grafikler takımı, herhangi bir grafik etiketinde veya bir sayfadaki herhangi bir div öğesinde işleyebilir. UI kontrolleri (UIItems) de daha zengin etkileşimli grafikler için izin veren dahil edilmiştir. Verileri veya görselleştirme değişkenlerini gerçek zamanlı olarak kontrol etmek kolaydır ve grafikler SVG, PNG, PDF ve JPG formatlarına aktarılabilir.

Galeri, grafik tipine ve özellik örneklerine ayrılmıştır. Grafik tasarım cilalı ve bazı temiz görünümlü grafikler verir. Genel görseller temiz ve profesyonel bir grafik oluşturma deneyimi sunar.

Dahil edilen örnekler, grafikleri özelleştirmek için bir yapılandırma nesnesi kullanır. Grafik türlerini oluşturma ve kontrol etme ayarlarının kullanımı çok basittir. Daha karmaşık grafik türleri belirlemek için çok az özellik ayarı gerekir ve JSCharting, senaryolar için otomatik olarak en iyi ayarları seçmeye çalıştığı için güçlü ve dinamik varsayılanlara sahiptir.

Dokümantasyonda birçok öğretici ve ayrıntılı API özellik açıklamaları bulunmaktadır. Birçok özellik, örnek kullanım ve örnek bağlantılar içerir.

JSCharting ticari olmayan ve kişisel kullanım için ücretsizdir ve aynı zamanda tüm grafik türlerini ve ürünlerini tek bir ücret karşılığında içeren ticari lisans seçenekleri sunar.

Highcharts

Highcharts, dünyanın en büyük şirketleri tarafından kullanılan popüler bir JavaScript grafik kitaplığıdır. Grafikler SVG kullanılarak oluşturulur ve IE6 / IE8'e geriye dönük uyumluluk için VML'ye geri dönüş. Demo grafikler oldukça zengin bir özellik seti göstermektedir ancak görsel olarak vay değildir. Genel belgeler, ilgili birçok konu için öğreticiler içermektedir ve API belgeleri eksiksizdir.

Grafik, grafikler oluşturmak için yapılandırma seçeneklerini kullanır ve API'nin kullanımı kolaydır.

Highcharts ticari olmayan ve kişisel kullanım için ücretsizdir. Ticari kullanım, diğer kullanımlar için gereklidir ve stok, harita ve gantt çizelgeleri ayrı olarak lisanslanır.

amCharts

amCharts, yakın zamanda, film benzeri sahneler yaratmaya izin veren güçlü bir SVG animasyon motoru ekleyen sürüm 4'ü yayınladı.

Demo çizelgeleri çok hoş görünüyor. Çoğu demo, grafik değişkenlerini gerçek zamanlı olarak ayarlamak için bir dizi palet ve bir kaydırıcı kullanıcı arayüzü sunar. Belgeler, birçok öğretici ve tam API özellik açıklamaları içerir.

Bir grafik oluşturmak, yapılandırma temelli yaklaşımdan biraz farklıdır ve bunun yerine daha açıklayıcı bir API kullanır. Grafikleri yapılandırmak için biraz daha fazla kod gerektirir, ancak daha iyi bir kod tamamlama deneyimi sağlar.

amCharts, markalı çizelgeleri ve diğer kullanım için ücretli lisansları olan ücretsiz bir lisans sunar.

Google Grafikler

Google çizelgeleri güçlü ve kullanımı kolaydır.

Örnek grafikler temiz görünüyor ve gözler üzerinde kolay. Galeri ve genişletilmiş galeri birçok grafik türünü gösterir, ancak hamburger menüsüne basıldığında bu galeri listelerinde gösterilmeyen daha fazla tür (takvim gibi) gösterilir.

Her grafik türü, canlı örneklerle ilgili özel bir öğreticiye sahiptir. Öğreticiler, ilgili özelliklerin kodunu ve API listelerini içerir. Bu, yeni bir grafik kütüphanesiyle başlamak için hoş bir deneyim.

Grafikler, yapılandırma seçenekleri nesnesini kullanarak özelleştirilir. Veri kümeleri, tüm grafikler tarafından tüketilebilen bir DataTable sınıfı kullanılarak doldurulur. Her bir grafik türü, türe özgü öğreticilerde listelenen benzersiz seçeneklere sahiptir. Mülkiyet isimlendirme standardize edilmiştir ve birçok seçenek her türden işe yarar.

Google çizelgeleri ücretsizdir, ancak bir uyarı vardır. Bu bir web servisidir ve yerel olarak barındırılamaz. Geçmişte Google, API’leri emekli etti, bu nedenle kullanımınız kritikse, başka bir seçenek seçmek isteyebilirsiniz.

ZingChart

ZingChart birçok grafik türü sunar ve açısal, tepki ve diğer çerçevelerle bütünleşir. Birçok özelleştirme seçeneğiyle ayarlanmış güçlü bir özelliğe sahiptir.

Demo grafikler, bazıları diğerlerinden daha iyi görünen bir dizi stil teması gösterir, ancak bunları gerektiği gibi biçimlendirme seçenekleri vardır. Demolar mevcut tüm grafik türlerini göstermiyor.

Belgeler mevcut tüm türler için öğreticiler, çok sayıda özellik ve tam API listesi içerir.

ZingChart, grafikleri özelleştirmek için yapılandırma seçeneklerini kullanır. Örnekler, yazı tipi stili gibi birçok özellik ayarını içerir. Bunlar, belirli bir tablo için hangi ayarların gerekli olduğunu anlama yolunu bulabilir.

ZingChart markalaşma ile ücretsiz olarak kullanılabilir. Markalı olmayan kullanım için ücretli lisans mevcuttur.

FushionCharts

FusionCharts, Flash tabanlı bir grafik eklentisi olarak uzun yıllardan beri var. Sağlam bir grafik görselleştirme kütüphanesidir. XML, JSON ve JavaScript dahil olmak üzere birçok veri formatını destekler, modern tarayıcılarda çalışır ve IE6 ile geriye doğru uyumludur. Ayrıca birçok JavaScript çerçevesi ve sunucu tarafı programlama dili de desteklenmektedir.

Harita galerisi çok sayıda örnek içerir ve temiz bir görsel görünüme sahiptir.

Belgeler, iyi API açıklamaları ve her bir grafik türünün örneklerini içerir. Yapılandırma özellikleri, görevler ve grafik özellikleri ile birlikte gruplandırılmıştır.

Grafikler konfigürasyon tabanlı seçenekler kullanılarak oluşturulmuştur ve kullanımı nispeten kolaydır. API içine daha derine inerek özelliklerin listesi uzun olabilir. Tüm yapılandırma özellikleri {chartLeftMargin, showAlternateHGridColor} gibi sığdır. Kod tamamlamayı geliştirme girişimi gibi görünüyor.

FusionCharts, grafik markalaması ile kişisel kullanım için ücretsizdir. Markalanmamış ve ticari kullanım için ücretli lisans mevcuttur.

KOOLCHART

KoolChart bir HTML 5 kanvas tabanlı JavaScript grafik kitaplığıdır. Bir eşleme ve ızgara ürünü de mevcuttur.

Yeni v5 sürümleri, daha etkileşimli bir özellik kümesi ve güncellenmiş stil içeriyor. Görüntüler temiz ve modern. Tuval kullanımı, raster tabanlı olma pahasına daha iyi performans sunar.

Örnekler, diğer yaklaşımlardan daha az pratik görünen grafik seçeneklerini uygulamak için dize tabanlı bir XML kullanır. Bu seçenekler HTML5'e benzer ancak bir JavaScript dizesiyle ayarlanır.

API, her özellik için örnek grafiklerle iyi belgelenmiştir. 173 sayfalık bir PDF kılavuzu da mevcuttur.

İki aylık bir deneme süresi değerlendirme için kullanılabilir. Deneme süresi dolduktan sonra lisans almak gerekir.

Chart.js

Chart.js, 8 grafik türünü destekleyen açık kaynaklı bir JavaScript kütüphanesidir. Sadece 60kb'de küçük bir js kütüphanesidir. Türleri çizgi grafikler, çubuk grafikler, alan grafikleri, radar, pasta grafikleri, kabarcık, dağılım grafikleri ve karışık içerir. Bir zaman serisi de desteklenmektedir. Oluşturma için tuval öğesini kullanır ve ölçek boyutluluğunu korumak için pencere yeniden boyutlandırmasına yanıt verir. IE9 ile geriye doğru uyumludur. IE7 ile de çalışmak için polyfills mevcuttur.

Örnek görseller oldukça modern görünümlüdür ve ilk kez çizim yaparken ilk animasyonları içerir. Gerçek zamanlı olarak seri veya veri noktaları eklerken sorunsuzca hareket eder. Grafik seçenekleri değiştirildikten sonra değiştirilebilir ve bir update () işlevi çağrılarak grafiği yeniden çizer.

Örnek kaynak kodu web sitesi galerisinde gösterilmiyor ancak GitHub deposunda mevcut. Yapılandırma seçenekleri, çizelgeleri oluşturmak ve değiştirmek için kullanılır. Seçenekler API'si temiz ve sezgiseldir.

Belgeler eksiksizdir ve özellik API'si ve kod parçacıkları içeren öğreticiler içerir.

Chart.js açık kaynak kodlu bir kütüphanedir ve kişisel ve ticari kullanım için bir artı olan ücretsizdir. Sınırlı tür sayısı, daha gelişmiş gösterge panosu gereksinimleri için bir sorun olabilir.

Sonuç

JavaScript grafik kütüphanelerinin ekosistemi son on yılda önemli ölçüde gelişti. Günümüzde, çok çeşitli gereksinimleri karşılayan, yüzlerce grafik türüne rağmen çok çeşitli projelere hizmet veren çok sayıda çizelge ürünü bulunmaktadır. Çoğu kitaplık, grafik etkinliğini kendi verileriniz, yükleme ve proje karmaşıklığınızla değerlendirmenize olanak tanıyan ücretsiz bir deneme sürümü veya markalı bir sürüm sunar.

Grafik kitaplıklarının çoğunun basitleştirilmiş veri kümeleri ve statik görselleştirmelerle ilgilenmesi kolaydır. Bununla birlikte, gerçek dünyadaki dinamik veriler görselleştirildiğinde, çizelgeler işleri her zaman sorunsuz şekilde yerine getiremeyebilir. Elemanları çizelgelerin doğru görünmesi için ayarlamak ve düzenlemek için daha fazla çalışma gerekebilir ve bu manuel ayar değiştirme, yeni dinamik veriler görselleştirilirken bozulabilir.

Benzersiz ihtiyaçlarınız için en iyi JS grafik çözümünü seçmek için, mevcut ve gelecekteki projelerinize ideal bir uyum sağlamak için kendi verilerinizi yukarıda listelenen iki kütüphaneye karşı test etmenizi öneririm.