girişJquery grafik görünümleri. CSS3 ve jQuery kullanarak etkileşimli bir grafik nasıl oluşturulur
Genellikle web uygulamalarında veya yazılımlarda, kullanıcılara bazı bilgiler sağlamamız gerekir. Daha önce trafik veya tıklama istatistikleri gibi bilgiler basit bir test ve rakamlarla sağlanıyordu. Bu yöntem oldukça basittir ve zaten kullanımdan kaldırılmıştır.
İnternetin gelişmesiyle birlikte çok daha fazla verinin toplanması ve hesaplanması gerekiyor. Bu nedenle, sonuçları düz metin olarak göstermenin o kadar etkili olması pek olası değildir. Günümüzde metnin yerini, bilgilerin kullanıcılar için daha erişilebilir ve anlaşılır olduğu grafikler ve diyagramlar almıştır. Kelimenin tam anlamıyla, bir anda, diyagrama bakarak kullanıcı, son kontrolden bu yana trafikteki artış veya azalışın ne kadar arttığını belirleyebilir. Bu, hesaplanan bilgilerden belirli verileri belirleme sürecini hızlandırmaya yardımcı olur.
Bilgileri görüntülemenin birçok farklı yolu vardır, ancak her bir grafik bileşeninin (pasta grafiği, çubuk grafik vb.) amacı aynıdır - harfleri ve sayıları yüzdelere dönüştürmek ve bunu görsel olarak göstermek.
Aşağıda, metin okumalarınızı bir grafik şeklinde görüntülemeye karar verirseniz, sizin için yararlı olabilecek bir grafik kitaplıkları listesi sağladık.
- Grafik ve çizelge kitaplıkları
Axiis, hem yeni başlayanlar hem de ileri düzey geliştiriciler için tasarlanmış ücretsiz bir veri görselleştirme platformudur. Hem ön işleme bileşenleri hem de soyut modeller ve görüntü sınıfları oluşturarak benzersiz işlemeler oluşturmanıza olanak tanır.
Am Charts, web siteleriniz veya web tabanlı ürünleriniz için bir Flash çizelgeleri koleksiyonudur. Am Charts, basit CSV veya XML dosyalarından bilgi çıkarmanıza izin verir veya dinamik verileri okuyabilir ve PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion ve diğer birçok programlama dilini kullanarak dönüştürebilir.
Deensoft, göz alıcı diyagramlar oluşturmak için Prototip ve Kanvas kullanan yeni bir ücretsiz kitaplıktır. Flot, Flotr ve PlotKit bu kitaplık için güçlü bir motivasyon kaynağı oldu. Kütüphanenin amacı maksimum tasarım özgürlüğü ve kullanım kolaylığıdır.
Ejschart'ı tasarlamak gerçekten çok kolay. Emprise javascript Charts, ihtiyacınız olan verileri çeşitli biçimlerde hızla yayınlamak için ihtiyacınız olan tüm araçları sağlar. Emprise javascript Charts, geniş yetenekleri ve basit kullanım sistemi nedeniyle kesinlikle favori aracınız olacak.
Ezcomponents, farklı varyasyonlarda diyagramlar oluşturmanıza olanak tanır. Dışa aktarma motoru, hem 2D hem de 3D sürümlerin yanı sıra diyagramlardan çeşitli biçimlerde görüntüler oluşturmanıza olanak tanır.
Filamentgroup, HTML tablolarından veri çıkarmak ve HTML 5'te bir tuval öğesi kullanarak grafikler oluşturmak için javascript kullanır. Araç artık yeni bir jQuery eklentisi olarak paketlenmiş üçüncü taraf koduna sahiptir.
Flot, jQuery'de kusursuz çizim için bir javascript kütüphanesidir. Bu araç ile grafik çizimleri üretebilirsiniz. Vurgu, kullanım kolaylığı (birçok seçeneği kullanabilirsiniz), çekici tasarım ve diğer kullanışlı özellikler üzerindedir.
Genel olarak Fly Charts, verileri görselleştirme yeteneği sağlayan bir SWF dosyaları koleksiyonudur. Fly Charts ile tam anlamıyla bir dakikada kompakt, etkileşimli ve göz alıcı grafikler oluşturabilirsiniz. Araç herhangi bir kurulum işlemi gerektirmez ve herhangi bir betik dili ile çalışabilir.
Fusion Charts, dinamik web uygulamalarında, statik web sitelerinde kolayca kullanılabilir ve AJAX uygulamaları oluşturmak için javascript ile birleştirilebilir. Demolar, Fusion Charts'ta ücretsiz olarak neler yapabileceğinizi size çok iyi gösterebilir.
Google Chart API, verilerden grafikler oluşturabileceğiniz ve bunları bir web sayfasına yerleştirebileceğiniz çok basit bir araçtır. Bilgileri entegre eder ve parametreleri HTTP istekleri aracılığıyla biçimlendirirsiniz ve Google, yanıt olarak size bir grafik PNG görüntüsü verir. Birçok farklı grafik biçimi desteklenir ve resim etiketleri için bir istek göndererek bir web sayfasına kolayca bir grafik ekleyebilirsiniz.
Stil Tablosu, web siteleriniz için dinamik grafikler oluşturmanıza olanak tanıyan yenilikçi bir teknolojidir. Bu kılavuz, Stil Tablosunun tüm olasılıkları hakkında sizi bilgilendirecektir.
Bluff, Ruby için Gruff grafik kitaplığının bir JavaScript bağlantı noktasıdır. Araç, Gruff'un tüm özelliklerini destekleyecek şekilde tasarlanmıştır, ancak minimum farklılıklar vardır.
JFreeChart, geliştiricilerin uygulamalarında profesyonel grafikler oluşturmasına olanak tanıyan eksiksiz bir Java grafik kitaplığıdır. Araç, değiştirilmesi veya iyileştirilmesi kolay esnek bir tasarıma sahiptir ve hem geliştiriciler hem de müşteriler için uygulamalara yöneliktir.
Çizgileri, eksenleri, gölgeleri ve hatta ağları hesaplamak ve çizmek, eklenti oluşturma aracılığıyla kontrol edilir. Yalnızca çizim öğelerini düzenleme yeteneği değil, eklenti işlevselliği tamamen genişletebilir.
JS Charts, ya küçük bir kod gerektiren ya da hiç bir şey gerektirmeyen bir javascript grafik üreticisidir! JS Charts, çeşitli şablonların (çubuk, pasta, vb.) grafiklerini kolayca oluşturmanıza olanak tanır.
Plotkit, grafikler ve çizelgeler çizmek için bir JS kütüphanesidir. Adobe SVG Viewer aracılığıyla HTML ve SVG desteği de vardır.
XML verilerinden çekici çizelgeler ve grafikler oluşturmak için harika bir yetenek. XML, esnek veri oluşturma yetenekleri sağlar ve Flash, mümkün olan en iyi çizelgeleri ve grafikleri sağlar.
18.
pChart, şık grafikler oluşturmak için tasarlanmış PHP sınıfına yönelik bir çerçevedir. Bilgiler SQL, CSV dosyalarından talep edilebilir veya manuel olarak girilebilir.
gRaphael aracının amacı, web siteniz için çekici diyagramlar oluşturmaktır. Araç, Raphael grafik kitaplığına dayanmaktadır. Hareket halindeki statik ve etkileşimli grafiklere derinlemesine bir bakış için demoya göz atın.
Visifire, Microsoft Silverlight ve WPF tarafından geliştirilen ücretsiz bir veri görselleştirme araçları koleksiyonudur. Visifire hem WPF hem de Silverlight uygulamaları ile kullanılabilir. Aynı API'yi kullanarak hem WPF hem de Silverlight ortamlarındaki grafikler sadece bir dakika içinde değiştirilebilir!
- Çizmeye başla!
Bazı kütüphaneler hala minimum programlama bilgisi gerektirmesine ve hatta bazıları oldukça karmaşık ve kafa karıştırıcı olmasına rağmen, hepsi görselleştirmeler, diyagramlar ve grafikler oluşturmak için en verimli süreci sağlamayı amaçlamaktadır. Aslında, kütüphane ne kadar kafa karıştırıcı olursa, belirli bir proje yaratma olasılığı o kadar fazla olur.
Harika bir kütüphaneden bahsetmeyi unuttuysak, lütfen yorumlarda bizim için yapın! Şimdiden teşekkürler!
İyi günler sevgili okuyucum, bugün size çeşitli türlerde çizelgeler ve grafikler oluşturmak için harika bir eklenti ve örnek koleksiyonu sunmak istiyorum. Bence herkes kendisi için ilginç bir şeyler bulacak.
1.jqPlot - Çizim için çok yönlü ve genişletilebilir bir jQuery Eklentisi
jqPlot - Javascript çizimi için JQuery Eklentisi.
jqPlot, birçok özelliğe sahip güzel çizgiler, çubuklar ve pasta grafikler üretir:
Çok sayıda grafik stili.
Özelleştirilebilir biçimlendirme ile eksen verileri.
9 Y eksenine kadar.
Eksen metnini döndürün.
Trend çizgisinin otomatik hesaplanması.
Pop-up ipuçları.
Kullanım kolaylığı.
2. Dygraphs görselleştirme kütüphanesi
Dygraphs, etkileşimli, ölçeklenebilir zaman serisi grafikleri oluşturan açık kaynaklı bir kitaplıktır. Yoğun veri kümelerini görüntülemek için tasarlanmıştır ve kullanıcıların bunları keşfetmesine ve yorumlamasına olanak tanır.
özellikler:
Harici sunucular veya flash animasyon olmadan zaman serisi ekranı
Internet Explorer'da çalışır (excanvas ile)
Küçük boyut (69kb)
Üzerine gelindiğinde değerleri görüntüler
Etkileşimli ölçekleme
Ayarlanabilir ortalama periyodu
Google Görselleştirme API'si ile uyumlu
http://dygraphs.com/
3. Highcharts - Web siteniz için etkileşimli JavaScript çizelgeleri
Highcharts, web siteniz veya web uygulamanız için etkileşimli grafikler sunan saf bir JavaScript grafik kitaplığıdır. Highcharts şu anda çizgileri, eğri çizgileri, alanları, alan çizgisini, sütunları, çubuğu, pastayı, dağılım, açı ölçerleri, alan aralığını, alanları çizgi aralığını, sütun aralığını ve kutup grafiği türlerini desteklemektedir.
4. fare tekerleği kaydırma efektli jQuery
PNG veya JPG sprite kullanmaz.
Sensör, fare tekerleği ve klavye olaylarını yönetir.
http://anthonyterrien.com/knob/
5. Şık CSS3 göstergeleri
CSS3 kullanan şık, hareketli göstergeler.
http://www.red-team-design.com
6. JQuery ile Yüksek Grafikler
Highcharts, jQuery ve Mootools uyumlu bir grafik kitaplığıdır. Tüm standart web tarayıcılarıyla uyumludur ve bir grafik oluşturmak için JSON verilerini kullanır. Çeşitli grafik çizgileri, eğri çizgiler, alan, alan çizgileri, sütunlar, çubuk, pasta ve dağılım grafiğini destekler.
Highcharts.com
7. HTML5 ve JQuery'de animasyonlu grafik
En son HTML5 teknolojilerini kullanan güzel, etkileşimli bir pasta grafik. Flash kullanmaz.
8. Deneysel CSS3 Grafiği
Bu yöntem, JavaScript ve resimler olmadan deneysel CSS3 çizelgeleri oluşturmaya bir örnektir. CSS3 seçicilerinin kullanımı gerçekten etkileyici: kullanımda dönüşümler, gradyanlar ve geçişler. Maalesef IE'de desteklenmiyor.
9. JQuery ve HTML5'te başka bir diyagram
Visualize eklentisi, yapılandırılmış bir HTML tablosundaki temel içerik öğelerini ayrıştırır ve bunları bir çizelge veya grafiğe dönüştürmek için HTML5 kullanır. Örneğin, bir veri sayfasında satırlar bir çubuk, çizgi veya kama grafiği işlevi görebilir. Visualize ayrıca tablodaki maksimum ve minimum değerleri otomatik olarak kontrol eder ve bunları çizgi ve histogram için x ekseni değerlerini hesaplamak için kullanır. Son olarak, eklenti, olduğu gibi kullanılabilen veya çizelgeleri ve grafikleri özelleştirmek için bir başlangıç noktası olarak hizmet edebilen açık ve koyu olmak üzere iki farklı CSS stili içerir.
- Tercüme
Çizelgeler ve grafikler olmadan bir pano hayal etmek neredeyse imkansızdır. Karmaşık istatistikleri hızlı ve verimli bir şekilde görüntülerler. Dahası, iyi bir diyagram sitenizin genel tasarımını da iyileştirir.
Bu makalede, size grafikler / diyagramlar (ve pivot tablolar) oluşturmak için en iyi JavaScript kitaplıklarından bazılarını göstereceğim. Bu kitaplıklar, gelecekteki projeleriniz için güzel ve özelleştirilebilir grafikler oluşturmanıza yardımcı olacaktır.
Kitaplıkların çoğu ücretsiz ve yeniden dağıtılabilir olsa da, bazılarının ek işlevlere sahip ücretli sürümleri vardır.
D3.js - veri odaklı belgeler
Günümüzde grafikler denilince ilk akla gelen D3.js Açık kaynak kodlu bir proje olan D3.js, şüphesiz mevcut kütüphanelerin çoğunda eksik olan birçok kullanışlı özelliği sunuyor. "Gir ve Çık", güçlü geçişler ve jQuery veya Prototype'a benzer sözdizimi gibi özellikler, onu grafikler ve çizelgeler oluşturmak için en iyi JavaScript kitaplıklarından biri yapar. D3.js'de HTML, SVG ve CSS kullanılarak oluşturulurlar.Diğer birçok JavaScript kitaplığının aksine, D3.js kutudan çıkar çıkmaz önceden oluşturulmuş grafiklerle gelmez. Ancak genel bir fikir edinmek için D3.js'de oluşturulan grafik listesine göz atabilirsiniz.
D3.js, IE8 gibi eski tarayıcılarda beklendiği gibi çalışmıyor. Ancak, tarayıcılar arası uyumluluk için her zaman aight eklentisi gibi eklentileri kullanabilirsiniz.
D3.js, NYTimes, Uber ve Weather.com gibi web sitelerinde yaygın olarak kullanılmıştır.
Google çizelgeleri
Google Charts, grafikleri basit ve kolay hale getirmek için düzenli olarak kullandığım bir JavaScript kitaplığıdır. Birleşik çubuk grafikler, çubuk grafikler, takvim grafikleri, pasta grafikler, coğrafi grafikler ve daha fazlası gibi önceden oluşturulmuş birçok grafik sağlar.
Google çizelgeleri, grafiğinizin görünümünü değiştirmenize yardımcı olacak birçok yapılandırma ayarına da sahiptir. Grafikler, iPhone, iPad ve Android'de tarayıcılar arası uyumluluk ve platformlar arası taşınabilirlik sağlamak için HTML5 / SVG madenciliği kullanılarak oluşturulur. Ayrıca eski IE sürümlerini desteklemek için VML içerir.
Yüksek Grafikler JS
Highcharts JS başka bir çok popüler grafik kütüphanesidir. Sitenize çok fazla dikkat çekebilecek çeşitli türlerde çok sayıda animasyonla birlikte gelir. Diğer kütüphaneler gibi, HighchartsJS de önceden oluşturulmuş birçok grafik içerir: spline, şekil, kombinasyon, çubuk, çubuk, pasta, dağılım, vb.
HighchartsJS kullanmanın en büyük faydalarından biri, Internet Explorer 6 gibi eski tarayıcılarla uyumluluktur. Standart tarayıcılar, çizelgeleri oluşturmak için SVG kullanır. Eski IE'de grafikler VML aracılığıyla işlenir.
HighchartsJS kişisel kullanım için ücretsiz olsa da, ticari kullanım için bir lisans satın almanız gerekir.
Füzyon çizelgeleri
Fusioncharts, en eski JavaScript kitaplıklarından biridir ve ilk olarak 2002'de yayımlanmıştır. Grafikler, daha iyi taşınabilirlik ve uyumluluk için HTML5/SVG ve VML kullanılarak oluşturulur.
Birçok kitaplığın aksine Fusioncharts, hem JSON verilerini hem de XML'i ayrıştırma yeteneği sağlar. Bu grafikleri ayrıca 3 farklı biçimde dışa aktarabilirsiniz: PNG, JPG ve PDF.
Fusioncharts, IE6 gibi eski tarayıcılarla uyumludur. Ve bu nedenle birçok ticari kuruluşta en çok tercih edilen kütüphanelerden biri haline gelmiştir.
Fusioncharts'ın filigranlı sürümünü hem kişisel hem de ticari projeler için ücretsiz olarak kullanabilirsiniz. Ancak, filigrandan kurtulmak için bir lisans satın almanız gerekir.
flot
Flot, jQuery için grafikler / çizelgeler oluşturmanıza izin veren bir JavaScript kitaplığıdır. En eski ve en popüler grafik kitaplıklarından biri.
Flot, çubuk, dağılım, çubuk, çubuk ve bu tür grafiklerin herhangi bir kombinasyonunu destekler. IE 6 ve Firefox 2 gibi eski tarayıcılarla da uyumludur.
Flot tamamen ücretsizdir, geliştiriciye özel istek üzerine ticari destek sağlanır. Flot ile oluşturulmuş grafikler içeren örneklerin bir listesi burada.
amCharts
amCharts şüphesiz en güzel grafik kitaplıklarından biridir. Tamamen 3 bağımsız türe ayrılmıştır: JavaScript Charts, Maps Charts (amMaps) ve Stock chart.
AmMaps, yukarıdaki üçünden favorim. Isı haritaları, çizgi çizme, haritaya metin ekleme, haritanızın üstüne simgeler veya fotoğraflar yükleme, yakınlaştırma ve daha fazlası gibi özellikler sağlar.
amCharts, yalnızca modern tarayıcılarda çalışan grafikler oluşturmak için SVG kullanır. Grafikler, sürüm 9'un altındaki IE'de doğru görüntülenmeyebilir.
EJS Şeması ücretsiz ve ücretli sürümlerde mevcuttur. Ücretsiz sürüm, sayfa başına 1'den fazla grafik ve grafik başına ikiden fazla (sayı) dizi kullanmanızı engelleyen bir sınırlamaya sahiptir. Fiyatlandırma ayrıntılarını inceleyin.
uvGrafikler
uvCharts, 100'den fazla yapılandırma seçeneğine sahip açık kaynaklı bir JavaScript kitaplığıdır. Kutudan çıktığı gibi 12 farklı standart çizelgesi var.
UvCharts, D3.js kitaplığı üzerine kurulmuştur. Bu proje, D3.js kodlamasının tüm karmaşık nüanslarını ortadan kaldırmayı ve standart çizelgelerin kolay bir şekilde uygulanmasını sağlamayı vaat ediyor. uvCharts, SVG, HTML ve CSS kullanılarak oluşturulur.
Çözüm
Artık gelecekteki projeleriniz için en iyi diyagram kitaplığının seçimi tamamen size kalmış. Grafikleri üzerinde tam kontrol arayan geliştiriciler kesinlikle D3.js'yi seçecektir. Yukarıdaki kitaplıkların neredeyse tamamı Stackoverflow forumlarında iyi bir desteğe sahiptir.Umarım bu makaleyi beğenmişsinizdir. İyi günler.
- Tercüme
Çizelgeler ve grafikler olmadan bir pano hayal etmek neredeyse imkansızdır. Karmaşık istatistikleri hızlı ve verimli bir şekilde görüntülerler. Dahası, iyi bir diyagram sitenizin genel tasarımını da iyileştirir.
Bu makalede, size grafikler / diyagramlar (ve pivot tablolar) oluşturmak için en iyi JavaScript kitaplıklarından bazılarını göstereceğim. Bu kitaplıklar, gelecekteki projeleriniz için güzel ve özelleştirilebilir grafikler oluşturmanıza yardımcı olacaktır.
Kitaplıkların çoğu ücretsiz ve yeniden dağıtılabilir olsa da, bazılarının ek işlevlere sahip ücretli sürümleri vardır.
D3.js - veri odaklı belgeler
Günümüzde grafikler denilince ilk akla gelen D3.js Açık kaynak kodlu bir proje olan D3.js, şüphesiz mevcut kütüphanelerin çoğunda eksik olan birçok kullanışlı özelliği sunuyor. "Gir ve Çık", güçlü geçişler ve jQuery veya Prototype'a benzer sözdizimi gibi özellikler, onu grafikler ve çizelgeler oluşturmak için en iyi JavaScript kitaplıklarından biri yapar. D3.js'de HTML, SVG ve CSS kullanılarak oluşturulurlar.Diğer birçok JavaScript kitaplığının aksine, D3.js kutudan çıkar çıkmaz önceden oluşturulmuş grafiklerle gelmez. Ancak genel bir fikir edinmek için D3.js'de oluşturulan grafik listesine göz atabilirsiniz.
D3.js, IE8 gibi eski tarayıcılarda beklendiği gibi çalışmıyor. Ancak, tarayıcılar arası uyumluluk için her zaman aight eklentisi gibi eklentileri kullanabilirsiniz.
D3.js, NYTimes, Uber ve Weather.com gibi web sitelerinde yaygın olarak kullanılmıştır.
Google çizelgeleri
Google Charts, grafikleri basit ve kolay hale getirmek için düzenli olarak kullandığım bir JavaScript kitaplığıdır. Birleşik çubuk grafikler, çubuk grafikler, takvim grafikleri, pasta grafikler, coğrafi grafikler ve daha fazlası gibi önceden oluşturulmuş birçok grafik sağlar.
Google çizelgeleri, grafiğinizin görünümünü değiştirmenize yardımcı olacak birçok yapılandırma ayarına da sahiptir. Grafikler, iPhone, iPad ve Android'de tarayıcılar arası uyumluluk ve platformlar arası taşınabilirlik sağlamak için HTML5 / SVG madenciliği kullanılarak oluşturulur. Ayrıca eski IE sürümlerini desteklemek için VML içerir.
Yüksek Grafikler JS
Highcharts JS başka bir çok popüler grafik kütüphanesidir. Sitenize çok fazla dikkat çekebilecek çeşitli türlerde çok sayıda animasyonla birlikte gelir. Diğer kütüphaneler gibi, HighchartsJS de önceden oluşturulmuş birçok grafik içerir: spline, şekil, kombinasyon, çubuk, çubuk, pasta, dağılım, vb.
HighchartsJS kullanmanın en büyük faydalarından biri, Internet Explorer 6 gibi eski tarayıcılarla uyumluluktur. Standart tarayıcılar, çizelgeleri oluşturmak için SVG kullanır. Eski IE'de grafikler VML aracılığıyla işlenir.
HighchartsJS kişisel kullanım için ücretsiz olsa da, ticari kullanım için bir lisans satın almanız gerekir.
Füzyon çizelgeleri
Fusioncharts, en eski JavaScript kitaplıklarından biridir ve ilk olarak 2002'de yayımlanmıştır. Grafikler, daha iyi taşınabilirlik ve uyumluluk için HTML5/SVG ve VML kullanılarak oluşturulur.
Birçok kitaplığın aksine Fusioncharts, hem JSON verilerini hem de XML'i ayrıştırma yeteneği sağlar. Bu grafikleri ayrıca 3 farklı biçimde dışa aktarabilirsiniz: PNG, JPG ve PDF.
Fusioncharts, IE6 gibi eski tarayıcılarla uyumludur. Ve bu nedenle birçok ticari kuruluşta en çok tercih edilen kütüphanelerden biri haline gelmiştir.
Fusioncharts'ın filigranlı sürümünü hem kişisel hem de ticari projeler için ücretsiz olarak kullanabilirsiniz. Ancak, filigrandan kurtulmak için bir lisans satın almanız gerekir.
flot
Flot, jQuery için grafikler / çizelgeler oluşturmanıza izin veren bir JavaScript kitaplığıdır. En eski ve en popüler grafik kitaplıklarından biri.
Flot, çubuk, dağılım, çubuk, çubuk ve bu tür grafiklerin herhangi bir kombinasyonunu destekler. IE 6 ve Firefox 2 gibi eski tarayıcılarla da uyumludur.
Flot tamamen ücretsizdir, geliştiriciye özel istek üzerine ticari destek sağlanır. Flot ile oluşturulmuş grafikler içeren örneklerin bir listesi burada.
amCharts
amCharts şüphesiz en güzel grafik kitaplıklarından biridir. Tamamen 3 bağımsız türe ayrılmıştır: JavaScript Charts, Maps Charts (amMaps) ve Stock chart.
AmMaps, yukarıdaki üçünden favorim. Isı haritaları, çizgi çizme, haritaya metin ekleme, haritanızın üstüne simgeler veya fotoğraflar yükleme, yakınlaştırma ve daha fazlası gibi özellikler sağlar.
amCharts, yalnızca modern tarayıcılarda çalışan grafikler oluşturmak için SVG kullanır. Grafikler, sürüm 9'un altındaki IE'de doğru görüntülenmeyebilir.
EJS Şeması ücretsiz ve ücretli sürümlerde mevcuttur. Ücretsiz sürüm, sayfa başına 1'den fazla grafik ve grafik başına ikiden fazla (sayı) dizi kullanmanızı engelleyen bir sınırlamaya sahiptir. Fiyatlandırma ayrıntılarını inceleyin.
uvGrafikler
uvCharts, 100'den fazla yapılandırma seçeneğine sahip açık kaynaklı bir JavaScript kitaplığıdır. Kutudan çıktığı gibi 12 farklı standart çizelgesi var.
UvCharts, D3.js kitaplığı üzerine kurulmuştur. Bu proje, D3.js kodlamasının tüm karmaşık nüanslarını ortadan kaldırmayı ve standart çizelgelerin kolay bir şekilde uygulanmasını sağlamayı vaat ediyor. uvCharts, SVG, HTML ve CSS kullanılarak oluşturulur.
Çözüm
Artık gelecekteki projeleriniz için en iyi diyagram kitaplığının seçimi tamamen size kalmış. Grafikleri üzerinde tam kontrol arayan geliştiriciler kesinlikle D3.js'yi seçecektir. Yukarıdaki kitaplıkların neredeyse tamamı Stackoverflow forumlarında iyi bir desteğe sahiptir.Umarım bu makaleyi beğenmişsinizdir. İyi günler.
Etiketler: Etiket Ekle
Siteniz veri yoğunsa ve bu verileri genellikle bir JavaScript grafik kitaplığı kullanarak kolayca görselleştirmeniz gerekiyorsa. Ancak, bu türden birkaç düzine kitaplık vardır ve hepsinin biraz farklı yetenekleri vardır.
Bu yazıda, 10 şık ancak kullanımı kolay örnekle AnyChart'ı inceleyeceğiz. AnyChart, veri görselleştirme ihtiyaçlarınız ve hemen hemen her formattaki verileri kolayca işlemesi için mükemmeldir.
Neden Herhangi Bir Grafik
AnyChart ticari bir kütüphanedir ve ticari olmayan herhangi bir kullanım için ücretsizdir. Kendini çok iyi kanıtlamış ve 10 yılı aşkın süredir piyasada. Başlangıçta Flash tabanlı AnyChart kullanıldı, ancak daha sonra SVG / VML oluşturma ile saf JavaScript'e geçti.
AnyChart API çok esnektir ve çalışma zamanında anında grafiğin hemen hemen her yönünü değiştirmenize olanak tanır.
AnyChart - Ürün Ailesi
- Herhangi Bir Grafik- tüm temel türlerin etkileşimli çizelgelerini oluşturmak için tasarlanmıştır
- AnyStock- büyük veri kümelerini tarih / saate göre görselleştirmek için tasarlanmıştır
- AnyMap- coğrafya ve yer haritaları için
- AnyGantt- proje ve kaynak yönetimi çözümleri için (Gantt, kaynak, PERT diyagramları)
Ancak, bu kitaplıklar büyük bir JavaScript (HTML5) diyagram kitaplığı olarak düşünülebilir. Hepsi aynı API'ye sahiptir, tüm diyagramlar neredeyse aynı şekilde yapılandırılmıştır, ortak temaları, ayarları ve veri yükleme yöntemleri vardır.
AnyChart ile hızlı başlatma
AnyChart'ı HTML sayfanızda kullanmaya başlamak için yalnızca üç basit şey yapmanız gerekir. İlk ikisi, JavaScript kitaplık dosyasına bağlanmayı ve blok düzeyinde bir HTML öğesi sağlamayı içerir.
İşte kullanabileceğiniz örnek bir HTML şablonu:
Üçüncüsü, basit bir etkileşimli tek dizi sütun grafiği oluşturan JavaScript kodunu eklemektir:
Anychart.onDocumentLoad (işlev () (// grafik oluştur ve verileri ayarla var chart = anychart.column ([["Kış", 2], ["Bahar", 7], ["Yaz", 6], ["Sonbahar" ", 10]]); // grafik başlığını ayarla chart.title (" AnyChart Temel Örneği "); // grafik kapsayıcısını ayarla ve chart çizelgeyi çiz. kapsayıcı (" kapsayıcı "). Draw ();));
Ve hepsi bu! İşte elimizdekiler.
Kolay değil mi? Ancak AnyChart'ta iş veri ayarlamaya geldiğinde her şey daha kolay ve daha esnek hale gelir. Buna daha yakından bakmak için bir sonraki bölüme geçelim.
AnyChart'ta veri alma
AnyChart'ın yaptığı özelliklerden biri, çok çeşitli formatlardaki verilerle çalışabilmesidir. Hangisini seçeceğiniz nihai olarak elinizdeki göreve (ve bir dereceye kadar kişisel tercihinize) bağlı olacaktır, ancak AnyChart'ın esnek yaklaşımı onu neredeyse her proje için çok uygun hale getirir.
Bir diziden gelen veriler
Aslında, yukarıdaki "AnyChart ile Hızlı Başlangıç" bölümünde ilk yöntemi zaten gördünüz. Bu yöntemi kullanarak, verilerinizi bir dizi dizi olarak bildirirsiniz ve gerisini AnyChart halleder. Bu yöntem özlüdür ve biçimlendirmesi ve kullanması kolaydır.
Anychart.onDocumentLoad (işlev () (// grafik oluşturun ve verileri Diziler Dizisi olarak ayarlayın // var chart = anychart.pie ([["Peter", 5], ["John", 7], ["James", 9], ["Jacob", 12]]); chart.title ("AnyChart: Diziler Dizisi"); chart.container ("kapsayıcı"). Draw ();));
Nesne dizisi
İkinci yöntem, birinciye çok benzer - verileri bir dizi nesne olarak ayarlamak. Aslında, daha az kompakt ama yine de biçimlendirmesi, okuması ve anlaması çok kolay. Ek olarak, bu biçim, verilerinizden başka şekillerde de işlenebilen, ancak yalnızca ek eşlemelerle tek tek noktaları özelleştirmenize olanak tanır.
Not: Böyle bir durumda nesnelerde veri kullandığınızda, argüman ve değer alanları için uygun adları kullanın. Bununla ilgili her grafik türü için AnyChart belgelerinde bulabilirsiniz. Çoğu durumda, argüman x'tir ve değer genellikle değer alanına yerleştirilir.
Anychart.onDocumentLoad (işlev (// grafik oluştur ve verileri ayarla // Nesne Dizisi olarak // en büyük nokta ayrı ayrı yapılandırılmış işaretçiyle işaretlenir var chart = anychart.line ([(x: "Kış", değer: 5) ), (x: "Bahar", değer: 9, işaretleyici: (etkin: doğru, yazın: "yıldız5", dolgu: "Altın")), (x: "Yaz", değer: 7), (x: " Fall ", değer: 1)]); chart.title (" AnyChart: Nesnelerin Dizisi "); chart.container (" kapsayıcı "). Draw ();));
Birden Çok Seri Tablosu Oluşturun
Çok serili grafikler, birden çok veri kümesinin en yüksek ve en düşük değerlerini görüntülemenize ve bunları karşılaştırmanıza olanak tanıyan grafiklerdir. AnyChart ile birden çok seri grafiği oluştururken, daha önce tanıtılan yöntemleri kullanabilir, ancak ek olarak seri adlarınızı belirtebilirsiniz. Gerisini AnyChart motoru halleder.
Anychart.onDocumentLoad (işlev () (// grafik oluşturun ve verileri Diziler Dizisi olarak ayarlayın // var chart = anychart.line () chart.data ((başlık: ["#", "Euro (€)", "USD) ($) "," Pound (£) "], satırlar: [[" Kış ", 5, 7, 4], [" İlkbahar ", 7, 9, 6], [" Yaz ", 9, 12, 8 ], ["Sonbahar", 12, 15, 9]])); chart.title ("AnyChart: Çok Seri Dizi Dizisi"); chart.legend (true); chart.container ("kapsayıcı"). Draw ();));
Birden Çok Satır: Nesne Dizisi
Şimdi bir dizi nesne kullanarak nasıl çoklu seri grafiği oluşturabileceğinizi görelim.
Not... Bu tür nesneleri kullanırken, değerler için herhangi bir alan adı kullanabilirsiniz.
Bunu şu şekilde yapabilirsiniz:
Anychart.onDocumentLoad (işlev () (// grafik oluştur ve verileri // Nesne Dizisi olarak ayarla var chart = anychart.column (); chart.data ((başlık: ["#", "Euro (€)", " USD ($) "," Pound (£) "], satırlar: [(x:" Kış ", usd: 5, eur: 4, pound: 3), (x:" Bahar ", usd: 3, eur: 3, pound: 3), (x: "Yaz", usd: 2, eur: 5, sterlin: 3), (x: "Güz", usd: 4, eur: 2, pound: 3)])); chart.title ("Array of Objects"); chart.legend (true); chart.container ("konteyner").draw ();));
Bir HTML tablosundan veri görüntüleme
AnyChart'a veri yüklemenin başka bir yolu, sayfada zaten var olan bir tablo kullanmaktır. Bu, başka bir sıkıcı sayı listesinin kilit noktalarını görselleştirmenin son derece etkili bir yolu olabilir. Bunu yapmak için, diyagram kitaplığıyla birlikte veri bağdaştırıcı komut dosyasını eklemeniz gerekir.
Ardından iki seçenek vardır, etiketi ile oluşturulan tablolardan veri alabilirsiniz.