Einfache Balkendiagramme erstellen

Ein einfaches Balkendiagramm zeigt Daten in Datengruppen an, die in Form von Balken mit gleicher Breite und variabler Höhe dargestellt werden können, die als Größe der Menge dargestellt werden. Sie können das einfache Balkendiagramm verwenden, um einen Mengenvergleich auf der Basis einer statistischen Zahl darzustellen.

Informationen zu dieser Task

Die Anatomie eines einfachen Balkendiagramms lautet wie folgt:
Ein einfaches Balkendiagramm zeigt den Wert der überfälligen Auftragsposition nach Lieferant an
Kartentitel
Eine eindeutige Bezeichnung oder Überschrift, die der Karte zugeordnet ist
QuickInfo für Karte
Eine QuickInfo enthält zusätzliche Details zu den Daten, die auf der Karte angezeigt werden.
Schwellenwert
Eine Linie im Diagramm darüber oder darunter, die signifikante Werte sind.
Titel der Y-Achse
Eine Bezeichnung, die der vertikalen Achse des Diagramms zugewiesen ist
Titel der X-Achse
Eine Bezeichnung, die der horizontalen Achse des Diagramms zugewiesen ist
Legende
Die Bezeichnung der Datengruppe.
Fußzeilenlink
A clickable field or link with a label, for example, View all.

Mit dem Builder für Karte können Sie ein einfaches Balkendiagramm erstellen.

Vorgehensweise

  1. Klicken Sie im Navigationsmenü auf Kartenbuilder.
  2. Klicken Sie auf Neue Karte.

Definieren Sie auf der Registerkarte Allgemein die Karte:

  1. Weisen Sie der Karte einen Namen zu.

    Auf die Karte wird durch ihren Namen in der Kartenbibliothek verwiesen.

  2. Wählen Sie den Kartentyp aus.

    Wählen Sie Chart als Kartentyp und Simple bar als Variante aus.

Fügen Sie auf der Registerkarte Daten Daten zur Karte hinzu:

  1. Fügen Sie eine GraphQL -Abfrage hinzu, um die Daten abzurufen.
    Klicken Sie auf Hinzufügen und schreiben Sie eine Abfrage ähnlich der Abfrage im Beispiel. Weitere Informationen finden Sie unter Abfragen zu Karten hinzufügen.
  2. Definieren Sie alle Variablen, die Sie in der Abfrage verwenden
    Definieren Sie im Feld QUERY VARIABLES die Variablen im JSON-Format, indem Sie ein Format ähnlich dem Beispielverwenden.
  3. Führen Sie die Abfrage aus.
  4. Stellen Sie sicher, dass Daten für die Abfrage zurückgegeben werden, ähnlich den Daten, die im Beispielzurückgegeben werden.
  5. Fügen Sie auf der Registerkarte Transformieren Code hinzu, um die Daten für die Visualisierung in einem einfachen Balkendiagrammumzuwandeln.
    Verwenden Sie Code ähnlich dem Beispiel oder verwenden Sie die Standardumsetzung.
  6. Klicken Sie auf Fertig.
    Die von der Abfrage zurückgegebenen Daten werden im Diagramm angezeigt.
  7. Konfigurieren Sie die Datengruppen für das einfache Balkendiagramm.
    Im Beispiel ist die Datengruppe McGrey Electricalverfügbar. Wählen Sie die Datengruppen aus, die als Balken im Diagramm angezeigt werden.
  8. Optional: Überschreiben Sie die Beschriftung und die Farbe.

Definieren Sie auf der Registerkarte Stil den Stil der Karte:

  1. Vergrößern Sie in Abmessungendie Breite und Höhe der Karte.
  2. Fügen Sie unter Headereinen Kartentitel hinzu und aktivieren Sie die QuickInfo für die Beschreibung.
  3. Legen Sie in Achsendie Skala der X-Achse und die verwendete Beschriftung fest. Sie können einen Schwellenwert für die X-Achse festlegen.
  4. Legen Sie in Achsendie Skala der Y-Achse und die verwendete Beschriftung fest. Sie können einen Schwellenwert für die Y-Achse festlegen.
  5. Aktivieren Sie in Legendedie Legende und legen Sie ihre Position in der Benutzerschnittstelle fest.
  6. Konfigurieren Sie unter Verhaltendas Verhalten der Interaktion mit der Legende und der QuickInfo.
  7. Erweitern Sie Fußzeile und legen Sie Fußzeilenlink fest, um eine Beschriftung zuzuweisen und eine Seiten-ID einzugeben.

    Sie können dem Feld eine Seiten-ID hinzufügen oder eine Seite aus der Bibliothek auswählen. Um eine Seite auszuwählen, klicken Sie auf Aus Libaray auswählen. Alternativ können Sie einen externen Link zur Fußzeile hinzufügen. Wenn Sie auf diesen Link klicken, wird er in einer neuen Registerkarte geöffnet.

    Hinweis: Einige Seiten sind markiert mitThis page requires context.Warnung: Das bedeutet, dass diese Seiten Kontextvariablen benötigen, um Inhalte ordnungsgemäß auf der Seite wiederzugeben, und diese Variablen fehlen im Seitenkontext. Informationen zum Hinzufügen von Seitenkontextvariablen finden Sie unter Seitenkontextvariablen konfigurieren.

    Nach der Auswahl der Seite können Sie Vorlagenvariablen hinzufügen, um den Seiteninhalt dynamisch zu machen. Das bedeutet, dass Sie dieselbe Seite mehrmals mit angepasstem Inhalt entsprechend den Variablen verwenden können.

  8. Klicken Sie auf Speichern.

Beispiel

Die folgende Abfrage ruft Daten aus dem Geschäftsobjektservice ab und gibt eine Liste der nach Lieferanten gruppierten überfälligen Auftragspositionen zurück. Die Abfrage verwendet eine Tenant-ID als Eingabeparameter und ermöglicht die Filterung nach Position, Kategorie und Lieferant. Die Abfrage enthält außerdem einen Aggregationsparameter, der Auftragspositionen nach Lieferanten gruppiert und den Gesamtwert der Auftragspositionen summiert. Die Abfrage gibt die fünf Lieferanten mit dem höchsten Gesamtwert der überfälligen Auftragspositionen zurück.

query pastDueOrderlineBySupplier($tenantId: String!, $locationFilter: BooleanExp = {CONSTANT_VALUE: true}, $categoryFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  pastDueOrderLineBySupplierChar: businessObjects(
    simpleFilter: {type: OrderLine, tenantId: $tenantId}
    hint: {viewId: "graph"}
    advancedFilter: {AND: [{GREATER_THAN: [{SELECT: "order.plannedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {EQUALS: [{SELECT: "order.orderType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, $locationFilter, $categoryFilter, $supplierFilter]}
    aggregationParams: {paginationParams: {first: 5, sort: [{fieldPath: "totalOrderLinesBySupplier.sum", order: DESC}]}, dimension: {fieldPath: "order.vendor.name", type: STRING}, reduce: {expression: {fieldPath: "value", operator: SUM, type: INT}, output: {resultAlias: "totalOrderLinesBySupplier", type: INT}}}
  ) {
    totalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        numValue
      }
    }
    edges {
      cursor
      object {
        ... on OrderLine {
          valueCurrency
        }
      }
    }
  }
}
Der folgende Code ist ein Beispiel für die Definition der Variablen, die in der Abfrage verwendet werden.
{
  "tenantId": "{{ tenantId }}"
}
Im folgenden Beispiel wird der Wert der überfälligen Auftragsposition vom Lieferanten zurückgegeben.
{
	"data": {
		"pastDueOrderLineBySupplierChar": {
			"totalCount": 19,
			"aggregationResults": [
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "McGrey Electrical",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 604160,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Total Source Extrusion Corporation",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 226800,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "F & M Metals",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 125900,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "LightLens Industries",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 107920,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Alumi-lux Metal Products",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 59605,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				}
			],
			"edges": [
				{
					"cursor": "NTQ1NDE2NA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ5OA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NTc3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NDIzOQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				}
			],
			"__typename": "BusinessObjectsCursor"
		}
	},
	"loading": false,
	"networkStatus": 7
}

Der folgende Code ist ein Beispiel für die Erstellung einer Transformation für die Karte.


{
	"totalCount": "{{ this.data.pastDueOrderLineBySupplierChar.totalCount }}",
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"currency": [
		{
			"{{#if this.data.pastDueOrderLineBySupplierChar.edges.length > 0}}": "{{this.data.pastDueOrderLineBySupplierChar.edges[0].object.valueCurrency}}"
		},
		{
			"{{#else}}": ""
		}
	],
	"results": {
		"{{#each this.data.pastDueOrderLineBySupplierChar.aggregationResults}}": {
			"group": "{{dimensionValues[0].value}}",
			"value": "{{values[0].numValue}}"
		}
	}
}

In einer Transformation müssen die Daten, die auf den einzelnen Achsen des Diagramms angezeigt werden, mit den von der Abfrage zurückgegebenen Daten übereinstimmen. Dieses Attribut wird im Abschnitt "Datengruppen" ausgewählt. Für die zurückgegebenen Daten kann eine Berechnung durchgeführt werden. Im Beispiel wirdMcGrey Electrical der Gruppe hinzugefügt, die von der Abfrage zurückgegeben wird.

Nächste Schritte

Fügen Sie die Karte mithilfe des Dashboard-Builderszu einem Dashboard hinzu.