Creazione di grafici a torta

Informazioni su questa attività

L'anatomia di un grafico a torta è la seguente:

Titolo scheda

Un'etichetta o un'intestazione univoca assegnata alla scheda.

Descrizione comandi della scheda

Un suggerimento fornisce ulteriori dettagli sui dati visualizzati sulla scheda.

Etichette

Il valore percentuale dell'intero per una singola categoria, ad esempio, 24% o 76%.

Link di piè di pagina

Un campo selezionabile o un collegamento con un'etichetta, ad esempio View all.

È possibile utilizzare Card builder per creare un grafico a torta.

1. Dal menu di navigazione, fare clic su Builder scheda.
2. Fare clic su Nuova scheda.

Nella scheda Generale , definisci la scheda:

3. Assegnare un nome alla carta.
   La scheda è indicata dal suo nome nella libreria della scheda.
4. Selezionare il tipo di scheda.
   Selezionare Chart come tipo di scheda e Piecome variante.

Nella scheda Dati , aggiungere i dati alla scheda:

5. Aggiungere una query GraphQL per richiamare i dati.
   Fare clic su Aggiungi e scrivere una query simile alla query nell'esempio . Per ulteriori informazioni, consultare Aggiunta di query alle schede.
6. Definire le variabili utilizzate nella query.
   Nel campo QUERY VARIABLES , definisci le variabili in formato JSON utilizzando un formato simile al codice nell'esempio .
7. Eseguire la query.
8. Verifica che i dati vengano restituiti per la query, in modo simile ai dati restituiti nell'esempio .
9. Nella scheda Trasforma , aggiungere il codice per trasformare i dati per la visualizzazione su un grafico a torta
   Utilizzare un codice simile all' esempio o utilizzare la trasformazione predefinita.
10. Fare clic su Fine.
    I dati restituiti dalla query vengono visualizzati nel grafico.
11. Configurare i gruppi di dati per il grafico a torta
    Nell'esempio, sono disponibili due gruppi di dati, latee onTime. Selezionare i gruppi di dati da visualizzare nel diagramma a torta.
12. Facoltativo: sovrascrivere l'etichetta e il colore.

Nella scheda Stile , definire lo stile della scheda:

13. In Dimensioni, aumentare la larghezza e l'altezza della scheda.
14. In Intestazione, modificare il titolo del grafico.
15. Attivare la legenda e impostare la relativa posizione sull'interfaccia utente.
16. Configurare il comportamento dell'interazione con la legenda e il suggerimento.
17. Espandere Piè di pagina e impostare Link piè di pagina su e assegnare un'etichetta e immettere un ID pagina.

    È possibile aggiungere un ID pagina nel campo o selezionare una pagina dalla libreria. Per selezionare una pagina, fare clic su Seleziona da libaray. In alternativa, è possibile aggiungere un collegamento esterno al piè di pagina. Quando si fa clic, questo link si apre in una nuova scheda.

    Nota: alcune pagine sono contrassegnate conThis page requires context.Avvertenza. Ciò significa che queste pagine richiedono variabili di contesto per eseguire correttamente il rendering del contenuto sulla pagina e queste variabili mancano nel contesto della pagina. Per aggiungere le variabili di contesto della pagina, consultare Configurazione delle variabili di contesto della pagina.

    Una volta selezionata la pagina, è possibile aggiungere variabili modello per rendere dinamico il contenuto della pagina. Ciò significa che è possibile utilizzare la stessa pagina più volte con contenuto personalizzato in base alle variabili.

18. Fare clic su Salva.

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
  }
}

{
  "tenantId": "{{ tenantId }}"
}

{
  "data": {
    "late": {
      "totalCount": 2,
      "__typename": "BusinessObjectsCursor"
    },
    "totalShipments": {
      "totalCount": 8,
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

{
	"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}}"
		}
	]
}