Creazione di grafici ad anello

Un grafico ad anello visualizza i dati in gruppi di dati che possono essere tracciati come un cerchio con il centro ritagliato per assomigliare ad una ciambella, ed è diviso in settori che rappresentano ciascuno una proporzione dell'insieme. È possibile utilizzare le visualizzazioni ad anello per mostrare le proporzioni dei dati categoriali.

Informazioni su questa attività

L'anatomia di un grafico a ciambella è la seguente:
Figura 1. Grafico a ciambella
L'anatomia di un grafico a ciambella.
Titolo scheda
Un'etichetta o un'intestazione univoca assegnata alla scheda.
Legenda
L'etichetta del gruppo di dati.
Etichetta
Il valore percentuale dell'intero per una singola categoria, ad esempio, 24% o 76%.
Etichetta numero grande
Il testo che viene visualizzato dopo il conteggio totale al centro del grafico ad anello, ad esempio 25 Shipments.
Descrizione comandi della scheda
Un suggerimento che fornisce ulteriori dettagli sui dati visualizzati sulla scheda.
Link di piè di pagina
Un campo selezionabile o un collegamento con un'etichetta, ad esempio View all.
È possibile utilizzare il builder Scheda per creare una scheda ad anello.

Procedura

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

Nella scheda Generale , definisci la scheda:

  1. Assegnare un nome alla carta.
    La scheda è indicata dal suo nome nella libreria della scheda.
  2. Selezionare il tipo di scheda.
    Selezionare Chart come tipo di scheda e Donutcome variante.

Nella scheda Dati , aggiungere i dati alla scheda:

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

Nella scheda Stile , definire lo stile della scheda:

  1. In Dimensioni, aumentare la larghezza e l'altezza della scheda.
  2. In Intestazione, modificare il titolo del grafico.
  3. In Centro, aggiungere un'etichetta di testo per descrivere il numero grande.
  4. Attivare la legenda e impostare la relativa posizione sull'interfaccia utente.
  5. In Funzionamento, configurare il comportamento dell'interazione con la legenda e il suggerimento.
  6. 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.

  7. Fare clic su Salva.

Esempio

La seguente query richiama il numero totale di spedizioni in entrata consegnate e il numero totale di spedizioni consegnate in ritardo. La query comprende una variabile 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
  }
}

Il seguente codice è un esempio di come definire le variabili da utilizzare nella query.

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

Il seguente codice è un esempio dei dati restituiti dalla query. Nell'esempio, due spedizioni sono in ritardo su un totale di otto spedizioni.

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

Nel seguente codice, COMMON.SHIPMENT_STATUS.ON_TIME viene aggiunto come gruppo. Le spedizioni in tempo vengono calcolate nella trasformazione sottraendo le spedizioni in ritardo dalle spedizioni totali.


{
	"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 una trasformazione, i dati visualizzati nel grafico devono corrispondere ai dati restituiti dalla query. È possibile aggiungere qualsiasi calcolo sui dati restituiti dalla query.

Cosa fare successivamente

Aggiungere la scheda a un dashboard utilizzando il builder Dashboard.