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

Dieser Artikel erklärt Ihnen, wie Sie mithilfe einer JSON-Vorlage eine Verlaufsfüllung für ein Diagramm erstellen und verwenden. Das gezeigte Beispiel verwendet ein Flächendiagramm. Dieser Artikel setzt voraus, dass Sie ein Diagramm mit bereits erstellten Daten haben und eine JSON-Vorlage für die Verlaufsfüllung erstellen.

Hinweis

Dieses Beispiel veranschaulicht die Änderung der im Diagramm angezeigten Datenbeschriftungen, um eine bestimmte Schriftgröße und -art zu verwenden. Sie können den Bereichsteil der JSON-Syntax entfernen, wenn Sie die Datenbeschriftungsinformationen nicht ändern möchten.

Beispiel für eine Verlaufsfüllung in einem Flächendiagramm

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 Navigationsregisterkarte Tab
Klicken Sie auf die Schaltfläche + Vorlage
Vergeben Sie einen Namen für die Vorlage. Zum Beispiel: Farbverlauf
Ändern Sie den Wert Inhaltstyp in JSON
Klicken Sie auf Speichern

Geben Sie die entsprechende Syntax in das Feld Editor (oder Quelle) ein. Sie benötigen die für den Farbverlauf angegebenen Start- und Stopp-Farben und können diese Werte entweder als Hex-Farbcode oder als RGBA-Wert 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 erstellt wurde, können wir sie unserem Diagramm hinzufügen:

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