Kreisdiagramme erstellen

Eine Kreisdiagrammkarte zeigt Daten in Datengruppen an, die als Kreis dargestellt werden können, der in Sektoren unterteilt ist, die jeweils einen Anteil des Ganzen darstellen. Sie können Kreisdiagrammvisualisierungen verwenden, um die Anteile kategorialer Daten anzuzeigen.

Informationen zu dieser Task

Die Anatomie eines Kreisdiagramms lautet wie folgt:
Kreisdiagrammbeispiel, das zeigt, dass 24% der Sendungen verspätet sind und 76% pünktlich sind.
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.
Bezeichnungen
Der Prozentwert des Ganzen für eine einzelne Kategorie, z. B. 24% oder 76%.
Fußzeilenlink
A clickable field or link with a label, for example, View all.
Mit dem Builder für Karte können Sie ein Kreisdiagramm 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.
    Die Karte wird durch ihren Namen in der Kartenbibliothek referenziert.
  2. Wählen Sie den Kartentyp aus.
    Wählen Sie Chart als Kartentyp und Pieals 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 verwenden, das dem Code im Beispielähnelt.
  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 zur Transformation der Daten für die Visualisierung in einem Kreisdiagramm hinzu.
    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 Kreisdiagramm.
    Im Beispiel sind zwei Datengruppen verfügbar: lateund onTime. Wählen Sie die Datengruppen aus, die im Kreisdiagramm angezeigt werden sollen.
  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. Ändern Sie in Kopfzeileden Diagrammtitel.
  3. Aktivieren Sie die Legende und legen Sie ihre Position in der Benutzerschnittstelle fest.
  4. Konfigurieren Sie das Verhalten der Interaktion mit der Legende und der QuickInfo.
  5. 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.

  6. Klicken Sie auf Speichern.

Beispiel

Die folgende Abfrage ruft die Gesamtzahl der eingehenden Sendungen ab, die geliefert wurden, und die Gesamtzahl der Sendungen, die verspätet geliefert wurden. Die Abfrage enthält eine Variable tenantId .
query estimatedLateDelivery($tenantId: String!, $customerFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}, $carrierFilter: BooleanExp = {CONSTANT_VALUE: true}, $originFilter: BooleanExp = {CONSTANT_VALUE: true}, $destinationFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  late: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {GREATER_THAN: [{SELECT: "estimatedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {NOT: {EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "DELIVERED", type: STRING}]}}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter]}
    hint: {viewId: "graph"}
    cursorParams: {first: 0}
  ) {
    totalCount
  }
  totalShipments: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {NOT: {EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "DELIVERED", type: STRING}]}}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter]}
    hint: {viewId: "graph"}
    cursorParams: {first: 0}
  ) {
    totalCount
  }
}
Der folgende Code ist ein Beispiel für die Definition der Variablen, die in der Abfrage verwendet werden.
{
  "tenantId": "{{ tenantId }}"
}
Der folgende Code ist ein Beispiel für die Daten, die von der Abfrage zurückgegeben werden. Im Beispiel sind zwei von insgesamt acht Sendungen verspätet.
{
  "data": {
    "late": {
      "totalCount": 2,
      "__typename": "BusinessObjectsCursor"
    },
    "totalShipments": {
      "totalCount": 8,
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

Im folgenden Code wird COMMON.SHIPMENT_STATUS.ON_TIME als Gruppe hinzugefügt. Die termingerechten Sendungen werden in der Transformation berechnet, indem die verspäteten Sendungen von der Gesamtzahl der Sendungen abgezogen werden.


{
	"legendOrder": [
		"COMMON.SHIPMENT_STATUS.ON_TIME",
		"COMMON.SHIPMENT_STATUS.LATE"
	],
	"colorScale": {
		"COMMON.SHIPMENT_STATUS.ON_TIME": "#009d9a",
		"COMMON.SHIPMENT_STATUS.LATE": "#6929c4"
	},
	"totalCount": [
		"{{this.data.totalShipments.totalCount}}"
	],
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"results": [
		{
			"group": "COMMON.SHIPMENT_STATUS.LATE",
			"value": "{{this.data.late.totalCount}}"
		},
		{
			"group": "COMMON.SHIPMENT_STATUS.ON_TIME",
			"value": "{{this.data.totalShipments.totalCount - this.data.late.totalCount}}"
		}
	]
}

In einer Transformation müssen die Daten, die im Diagramm angezeigt werden, mit den von der Abfrage zurückgegebenen Daten übereinstimmen. Sie können eine beliebige Berechnung für die Daten hinzufügen, die die Abfrage zurückgibt.

Nächste Schritte

Fügen Sie die Karte mit dem Dashboard-Builderzu einem Dashboard hinzu.