1. Produkty
  2.   Diagram
  3.   JavaScript
  4.   mxGraph 

mxGraph 

 
 

Biblioteka diagramów JavaScript typu open source

Generuj interaktywne wykresy i aplikacje do tworzenia wykresów za pomocą bezpłatnej biblioteki diagramów JavaScript typu open source.

mxGraph to biblioteka do tworzenia diagramów JavaScript o otwartym kodzie źródłowym, która zapewnia funkcjonalność renderowania diagramów SVG i HTML. Do korzystania z biblioteki mxGraph nie jest wymagane żadne oprogramowanie innych firm. Inną dobrą rzeczą jest to, że nie wymaga wtyczek i może być zintegrowany z praktycznie każdym frameworkiem. mxGraph udostępnia funkcje przeznaczone do wyświetlania interaktywnych diagramów i wykresów. Interfejs API zapewnia wszystkie powszechnie wymagane funkcje do rysowania, interakcji i kojarzenia kontekstu z diagramem.

API wykorzystuje bardzo powszechną architekturę, wymaga serwera WWW posiadającego możliwość obsługi stron HTML oraz przeglądarki internetowej obsługującej JavaScript. Używa głównie jednego pliku JavaScript, który zawiera wszystkie funkcje biblioteki. Ten plik jest ładowany na stronę internetową HTML w sekcji JavaScript i wykonywany w kontenerze HTML w przeglądarce

Previous Next

Pierwsze kroki z mxGraph

Zalecany sposób instalacji mxGraph to npm, jest on dostępny za pośrednictwem menedżera pakietów npm. Aby użyć mxGraph jako zależności, użyj npm install.

Zainstaluj mxGraph przez npm

npm install mxgraph --save

Generuj wykresy za pomocą interfejsu API JavaScript

Biblioteka mxGraph o otwartym kodzie źródłowym zapewnia funkcjonalność tworzenia diagramów lub wykresów za pomocą JavaScript. Obsługuje również modyfikowanie złożonych wykresów poprzez tworzenie nowych edytorów wykresów lub ich dostosowywanie. Najpierw musisz stworzyć wykres wewnątrz danego kontenera, a następnie możesz łatwo dodać komórki do modelu, aby zbudować wykres. Możesz łatwo dodawać tytuły diagramów i umieszczać notatki na wielu uczestnikach. Biblioteka zapewnia również dodatkowe funkcje, takie jak efekty wizualne, sterowanie interfejsem użytkownika i inne.

Scalanie dwóch wykresów za pomocą JavaScript

mxGraph umożliwia programistom połączenie dwóch wykresów we własnych aplikacjach JavaScript. Przede wszystkim musisz stworzyć przykładowy wykres wewnątrz danego kontenera. Wszystkie komórki proszę zakreślić białą, pogrubioną etykietą. Teraz utwórz drugi model wykresu bez kontenera. Dodaj komórki do modelu docelowego w jednym kroku, używając niestandardowych identyfikatorów dla wierzchołków. Teraz możesz połączyć model z drugiego wykresu z modelem pierwszego wykresu.

Rysowanie siatki za pomocą JavaScriptu

Biblioteka mxGraph umożliwia programistom dynamiczne rysowanie siatki we własnych aplikacjach JavaScript. Możesz łatwo narysować siatkę dynamicznie za pomocą kanwy HTML 5. Najpierw utwórz wykres wewnątrz danego kontenera i utwórz dynamiczną siatkę, która wymaga kanwy. Aby zaakceptować kanwę jako kontener, musisz zmodyfikować filtrowanie zdarzeń. Teraz w razie potrzeby wyświetla tło i ustawia odległość linii siatki w pikselach. Teraz rysuje rzeczywistą siatkę.

 Polski