Diyagram Oluşturma için Javascript Kütüphanesi?

Question

Hangi JavaScript kütüphanesi (ücretsiz veya ticari) bilgisayar ağ diyagramları veya elektrik şemaları oluşturabilir. Ayrıca, bu, şemalardaki farklı öğeler arasındaki animasyonları destekler.

Teşekkürler.

Answer 1

Kontrol dışarı bu üç kütüphane ve onlar size yardımcı olabilir görmek:

Raphael

Raphaël, web üzerinde vektör grafikleriyle çalışmanızı basitleştirecek küçük bir JavaScript kitaplığı . , kendi grafikinizi oluşturmak veya örneği için kırpma ve döndürme widget'ını oluşturmak isterseniz, bu kitaplıkla kolayca ve elde edebilirsiniz. Raphaël ['ræfeɪəl], SVG W3C Öneri ve VML'yi grafikler oluşturmak için bir temel olarak kullanır. Bu, oluşturduğunuz her grafik nesnesinin de bir DOM nesnesi olduğu anlamına gelir, böylece JavaScript olay işleyicilerini ekleyebilir veya daha sonra bunları olarak değiştirebilirsiniz. Raphaël’in hedefi ’un çizim sanatına uyumlu çapraz tarayıcısını ve kolaylığını sağlayacak bir adaptör sağlamaktır.

Protovis

Protovis böyle barlar ve noktalar gibi basit işaretleri verilerin özel görünümlerini oluşturur. hızla görselleştirme için sıkıcı hale düşük seviyeli grafik kütüphaneler aksine, Protovis miras izin kodlamak veriler, terazi ve düzenleri inşaat basitleştirmek için dinamik özellikleri aracılığıyla işaretleri tanımlar. Protokol, BSD Lisansı kapsamında sağlanan ücretsiz ve açık kaynak kodludur. Web-yerel görselleştirmeler için JavaScript ve SVG kullanır; eklentisi gerekli değildir (bununla birlikte modern bir web tarayıcısına ihtiyacınız olacaktır)! programlama deneyimine yardımcı olmakla birlikte, Protokolü çoğunlukla bildirimseldir ve örnek olarak öğrenilmesi için tasarlanmış .

Processingjs

Processing.js web için tasarlanmış popüler İşleme görsel programlama dilinin, kardeş projesi olduğunu. İşleme.js, verilerinizi görselleştirmeler, dijital sanat, etkileşimli animasyonlar, eğitim grafikler, video oyunları vb. web standartlarını ve eklentileri olmadan çalışır. İşleme dilini kullanarak kod yazıp, web sayfanıza 'u ekleyin ve Processing.js, geri kalanını yapacaktır. Bu sihir değil, neredeyse. Aslen Ben Fry ve Casey Reas tarafından geliştirilen

, İşleme elektronik sanatlar ve görsel tasarım toplulukları görsel bağlam içinde bilgisayar programlama temellerini öğrenmelerine yardımcı Java üzerinde dayalı bir açık kaynak programlama dili olarak başladı. Processing.js, 'u bir sonraki seviyeye taşır ve İşleme kodunun, Firefox, Safari, Chrome, Opera ve Internet Explorer'ın geçerli sürümleri dahil olmak üzere herhangi bir HTML5 uyumlu tarayıcı tarafından çalıştırılmasına izin verir. Processing.js, görsel programlamanın en iyi halini, işleme ve web geliştiricileri için hem hem de web'e taşır.

Answer 2

1. tarihinde çizelgeleri: http://code.google.com/intl/uk/apis/chart/
2. Dojo: http://dojotoolkit.org/grids-charts
3. ExtJS: http://www.sencha.com/products/extjs/examples/#sample-3

Answer 3

Çizim şemaları, draw.io için ücretsiz çevrimiçi uygulamayı deneyin. Çizim şemaları için mxGraph kütüphanesini kullanır.

Yasal Uyarı:

Ben JGraph ile ilişkili bir yazılım geliştiricisi değilim.

Answer 4

cevap Draw2D son ama en az .... kesinlikle JointJS

Answer 5

olduğunu.

Kolay bir şema oluşturma için bir JS lib dosyasıdır. API, bir Java/C# sözdizimi gibidir. Ünlü RaphaelJS lib'in üzerindeki soyutlama ve yönetim katmanı.

Kod Örnek:

 var canvas = new draw2d.Canvas("gfx_holder"); 

     // Create two standard nodes for "start" and "end" and link 
     // this figures with a standard Connector 
     // 
     var start = new draw2d.shape.node.Start(); 
     var end = new draw2d.shape.node.End(); 

     canvas.addFigure(start, 80,180); 
     canvas.addFigure(end, 450,250); 

     // Add a connection via API calls between Start and Stop 
     // 
     var connection = new draw2d.Connection(); 
     connection.setSource(start.getOutputPort(0)); 
     connection.setTarget(end.getInputPort(0)); 
     canvas.addFigure(connection);