Zum Hauptinhalt springen

DHTMLX Diagram Editor-Übersicht

Die DHTMLX Diagram-Komponente bietet Ihnen einen Editor, mit dem Sie Ihre gestalterischen Fähigkeiten beim Erstellen übersichtlicher und ansprechender Diagramme ausprobieren und anwenden können.

Editor im Standardmodus

Die Oberfläche des im Standardmodus initialisierten Editors besteht aus vier Funktionsbereichen:

Um ein Diagramm zu erstellen, müssen Sie entweder die benötigten Elemente aus der shapebar ziehen oder über die shape toolbar eine Kopie der Elemente erstellen.

Sie können die Attribute der Elemente über die Sidebar-Optionen der editbar anpassen. Um den Gestaltungsprozess zu beschleunigen, verwenden Sie die Tastenkombination Alt (Option) + Ctrl (Cmd) + С, um die Stile eines Elements zu kopieren, und Alt (Option) + Ctrl (Cmd) + V, um diese Stile auf die ausgewählten Elemente anzuwenden.

Verwandtes Beispiel: Diagram Editor. Standardmodus. Breites Flussdiagramm

Sie können die shapebar anpassen und, falls Sie eine benutzerdefinierte Form hinzugefügt haben, entsprechend den Attributen Ihrer Form die editbar konfigurieren.

Editor im Organigramm-Modus

Die Oberfläche des im Organigramm-Modus initialisierten Editors besteht aus drei Funktionsbereichen:

Hinweis

Der Editor verfügt in diesem Modus nicht über die shapebar

Um ein Diagramm im Organigramm-Modus des Editors zu erstellen, müssen Sie eine Form auswählen und ein neues untergeordnetes Element dafür hinzufügen. Sie können die Formen von einem übergeordneten Element zu einem anderen ziehen. Das verschobene Element wird zusammen mit all seinen untergeordneten Elementen gezogen.

Sie können die Attribute der Formen über die verfügbaren Sidebar-Optionen der editbar anpassen. Um den Gestaltungsprozess zu beschleunigen, verwenden Sie die Tastenkombination Alt (Option) + Ctrl (Cmd) + С, um die Stile eines Elements zu kopieren, und Alt (Option) + Ctrl (Cmd) + V, um diese Stile auf die ausgewählten Elemente anzuwenden.

Verwandtes Beispiel: Diagram Editor. Organigramm-Modus. Grundlegende Initialisierung

Wenn Sie dem Editor im Organigramm-Modus eine benutzerdefinierte Form hinzugefügt haben, können Sie die editbar konfigurieren, um benutzerdefinierte Eigenschaften der Form bearbeiten zu können.

Sie können assistant- oder partner-Elemente für eine übergeordnete Form jeder Ebene hinzufügen. Die Assistenten- oder Partnerelemente können keine übergeordneten Elemente sein.

Org chart editor assistant

Die Verbindung zwischen der übergeordneten Form und ihrem Partner ist immer horizontal. Außerdem werden die Verbindungen zwischen der übergeordneten Form und all ihren untergeordneten Elementen horizontal, nachdem ein Partnerelement für das übergeordnete Element hinzugefügt wurde, selbst wenn die Verbindungen zuvor vertikal waren.

Editor im Mindmap-Modus

Die Oberfläche des im Mindmap-Modus initialisierten Editors besteht aus drei Teilen:

Hinweis

Der Editor verfügt in diesem Modus nicht über die shapebar

Um ein Diagramm im Mindmap-Modus des Editors zu erstellen, müssen Sie eine Form auswählen und ein neues untergeordnetes Element dafür hinzufügen. Sie können die Formen von einem übergeordneten Element zu einem anderen ziehen. Das verschobene Element wird zusammen mit all seinen untergeordneten Elementen gezogen.

Sie können die Attribute der Formen über die verfügbaren Sidebar-Optionen der editbar anpassen. Um den Gestaltungsprozess zu beschleunigen, verwenden Sie die Tastenkombination Alt (Option) + Ctrl (Cmd) + С, um die Stile eines Elements zu kopieren, und Alt (Option) + Ctrl (Cmd) + V, um diese Stile auf die ausgewählten Elemente anzuwenden.

Verwandtes Beispiel: Diagram Editor. Mindmap-Modus. Emotionen-Mindmap

Wenn Sie dem Editor im Mindmap-Modus eine benutzerdefinierte Form hinzugefügt haben, können Sie die editbar konfigurieren, um benutzerdefinierte Eigenschaften der Form bearbeiten zu können.

Wie geht es weiter

Das war's. Jetzt können Sie mit der Arbeit an Diagrammen beginnen oder die innere Welt von JavaScript Diagram und Diagram Editor in den Leitfäden weiter erkunden.