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

mxGraph 

 
 

Open source JavaScript-diagrambibliotheek

Genereer interactieve grafiek- en diagramtoepassingen via de gratis open source JavaScript-diagrambibliotheek.

mxGraph is een open source JavaScript-diagrambibliotheek die functionaliteit biedt voor het renderen van SVG- en HTML-diagrammen. Er is geen software van derden vereist om de mxGraph-bibliotheek te gebruiken. Het andere goede is dat het geen plug-ins vereist en in vrijwel elk framework kan worden geïntegreerd. mxGraph biedt functies die bedoeld zijn om interactieve diagrammen en grafieken weer te geven. De API biedt alle algemeen vereiste functionaliteit om een diagram te tekenen, ermee te werken en een context te associëren met een diagram.

De API gebruikt een veel voorkomende architectuur, het vereist een webserver die HTML-pagina's kan verwerken en een webbrowser die JavaScript ondersteunt. Het gebruikt voornamelijk één JavaScript-bestand dat alle bibliotheekfunctionaliteit bevat. Dat bestand wordt in een HTML-webpagina in een JavaScript-sectie geladen en uitgevoerd in een HTML-container in de browser

Previous Next

Aan de slag met mxGraph

De aanbevolen manier om mxGraph te installeren is via npm, het is beschikbaar via de npm-pakketbeheerder. Gebruik npm install om mxGraph als afhankelijkheid te gebruiken.

Installeer mxGraph via npm

npm install mxgraph --save

Genereer grafieken via JavaScript API

De open source mxGraph-bibliotheek biedt functionaliteit voor het maken van een diagram of grafieken met JavaScript. Het ondersteunt ook het wijzigen van complexe grafieken door nieuwe grafiekeditors te maken of aan te passen. Eerst moet u een grafiek maken in de gegeven container en vervolgens kunt u eenvoudig cellen aan het model toevoegen om de grafiek te bouwen. U kunt eenvoudig diagramtitels toevoegen en notities over meerdere deelnemers plaatsen. De bibliotheek biedt ook extra functies, zoals visuele effecten, bediening via de gebruikersinterface en meer.

Twee grafieken samenvoegen via JavaScript

mxGraph stelt computerprogrammeurs in staat om twee grafieken samen te voegen in hun eigen JavaScript-applicaties. Allereerst moet u een voorbeeldgrafiek maken in de gegeven container. Maak alle cellen rond met een wit, vetgedrukt label. Maak nu het tweede grafiekmodel zonder container. Voeg in één stap cellen toe aan het doelmodel met behulp van aangepaste id's voor de hoekpunten. Nu kunt u het model van de tweede grafiek samenvoegen tot het model van de eerste grafiek.

Raster tekenen met JavaScript

Met de mxGraph-bibliotheek kunnen softwareontwikkelaars dynamisch een raster tekenen in hun eigen JavaScript-applicaties. U kunt eenvoudig dynamisch een raster tekenen met HTML 5-canvas. Maak eerst de grafiek in de gegeven container en maak dynamisch een raster waarvoor een canvas vereist is. Je moet gebeurtenisfiltering aanpassen om canvas als een container te accepteren. Nu cleert de achtergrond indien nodig en stelt de afstand van de rasterlijnen in pixels in. Tekent nu het eigenlijke raster.

 Dutch