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 der Diagramme werden Standardwerte bereitgestellt. Mithilfe einer JSON-Vorlage können Sie JSON-Optionen definieren, um die an Highcharts übergebenen Optionen beim Rendern von Diagrammen in einer App Builder App zu ersetzen und so 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, rufen Sie eine andere Seite in Ihrer Anwendung auf als das zu ändernde Diagramm. Öffnen Sie ein Entwickler wie die DevTools von Chrome oder Firefox und fügen Sie Folgendes in die Konsole ein:
var logging = require("vinyl.logging");
logging.enabled = true;
logging.preserve = true;
Navigieren Sie anschließend zu der Seite mit dem Diagramm, das Sie ändern möchten (ohne den Webbrowser neu zu laden). In Ihrer Konsole sehen Sie den erstellten JSON App Builder:
Chart Customers By Country - using the following chart configuration:
Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1)`[…], `series: (1)`[…], `tooltip: {…}, exporting: {…}, legend: {} }
Identifizieren Sie anhand dieser Ausgabe und der Highcharts API -Dokumentation, was Sie konkret ändern möchten. Navigieren Sie anschließend zur IDE > Look and Feel, wählen Sie die Vorlage für die zu ändernde Sammlung aus und klicken Sie auf +Vorlage, um eine neue Vorlage zu erstellen. Geben Sie JSON als Inhaltstyp für die neue Vorlage an. Geben Sie Ihren JSON-Ausgabe-Code in das dafür vorgesehene Textfeld ein.
Gehen Sie abschließend zu Ihrer Diagrammseite > Aktionsleiste > Diese Seite gestalten 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. Die Ausgabe lautet „USA 5 %“.
{
"series":[
{
"dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
}
]
}
Um einen minimalen und maximalen Wert für die Y-Achse 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: „property“: 1
- null ist ein gültiger Wert
Ressourcen
Der folgende externe Github-Link zu AnyCharts Chartopedia ist ein hilfreiches Tool, um herauszufinden, welche Eigenschaft in einem Highcharts-JSON-Objekt geändert werden muss: