Biblioteka JavaScript do tworzenia diagramów?

Question

Która biblioteka JavaScript (bezpłatna lub komercyjna) może budować diagramy sieciowe lub diagramy elektryczne. Ponadto obsługuje animacje między różnymi elementami na diagramach itp.

Dzięki.

Answer 1

Sprawdź te trzy biblioteki i sprawdzić, czy mogą pomóc:

Raphael

Raphaël to mała biblioteka JavaScript , która powinna uprościć pracę z grafiką wektorową w Internecie. Jeśli chcesz chcesz utworzyć swój własny wykres lub kadrowanie i obracanie widgetu, na przykład , możesz to łatwo osiągnąć i łatwo uzyskać z tą biblioteką. Raphaël ['ræfeɪəl] używa rekomendacji SVG W3C i VML jako bazy do tworzenia grafiki w postaci . Oznacza to, że każdy utworzony obiekt graficzny jest także obiektem DOM , więc możesz dołączyć do niego obsługę zdarzeń JavaScript lub zmodyfikować je później. Celem Raphaëla jest uzyskanie adaptera, który sprawi, że będzie kompatybilny z grafiką wektorową i będzie łatwy w obsłudze.

Protovis

Protovis komponuje niestandardowe widoki danych z prostych znaków, takich jak bary i kropek. W przeciwieństwie do niskopoziomowych grafiki bibliotek, które szybko stają się nużące do wizualizacji, Protovis definiuje śladów przez dynamicznych właściwości, które kodują dane, pozwalające dziedziczenia, skale i układy upraszczających konstrukcję. Protovis jest bezpłatny i open-source, udostępniany na licencji BSD . Wykorzystuje JavaScript i SVG do wizualizacji sieciowych; nie jest wymagana żadna wtyczka (potrzebna jest jednak nowoczesna przeglądarka internetowa)! Chociaż pomocne jest programowanie , Protovis jest w większości deklaratywny i przeznaczony do nauki na przykładzie.

Processingjs

Processing.js jest projekt siostra wizualnego języka programowania popularny przetwarzanie, zaprojektowanym dla internecie. Przetwarzanie.js sprawia, że ​​twoje wizualizacje, grafika cyfrowa, interaktywne animacje, edukacyjne wykresy, gry wideo itp. działają przy użyciu standardów internetowych i bez żadnych wtyczek . Piszesz kod przy użyciu języka przetwarzania , dołącz go na swojej stronie internetowej pod adresem , a plik Processing.js zawiera . To nie magia, ale prawie.

pierwotnie opracowany przez Ben Fry i Casey Reas, tworzenie rozpoczął jako język programowania open source opartych na Java, aby pomóc Electronic Arts i wizualnym społeczności projektowania nauczyć podstawy programowania w kontekst wizualny. Procesing.js przenosi na następny poziom , umożliwiając przetwarzanie kodu przez dowolną zgodną przeglądarkę HTML5 , w tym wersje przeglądarki Firefox, Safari, Chrome, Firefox, Safari, Opera i Internet Explorer. Processing.js przenosi najlepsze funkcje programowania wizualnego do sieci, zarówno dla przetwarzających, jak i dla twórców stron internetowych.

Answer 2

1. Google Charts: 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

Wypróbuj bezpłatną aplikację online do rysowania schematów, draw.io. Używa biblioteki mxGraph do rysowania schematów.

Zastrzeżenie:

Jestem programistą związane z JGraph.

Answer 4

Odpowiedź jest absolutnie JointJS

Answer 5

.... ostatni, ale nie najmniej Draw2D.

to biblioteka JS do łatwego tworzenia diagramów. Interfejs API przypomina raczej składnię Java/C#. Warstwa abstrakcji i zarządzania nad słynną biblioteką RaphaelJS.

Przykład kodu:

 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);