JavaScript Grafik Kütüphanesi


223

Herkes, özellikle flaş kullanmayan belirli bir JavaScript grafik kitaplığı önerir mi?

Yanıtlar:


160

Saf JavaScript grafikleri için Flash gerektirmeyen artan sayıda Açık Kaynak ve ticari çözüm bulunmaktadır. Bu yanıtta yalnızca Açık Kaynak seçeneklerini sunacağım.

Flash gerektirmeyen grafikler için 2 ana JavaScript çözümü sınıfı vardır:

  • Tuval tabanlı, IE'de render edilen ve sırayla VML'ye dayanan ExplorerCanvas kullanılarak oluşturuldu
  • IE'de VML olarak oluşturulan standart tabanlı tarayıcılarda SVG

Her iki yaklaşımın artıları ve eksileri vardır, ancak bir grafik kütüphanesi için daha sonra tavsiye ederim çünkü DOM ile iyi entegre edilmiştir, grafik öğelerini DOM ile değiştirmeye izin verir ve en önemlisi DOM olaylarını ayarlar. Buna karşılık Canvas grafik kitaplıkları, etkinlikleri yönetmek için DOM tekerleğini yeniden icat etmelidir. Dolayısıyla, olay işleme olmadan statik grafikler oluşturmak istemiyorsanız, SVG / VML çözümleri daha iyi olmalıdır.

SVG / VML çözümleri için aşağıdakiler dahil birçok seçenek vardır:

Raphael , IE 6 ila 8, Firefox, Opera, Safari, Chrome ve Konqueror gibi çok iyi çapraz tarayıcı desteğine sahip çok aktif, bakımlı ve olgun, açık kaynaklı bir grafik kütüphanesidir. Raphael herhangi bir JavaScript çerçevesine bağlı değildir ve bu nedenle Prototip, jQuery, Dojo, Mootools, vb.

Raphael'i temel alan (ancak bunlarla sınırlı olmayan) bir dizi grafik kütüphanesi vardır:

  • Raphael grafik kütüphanesinin bir uzantısı olan gRaphael
  • Ico , karmaşık grafikler oluşturmak için tek bir işlev çağrısına dayalı sezgisel bir API ile

Açıklama: Github'daki Ico çatallarından birinin geliştiricisiyim .


5
Grafico ve Ico, Alex Young'ın ilk Ico'su ile uyumsuz iki çatal. Bu yüzden Ico'nun Grafico olduğunu söylemek doğru değildir. Grafico çatallardan sadece biri.
Jean Vincent

Raphael'in artık korunmadığı görülüyor. Son taahhüt Temmuz 2010 ya da öyleydi.
Alastair Pitts

1
Sadece indirilmiş raphael çizelgeleri, çok sevdim ama dokümanlar yok, sadece önsöz.
Yörünge

@Alastair: Raphael artık Sencha tarafından destekleniyor ve geliştiriliyor ... ya da diyorlar :)
Roy Tinker

1
SVG, Petek öncesi Android'de desteklenmez. Grafikleri çok çeşitli mevcut Android cihazlarda görüntüleyebilmek için bir gereklilikse, Kanvas tabanlı bir çözüm seçmeniz gerekir. Sencha Touch Charts ile ilgili bu makale genel olarak mobil grafiklerle ve Sencha Touch'ın Tuval rotasına neden gittiği hakkında daha ayrıntılı bilgi veriyor.
Pallavi Anderson

70

JQuery kullanıyorsanız flot'u çok iyi buldum - ihtiyaçlarınıza uygun olup olmadıklarını görmek için örnekleri deneyin , ancak mevcut projem için ihtiyaç duyduğum şeylerin çoğunu yaptıklarını gördüm.

Ek olarak ExtJS 4.0 , çok güçlü ve canlı verilerle çalışacak şekilde tasarlanmış harika bir grafik seti sundu.


2
Bu, Geoff Dalgas'ın StackOverflow'da itibar grafiğini oluşturmak için kullandığı kütüphaneyle aynıdır. Gerçekten güzel bir kit.
Charles Roper

Flot ile ilgili tek gerçek şikayetim, IE'de oluştururken% 100 dışındaki herhangi bir zoom seviyesinde korkunç görünüyor (yani tüm çizgiler / bloklar birlikte ölçeklenmiyor - bu kesinlikle yüksek çözünürlüklü ekranlara sahip olanlar için bir sorun).
Bittercoder

2
Flot çizelgeleri, baktığım diğerlerinin çoğundan daha güzel görünüyor. İşte 20 JavaScript grafik kütüphanesine bir link: javascript.open-libraries.com/utilities/chart/…
B Seven

Flot'u da seviyorum, bunu daha önce farklı web uygulamalarında birçok kez kullandım.
fedmich

1
Genel olarak flot'u seviyorum ama tüm verilerin sayı olmasını istiyor, bu yüzden müşteri başına (isme göre) veya ürün başına satış gibi bir şey çizmek istiyorsanız
Zachary K

60

Check out http://www.highcharts.com !

Highcharts, saf JavaScript ile yazılmış, web sitenize veya web uygulamanıza etkileşimli grafikler eklemenin kolay bir yolunu sunan bir grafik kütüphanesidir. Highcharts şu anda çizgi, spline, alan, alan çizgisi, sütun, çubuk, pasta ve dağılım grafik türlerini desteklemektedir.


12
Bu kütüphanenin ticari olmayan kullanım için ücretsiz olduğunu, ancak tek siteler ve çok siteler için paraya mal olduğunu belirtmek gerekir. Ancak oldukça makul bir fiyat gibi görünüyor.
Nick Spacek

İlk başta utanmaz bir fiş olarak ama gerçekten harika görünüyorlar! Ücretsiz fot ticari kullanım olsa da, fiyatlandırma makul ya da değil olsun referans yok ama bir bakışta Tamam görünüyorlar!
Trufa

Bu, CloudFlare.com'da kullanılan grafik çizelgesiyle aynıdır ve gerçekten harika görünüyor. Ben highcharts kitaplığı tökezlediğinde ASP.NET ve render ve görüntü sever DevExpress grafik kitaplığı kullanmak üzereydi. Bir an önce bunun yolun bu olduğuna ikna olmuştum. Gördüğüm en dikkat çekici gösterge tablolarından / analistlerden birine sahip olan CloudFlare'nin bunu da kullandığımı sattım! Şu anda bunu deniyorum ve web sayfama bir grafik yerleştirmek için ilk denemede çalıştı ... bu yüzden de kullanımı kolay görünüyor!
Loudenvier

1
Highcharts için bir oy daha. Şu anda kullanıyorum ve harika. JQuery, Mootools ve Prototype'i destekler ve kurulumu ve kullanımı çok kolaydır.
gnclmorais

1
Kendisini StackOverflow'daki Highcharts kullanan stackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott

36

Tam olarak aradığınız şey olmayabilir, ancak
Google'ın Grafik API'sı oldukça havalı ve kullanımı kolaydır.


16
javascript değil
user102008 16:10

5
unutmayın, Google Chart internet bağlantısı gerektirir ve ayrıca izin verilen müşteri isteklerinin sayısı üzerinde bazı sınırlamaları vardır
fedmich

@ user102008: şimdi :) (İsterseniz eski resme dayalı API'ya erişebilirsiniz )
Spycho

Google Chart API çevrimdışı kullanılamaz, mobil geliştirme için kötüdür.
oldwizard

Yatay tip bir Şamdan yapmam gerekiyor, kimse google grafik api ile mümkün olup olmadığını biliyor?
Tom Stickel

15

SVG'ye dayanan başka bir javascript kütüphanesi var. Buna Protovis adı verilir ve Stanford Görselleştirme Grubundan gelir

Ayrıca hoş etkileşimli grafikler ve görselleştirmeler yapmanıza olanak tanır.

http://vis.stanford.edu/protovis/ex/

Her ne kadar sadece modern web tarayıcıları için olsa da

GÜNCELLEME: Protovis ekibi d3.js (Veriye Dayalı Belgeler) adlı başka bir kütüphaneye dedikleri gibi taşındı:

"Protovis ekibi artık animasyon ve etkileşim için geliştirilmiş desteğe sahip yeni bir görselleştirme kütüphanesi olan D3.js'yi geliştiriyor. D3, Protovis'teki kavramların çoğunu temel alıyor"

Yeni kütüphane artık şu adreste bulunabilir:

http://mbostock.github.com/d3/

GÜNCELLEME 2:

"Rickshaw" interaktif zaman serisi grafikleri oluşturmak için bir JavaScript araç takımıdır. D3.js'ye dayanarak, d3.js ile çalışmayı çok daha basitleştirmesine rağmen, biraz daha az güçlüdür.

http://code.shutterstock.com/rickshaw/


Hızlıca baktığımda, D3'ün Protovis'in yerine geçtiğini düşünmüyorum. Ekibin "ilerlediğini" söyleyebilirim çünkü daha ilginç ve ileri bir fikir olarak görürler.
David J.

14

Son zamanlarda bir javascript grafik kitaplığı arıyordum ve nihayet benim gereksinimleri çok iyi uygun jqplot üzerinde yerleşmeden önce bir demet değerlendirdi . Jean Vincent'ın cevabından da anlaşılacağı gibi, gerçekten tuval tabanlı ve svg tabanlı çözüm arasında seçim yapıyorsunuz.

Bana göre büyük artılar ve eksiler aşağıdaki gibiydi. Yüksek dinamik / etkileşimli grafikler oluşturmak istiyorsanız Raphael (ve offshoots) gibi SVG tabanlı çözümler harikadır. Veya grafik gereksinimleriniz normların çok dışındaysa (örneğin, bir tür karma grafik oluşturmak istiyorsanız veya başka hiç kimsenin düşünmediği yeni bir görselleştirme buldunuz). Dezavantajı öğrenme eğrisi ve yazmanız gereken kod miktarıdır. Birkaç dakika içinde grafikleri vurmayacaksınız, gerçek öğrenme zamanına yatırım yapmaya ve daha sonra nispeten basit bir grafik oluşturmak için iyi miktarda kod yazmaya hazır olmayacaksınız.

Grafik gereksinimleriniz makul düzeyde standartsa, örneğin sınırlı etkileşim ile bazı çizgi veya çubuk grafikler veya belki bir pasta grafik istiyorsanız, o zaman tuval tabanlı çözümlere bakmaya değer. Herhangi bir öğrenme eğrisi neredeyse olmayacak, birkaç dakika içinde temel grafikleri elde edebileceksiniz, çok fazla kod yazmanız gerekmeyecek, birkaç satır temel javascript / jquery ihtiyacınız olacak. Tabii ki, sadece kütüphanenin desteklediği, genellikle çeşitli çizgi, bar, pasta lezzetleriyle sınırlı olan belirli grafik türlerini üretebileceksiniz. Etkileşim seçenekleri son derece sınırlı olacaktır, yani daha iyi olanlarla bazı sınırlı hover efektleri mümkün olsa da, oradaki kütüphanelerin çoğu için mevcut değildir.

Tuval tabanlı bir çözüm olan JQplot ile gittim çünkü sadece bazı standart grafik türlerine ihtiyacım vardı. Araştırmalarımdan ve çeşitli seçeneklerle oynamaktan, tam özellikli olduğunu gördüm (yalnızca standart grafiklerden sonraysanız) ve kullanımı son derece kolay, bu yüzden gereksinimleriniz benzerse bunu tavsiye ederim.

Özetlemek, basit ve şimdi grafikler istiyorum, sonra JQplot ile gidin. Karmaşık / farklı ve zaman için basılmamış sonra Raphael ve arkadaşları ile gitmek.


14

jqPlot harika. Gereksinimleriniz oldukça "normal" ise ve sadece bazı grafikler çizmek istiyorsanız, muhtemelen js grafik seçeneklerinin miktarından bunalmışsınızdır. Saatlerce araştırma yapmak istemediğinizi varsayarsak, muhtemelen en iyi bahsiniz olduğu için jqPlot ile devam edin. Çoğu insan için çoğu kullanım durumunu iyi kapsar. Alternatiflerin bazıları belirli bir grafik türü üzerinde uzmanlaşmıştır veya belirli bir kullanım durumu göz önünde bulundurularak oluşturulmuştur.


Biraz araştırma yaptıktan sonra da düşünüyorum. Şu anda mevcut en iyi ücretsiz JS grafik kütüphanelerinden birine benziyor.
jturcotte




3

Saf JavaScript grafikleri için gRaphaël'i ve bunun üzerine inşa edilen saf JavaScript vektör grafik kütüphanesini ( Raphaël ) tavsiye ederim .

gRaphaël şu anda Firefox 3.0+, Safari 3.0+, Opera 9.5+ ve Internet Explorer 6.0+ sürümlerini desteklemektedir.


1
çok güzel olmasına rağmen, bu lib için herhangi bir doküman olmadığını belirtmek istiyorum.
Yörünge


3

Başka bir RGraph: Javascript çizelgeleri ve grafik kütüphanesi:

http://www.rgraph.net

Tuval tabanlı, bu yüzden hızlı ve yaklaşık 20 farklı grafik türü var. Ticari olmayan kullanım için de ücretsiz!


2

En sevdiğim (flot) zaten bahsedildi.

Ancak Ortho'yu araştırdığınızdan emin olun . Ağaç grafikler ve zaman çizelgeleri için mükemmeldir.





2

Yeni başlangıcımız için TechOctave Charts Suite lisansı satın aldık . Onları tavsiye ederim. Lisanslama basittir. Grafikler harika görünüyor! Başlamak kolaydı ve ihtiyaç duyduğumuzda güçlü bir API'ya sahip. Kod ne kadar temiz ve genişletilebilir tarafından şok oldu. Bizim seçim ile gerçekten mutlu.



1

Bir Javascript kütüphanesi değil, ancak uygun bir alternatif olabilir - sorgulama verilerini web hizmetlerine ileterek grafikler oluşturabileceğiniz Google Grafiklerine göz atın.






0

ArcadiaCharts'ı tavsiye edebilirim . JavaScript ve GWT için yepyeni bir profesyonel grafik kütüphanesi. Eklenti olmadan tüm tarayıcılarda çalışır. Kolay ve hızlı kullanım: Sadece birkaç satır kodla mükemmel görünümlü grafikler oluşturur. Reklam amaçlı olmayan kullanımlar için bedava.


Bununla oynuyordum ve web sitesinde ticari lisans almanın bir yolu olmadığını fark ettim. Aslında, web sitesinin bunun ücretsiz olup olmadığı açık değildir.
zumalifeguard

Haklısın. Web sitesi güncellendi, böylece hangi ticari lisansın gereksinimlerinize uygun olduğunu kolayca öğrenebilirsiniz : ArcadiaCharts .
Hoang-Tran Vo


0

İhtiyacınız olan şey sadece çubuk grafik ise. Eski bir projede kullandığım bazı kodları yayınladım. Birisi bana VML uygulamasının IE'nin son sürümlerinde bozulduğunu, ancak SVG'nin iyi çalıştığını söyledi. Projeye geri dönebilir ve zaten sahip olduğum bazı sunucu tarafı oluşturucular ve belki de WebGL oluşturma katmanı yayınlayabilir. Bir bağlantı var: http://blog.conquex.com/?p=64


0

Muhtemelen OP'nin aradığı şey değil, ancak bu soru JS grafik kitaplığı seçeneklerinin bir listesi haline geldiğinden: jQuery Sparklines gerçekten harika.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.