GraphicsJS, Hayal Edebileceğiniz Herhangi Bir Web Grafiği Oluşturmanıza İzin Verir

Özel JavaScript API'ları Web’in geleceği açık kaynak hareketi ile birlikte SVG grafikleri web geliştiricileri için olanakları açmış.

GraphicsJS ücretsiz bir açık kaynak kütüphane ve JS API'dir. özel grafik oluşturma web tarayıcılarında. Olarak kullanılabilir görselleştirme aracı Verilerin grafiğini oluşturmak için veya serin şeyler yapmak için kullanılabilir. sadece gösteriş yapmak.

Ana sayfada bir demoların büyük bölümü GraphicsJS ile oluşturulmuş. Ve bu örnekler sadece mümkün olanın yüzeyini çiziyor.

Kütüphane kendi sanal DOM'sini kullanıyor Bu, tarayıcının DOM'sinin bir soyutlamasıdır. Bu biraz React’in sanal DOM’ine benzer ve benzer şekilde kullanılır.

Bu kütüphane DOM’nin bir klonunu kullandığından gerçek HTML elemanlarına ihtiyaç duyuyor üzerinde çalışmak. Bu yüzden SVG / VML kullanır HTML5 tuvaline gömülü nesneler yerine.

Bu grafik motoru oldu aslen AnyChart kütüphanesinde yerleşik olarak. Oradan, öyleydi tweaked ve kendi JS API'si olarak açık kaynaklı.

GraphicsJS tüm büyük tarayıcıları destekler, Hatta IE6 ve Chrome 1.0'a kadar geri dönüyor.

Tüm kaynak kodu GitHub deposunda mevcuttur, burada bir kopyasını indirebilir ve vaktiniz varsa etrafa sokabilirsiniz. Ama bence öğrenmenin en iyi yolu ilk önce dalmak..

İçinde göz atabilirsiniz API dokümanları ama ben genellikle bu dokümanları gereksiz buluyorum. Dokümanlar, gerektiğinde en iyi şekilde kullanılır belirli bir yöntem veya API çağrısı bul referans vermek.

Yeni başlıyorsan, yapabilirsin. oyun alanını ziyaret et AnyChart'ın web sitesinde barındırılıyor. Bu bulmak için güzel bir yer çalışma kodu örnekleri sözdizimini yıkmak.

Veya, gerçekten bir kare ile başlamak istiyorsanız o zaman GraphicsJS başlangıç ​​kılavuzu yardım edebilir. Bu daha çok “resmi” dokümantasyon için elinizi tutacak pürüzsüz öğrenme eğrisi API dokümanlarıyla karşılaştırıldığında.

Her iki durumda da, GraphicsJS'nin açık kaynaklı olduğunu ve geliştirici topluluğuna bırakıldığını seviyorum. Mükemmel bir kütüphaneden uzakta ama bizim için en iyilerinden biri. sıfırdan özel SVG grafikleri oluşturma.

Ve dişlilerinizi döndürmek için, aşağıda Graphics.js ile yapabileceklerinizin bir örneğini görebilirsiniz.