So erstellen Sie eine Verlaufsfüllung für ein Diagramm im Jitterbit App Builder

In diesem Artikel erfahren Sie, wie Sie mithilfe einer JSON-Vorlage eine Verlaufsfüllung für ein Diagramm erstellen und verwenden. Das gezeigte Beispiel verwendet ein Flächendiagramm. In diesem Artikel wird davon ausgegangen, dass Sie über ein Diagramm mit bereits erstellten zugrunde liegenden Daten verfügen und eine JSON-Vorlage erstellen, mit der Sie eine Verlaufsfüllung erzielen können.

Hinweis

Dieses Beispiel veranschaulicht das Ändern von Datenbeschriftungen, die im Diagramm angezeigt werden, um eine bestimmte Schriftgröße und -art zu verwenden. Sie können den „Bereichs“-Teil der JSON-Syntax entfernen, wenn Sie die Datenbeschriftungsinformationen nicht ändern möchten.

Beispiel für eine auf ein Flächendiagramm angewendete Farbverlaufsfüllung

Schritt 1: Erstellen der JSON-Vorlage

Navigieren Sie zur App Workbench
Klicken Sie in der App Workbench-Symbolleiste auf Look and Feel
Klicken Sie auf die Tab Vorlagen
Klicken Sie auf die Schaltfläche + Vorlage
Vergeben Sie einen Namen für die Vorlage. Zum Beispiel: Farbverlauf
Ändern Sie den Wert Content Type in JSON
Klicken Sie auf Speichern

Geben Sie die entsprechende Syntax in das Feld Editor (oder Quelle) ein. Sie benötigen die Start- und Stop-Farben, die Sie für den Farbverlauf verwenden möchten, und können diese Werte entweder als Hex-Farbcode oder als RGBA eingeben. Beispiel:

{
    "plotOptions": {
        "series": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            },
            "fillColor": {
                "linearGradient": {
                  "x1": "0",
                  "x2": "0",
                  "y1": "0",
                  "y2": "1"
                },
                "stops": [
                  ["0", "rgba(40, 167, 229, 0.3)"],
                  ["1", "rgba(255, 255, 255, 0)"]
                ]
            }
        },
        "bar": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        },
        "column": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        },
        "spline": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        },
        "line": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        }
    },

    "legend": {
            "itemStyle": {
                "fontSize": "18px",
                "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
            }
    },
  "series": [
        {
            "dataLabels": {
                "style": {
                    "fontSize": "18px"
                    }
            }
        }
    ]
}

Klicken Sie auf die Schaltfläche Speichern

Schritt 2: Verbinden Sie die JSON-Vorlage mit dem Diagramm

Nachdem die JSON-Vorlage nun erstellt ist, können wir sie unserem Diagramm hinzufügen:

Navigieren Sie zur Diagrammseite, auf der Sie die Farbverlaufsfüllung hinzufügen möchten.
Klicken Sie auf die Aktionsleiste > Live Designer.
Wählen Sie das Diagramm aus.
Klicken Sie in den Steuerelementen für Bestelldetails auf die Schaltfläche + Steuerelement.
Wählen Sie JSON-Optionsobjekt als Steuerelementtyp.
Weisen Sie einen Namen zu. Zum Beispiel: Farbverlauf.
Klicken Sie auf das Dropdown-Menü Vorlage und wählen Sie die in Schritt 1 erstellte JSON-Vorlage aus.
Klicken Sie auf Weiter und Fertigstellen.