Zum Inhalt springen

Verwandeln Sie Ihre Kontakte in Urlaubsgeld mit unserem neuen Kundenempfehlungsprogramm! Erfahren Sie mehr

Diese Dokumentation gilt für Version 4.0 und höher von App Builder, dem neuen Namen für Vinyl. Hier gelangen Sie zur Vinyl-Dokumentation.

So verwenden Sie JSON-Optionsobjektvorlagen mit Diagrammen im Jitterbit App Builder

App Builder verwendet Highcharts als Berichts-Engine für Diagramme, die auf Anwendungsseiten erstellt werden. Für das Erscheinungsbild von Diagrammen werden Standardwerte bereitgestellt. Mithilfe einer JSON-Vorlage können Sie JSON-Optionen definieren, um die an Highcharts übergebenen Optionen beim Rendern von Diagrammen in zu ersetzen. an App Builder App, um weitere Anpassungen zu ermöglichen.

Highcharts definiert alle unterstützten Diagrammkonfigurationsoptionen sowie Methoden und Eigenschaften von Highchart-Objekten in ihrer API Dokumentation.

Um Ihre eigene JSON-Vorlage zu erstellen, besuchen Sie eine andere Seite in Ihrer Anwendung als das Diagramm, das Sie ändern möchten. Öffnen Sie ein Entwickler Dienstprogramm wie Chrome DevTools oder Firefox Devtools und fügen Sie Folgendes in die Konsole ein:

var logging = require("vinyl.logging");
logging.enabled = true;
logging.preserve = true;

Navigieren Sie als Nächstes zu der Seite mit dem Diagramm, das Sie ändern möchten (laden Sie den Webbrowser nicht neu). In Ihrer Konsole sehen Sie das JSON App Builder produziert:

Chart Customers By Country  - using the following chart configuration:

Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1)`[…], `series: (1)`[…], `tooltip: {…}, exporting: {…}, legend: {} }

Identifizieren Sie mithilfe dieser Ausgabe und der Highcharts API Dokumentation, was Sie konkret ändern möchten. Navigieren Sie dann zur IDE > Look and Feel > wählen Sie die Vorlage für die Sammlung aus, die Sie ändern möchten > und +Vorlage, um eine neue Vorlage zu erstellen. Geben Sie JSON als Inhaltstyp für die neue Vorlage an. Geben Sie Ihr Ausgabe-JSON in das bereitgestellte Textfeld ein.

Gehen Sie abschließend zu Ihrer Diagrammseite > Aktionsleiste > Diese Seite entwerfen und fügen Sie ein neues Steuerelement hinzu. Wählen Sie JSON-Optionsobjekt als Steuerelementtyp und wählen Sie Ihre JSON-Vorlage aus. Sie können Parameter angeben, wenn die JSON-Vorlage diese Funktion verwendet.

Beispiele für JSON-Optionen

Um ein Kreisdiagramm mit einer sinnvollen Beschriftung zu formatieren, verwenden Sie Folgendes. Dadurch wird „USA 5 %“ ausgegeben.

{
    "series":[
       {
          "dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
       }
    ]
}

Um einen minimalen und maximalen Y-Achsenwert festzulegen (gültig für Werte von 0 bis 100 %), verwenden Sie:

{
             "yAxis": [{
                 "softMin": {{min}},
                 "softMax": {{max}}
             }]
}

So formatieren Sie Beschriftungen im Trichterdiagramm so, dass sie neben dem Diagramm angezeigt werden, ohne abgeschnitten zu werden:

{
             "plotOptions": [{
                        "funnel": {
                        "dataLabels":{
                            "crop": "false"
                         }
                                }]
}

Wichtige Hinweise

  • In JSON muss der Parametername eine Zeichenfolge sein: „Eigenschaft“: 1
  • null ist ein gültiger Wert

Ressourcen

Der folgende externe Github-Link zu AnyCharts Chartopedia ist ein hilfreiches Tool, wenn Sie versuchen zu bestimmen, welche Eigenschaft in einem Highcharts-JSON-Objekt geändert werden soll:

https://www.anychart.com/chartopedia/