Zum Hauptinhalt springen

Initialisierung des Diagram Editor

Dieser Artikel behandelt den Prozess der Anzeige eines Diagram Editor auf einer Seite. Um den Editor zu initialisieren, müssen Sie die für den Editor spezifischen Quelldateien einbinden und die Instanz DiagramEditor verwenden. In allen anderen Aspekten entspricht die Initialisierungsphase der der Diagram-Komponente:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="../codebase/diagramWithEditor.js"></script>
    <link rel="stylesheet" href="../codebase/diagramWithEditor.css">
</head>

<body>
    <div id="editor_container"></div>
    <script>
        // Daten vorbereiten
        const data = [
            { id: 1, x: 100, y: 40, text: "Start", type: "start", height: 50 },
            { id: 2, x: 100, y: 170, text: "Operation 1", type: "output" },
            { id: 3, x: 100, y: 300, text: "Operation 2", type: "input" },
            { from: 1, to: 2 },
            { from: 2, to: 3 }
            // weitere Objekte
        ];

        // Diagram Editor erstellen
        const editor = new dhx.DiagramEditor("editor_container", {
            // Konfigurationsoptionen
        });

        // Daten in den Editor laden
        editor.parse(data);
    </script>
</body>
</html>

Erforderliche Codedateien einbinden​

Um einen Diagram Editor zu erstellen, müssen Sie 2 Quelldateien in Ihre Seite einbinden:

  • diagramWithEditor.js
  • diagramWithEditor.css

Stellen Sie sicher, dass Sie korrekte relative Pfade zu diesen Dateien angeben:

<script type="text/javascript" src="../codebase/diagramWithEditor.js"></script>
<link rel="stylesheet" href="../codebase/diagramWithEditor.css">

Diagram Editor über npm oder yarn installieren​

Sie können den JavaScript Diagram Editor mithilfe des Paketmanagers yarn oder npm in Ihr Projekt importieren.

Trial-Diagram-Editor über npm oder yarn installieren​

Info

Wenn Sie die Testversion des Diagram Editor verwenden möchten, laden Sie das Test-Diagram-Paket herunter und folgen Sie den in der README-Datei beschriebenen Schritten. Beachten Sie, dass der Test-Diagram-Editor nur 30 Tage lang verfügbar ist.

PRO-Diagram-Editor über npm oder yarn installieren​

Info

Sie können direkt im Kundenbereich auf das private npm von DHTMLX zugreifen, indem Sie Ihren Login und Ihr Passwort für npm generieren. Dort finden Sie auch eine ausführliche Installationsanleitung. Bitte beachten Sie, dass der Zugriff auf das private npm nur besteht, solange Ihre proprietäre Diagram-Lizenz aktiv ist.

Diagram Editor initialisieren​

Sie können einen Diagram Editor in einem Container, im Dokument-Body oder in einer Layout-Zelle initialisieren.

Initialisierung in einem Container​

Um einen Diagram Editor in einem Container zu initialisieren, verwenden Sie den Konstruktor dhx.DiagramEditor und übergeben Sie der Konstruktorfunktion die folgenden zwei Parameter:

  • einen Container, in den der Diagram Editor eingefügt wird - geben wir ihm die ID "editor_container":
index.html
<div id="editor_container"></div>
  • ein Objekt mit Konfigurationseigenschaften. Wird dieses Argument nicht an den Konstruktor übergeben, werden die Standardeinstellungen angewendet
index.js
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default" // "default" | "org" | "mindmap"
});

Initialisierung im Dokument-Body​

Sie können das Festlegen eines Containers für den Diagram Editor auch überspringen und ihn direkt in den Dokument-Body einfügen:

const editor = new dhx.DiagramEditor(document.body, {
    type: "default" // "default" | "org" | "mindmap"
});

Initialisierung in einer Layout-Zelle​

Sie können einen Editor auch innerhalb einer Layout-Zelle initialisieren. Verwenden Sie in diesem Fall null anstelle eines Containers:

const editor = new dhx.DiagramEditor(null, {
    type: "default" // "default" | "org" | "mindmap"
});
const layout = new dhx.Layout("layout", {
    cols: [
        {
            id: "diagram_editor"
        }
    ]
});

layout.getCell("diagram_editor").attach(editor);

Konfigurationseigenschaften​

Um die Konfiguration des Editors zu ändern, können Sie die gewünschte Eigenschaft im Konfigurationsobjekt angeben, das als zweiter Parameter der Konstruktorfunktion übergeben wird.

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default", // "default" | "org" | "mindmap"
    shapeBarWidth: 320,
    lineGap: 20
});

Eigenschaften​

Prüfen Sie die vollständige Liste der Konfigurationseigenschaften des Editors.

Daten in den Diagram Editor laden​

Sie können über die Methode parse() des Editors einen passenden Datensatz in den Editor laden.

Need more help?Contact Support