Creación de gráficos circulares

Acerca de esta tarea

La anatomía de un gráfico circular es la siguiente:

Título de tarjeta

Etiqueta o cabecera exclusiva que se asigna a la tarjeta.

Ayuda contextual de tarjeta

Una ayuda contextual proporciona detalles adicionales sobre los datos que se muestran en la tarjeta.

Etiquetas

El valor de porcentaje del todo para una categoría individual, por ejemplo, 24% o 76%.

Enlace de pie de página

Un campo o enlace que se puede pulsar con una etiqueta, por ejemplo, View all.

Puede utilizar el Creador de tarjetas para crear un gráfico circular.

1. En el menú de navegación, pulse Creador de tarjetas.
2. Pulse Nueva tarjeta.

En la pestaña General , defina la tarjeta:

3. Asigne un nombre a la tarjeta.
   Se hace referencia a la tarjeta por su nombre en la biblioteca de tarjetas.
4. Seleccione el tipo de tarjeta.
   Seleccione Chart como tipo de tarjeta y Piecomo variante.

En la pestaña Datos , añada datos a la tarjeta:

5. Añada una consulta GraphQL para recuperar los datos.
   Pulse Añadir y escriba una consulta similar a la consulta en el ejemplo. Para obtener más información, consulte Adición de consultas a tarjetas.
6. Defina las variables que esté utilizando en la consulta.
   En el campo QUERY VARIABLES , defina las variables en formato JSON utilizando un formato similar al código del ejemplo.
7. Ejecute la consulta.
8. Verifique que se devuelvan datos para la consulta, de forma similar a los datos que se devuelven en el ejemplo.
9. En la pestaña Transformar , añada código para transformar los datos para la visualización en un gráfico circular.
   Utilice un código similar al del ejemplo o utilice la transformación predeterminada.
10. Pulse Terminado.
    Los datos devueltos por la consulta se muestran en el gráfico.
11. Configure los grupos de datos para el gráfico circular.
    En el ejemplo, hay dos grupos de datos disponibles, latey onTime. Seleccione los grupos de datos que se mostrarán en el gráfico circular.
12. Opcional: Sustituya la etiqueta y el color.

En el separador Estilo , defina el estilo de la tarjeta:

13. En Dimensiones, aumente el ancho y la altura de la tarjeta.
14. En Cabecera, modifique el título del gráfico.
15. Activar la leyenda y establecer su posición en la interfaz de usuario.
16. Configure el comportamiento de la interacción con la leyenda y la ayuda contextual.
17. Expanda Pie de página y establezca Enlace de pie de página en activado y asigne una etiqueta y especifique un ID de página.

    Puede añadir un ID de página en el campo o puede seleccionar una página de la biblioteca. Para seleccionar una página, pulse Seleccionar de libaray. De forma alternativa, puede añadir un enlace externo al pie de página. Cuando se pulsa, este enlace se abre en una pestaña nueva.

    Nota: Algunas páginas están marcadas conThis page requires context.aviso. Esto significa que estas páginas requieren variables de contexto para representar el contenido correctamente en la página y que estas variables faltan en el contexto de la página. Para añadir variables de contexto de página, consulte Configuración de variables de contexto de página.

    Después de seleccionar la página, puede añadir variables de plantilla para que el contenido de la página sea dinámico. Esto significa que puede utilizar la misma página varias veces con contenido personalizado de acuerdo con las variables.

18. Pulse Guardar.

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