Elemente anpassen

Sie können das Erscheinungsbild von Diagrammelementen mithilfe verschiedener Konfigurationseigenschaften innerhalb ihrer Objekte ändern. Sie können außerdem das Look-and-Feel des Diagramms durch das Erstellen benutzerdefinierter Shapes anpassen.

Styling von Shapes und Lines über die Konfigurationseigenschaften

Styling der Shapes

Ein Shape-Objekt bietet eine breite Palette an Eigenschaften, mit denen Sie das Look-and-Feel von Shapes anpassen können.

Eine gute Möglichkeit, alle Shapes desselben Typs gleichzeitig zu stylen, besteht darin, die Styling-Einstellungen für die Shapes über die Eigenschaft defaults des Diagramms festzulegen:

const defaults = {
  start: {
    fill: "#FE9998",
    stroke: "#FE9998",
    fontColor: "#FFF",
    lineHeight: 16
  },
  end: {
    fill: "#FE9998",
    stroke: "#FE9998",
    fontColor: "#FFF",
    lineHeight: 16
  },
  // ...
};

Sehen Sie sich die vollständige Liste der Shape-Objekteigenschaften an.

Styling der Lines

Um das Aussehen der Lines zu ändern, verwenden Sie die erforderlichen Konfigurationseigenschaften innerhalb des Line-Objekts.

const data = [
    {
      id: "1-2",
      from: "1",
      to: "2",
      type: "line",
      strokeType: "dash", // gestrichelte Linie
      stroke: "#fa55d1" // Linienfarbe
    }
];

Sehen Sie sich die vollständige Liste der Line-Objekteigenschaften an.

Sehen Sie sich das Beispiel an:

Definieren der Shape-Vorlage

Sie können ein angepasstes Diagramm erstellen, indem Sie neue Shape-Typen zum Diagramm hinzufügen und Vorlagen für sie definieren. Verwenden Sie dazu die Methode addShape() des Diagrammobjekts.

Beispiel im Standardmodus

Beispiel im Org-Chart-Modus

Beispiel im Mindmap-Modus

Beispiel im PERT-Modus

Styling der Ziel-Shapes

Bei Verwendung der Org-Chart- und Mindmap-Diagramme im Diagram Editor können Sie einen benutzerdefinierten Stil für Zielelemente hinzufügen.

Hinweis

Die Stylisierung gilt nicht für das übergeordnete Element des verschobenen Elements oder für ein verschobenes Element mit giveItem: false

<style>
    .dhx_diagram_item.dhx_action__target--take {
        // Styles für das Zielelement, das ein anderes Element aufnehmen kann
    }
    .dhx_diagram_item.dhx_action__target--doesnt_take {
        // Styles für das Zielelement, das kein anderes Element aufnehmen kann
    }
</style>

Styling von Groups über die Konfigurationseigenschaften

Styling der Group

Um einen benutzerdefinierten Stil für eine Group festzulegen, können Sie die Eigenschaft style des Group-Objekts verwenden. Zum Beispiel:

Styling des Group-Headers

Sie können den Standardstil des Group-Headers über die Attribute der Eigenschaft header des Group-Objekts ändern.

Styling von Swimlanes über die Konfigurationseigenschaften

Styling der Swimlane

Sie können die Einstellungen strokeWidth, stroke und fill einer Swimlane über die Eigenschaft style des Swimlane-Objekts anpassen:

const data = [
    {
        "type": "$swimlane",
        "width": 970,
        "height": 790,
        "header": {
            "text": "Game levels and locations",
            "closable": true
        },
        "layout": [
            ["1"],
            ["2"],
            ["3"],
            ["4"],
            ["5"]
        ],
        "style": {
            "strokeWidth": 5,
            "stroke": "#083796",
            "fill": "#D4DAE4"
        }
    }
];

Styling der Swimlane-Header/Sub-Header

Die Eigenschaften header, subHeaderRows und subHeaderCols eines Swimlane-Objekts enthalten zusätzliche Attributsätze zum Anpassen des Headers und der Subheader der Swimlane.

Sie können beispielsweise die Hintergrundfarben der oberen Subheader der Swimlane über die Eigenschaft subHeaderCols ändern:

const data = [
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "header": {
            "closable": true,
            "text": "Waterfall diagram template"
         },
        "layout": [
            [1, 2, 3, 4]
        ],
        "subHeaderCols": {
            "headers": [
                {
                    "text": "September",
                    "fill": "#f35c4f66"
                },
                {
                    "text": "October",
                    "fill": "#9b60f866"
                },
                {
                    "text": "November",
                    "fill": "#ffae1266"
                },
                {
                    "text": "December",
                    "fill": "#3cc97a66"
                }
            ]
        }
    }
];

Sehen Sie sich das vollständige Beispiel an:

Styling von Swimlane-Zellen

Wenn Sie eine einzelne Zelle der Swimlane anpassen möchten, verwenden Sie die Eigenschaft style des Swimlane-Zellobjekts (type:"$sgroup").

const data = [
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "layout": [
            [1, 2, 3, 4]
        ],
        // ...
    },
    {
        "id": 1,
        "type": "$sgroup",
        "style": {
            "fill": "#D4DAE4"
        },
        "x": 0,
        "y": 80
    }
];

Verwandtes Beispiel: Diagram. Standardmodus. Wasserfall-Diagrammvorlage