도넛형 차트 작성

도넛형 차트는 가운데가 도넛형과 유사하도록 잘라낸 원으로 표시할 수 있는 데이터 그룹의 데이터를 표시하며 각 데이터 그룹은 전체의 비율을 나타내는 섹터로 나뉩니다. 도넛형 시각화를 사용하여 범주형 데이터의 비율을 표시할 수 있습니다.

이 태스크에 대한 정보

도넛형 차트의 구조는 다음과 같습니다.

카드 제목: 카드에 지정된 고유 레이블 또는 표제입니다.
범례: 데이터 그룹의 레이블입니다.
레이블: 개별 범주에 대한 전체 백분율 값입니다 (예: 24% 또는 76%).
큰 숫자 레이블: 도넛형 차트의 가운데에 있는 총 개수 다음에 표시되는 텍스트입니다 (예: 25 Shipments).
카드 도구 팁: 카드에 표시되는 데이터에 대한 추가 세부사항을 제공하는 도구 팁입니다.
푸터 링크: 레이블이 있는 클릭 가능한 필드 또는 링크입니다 (예: View all).

카드 빌더 를 사용하여 도넛 카드를 작성할 수 있습니다.

프로시저

탐색 메뉴에서 카드 빌더를 누르십시오.
새 카드를 클릭하십시오.

일반 탭에서 카드를 정의하십시오.

카드에 이름을 지정하십시오.
카드는 카드 라이브러리에서 해당 이름으로 참조됩니다.
카드 유형을 선택하십시오.
카드 유형으로 Chart 를 선택하고 변형으로 Donut를 선택하십시오.

데이터 탭에서 카드에 데이터를 추가하십시오.

GraphQL 조회를 추가하여 데이터를 검색하십시오.
추가 를 클릭하고 예제의 조회와 유사한 조회를 작성하십시오. 자세한 정보는 카드에 조회 추가를 참조하십시오.
조회에서 사용 중인 변수를 정의하십시오.
QUERY VARIABLES 필드에서 예제의 코드와 유사한 형식을 사용하여 JSON 형식으로 변수를 정의하십시오.
쿼리를 실행하십시오.
예제에서 리턴된 데이터와 유사하게 조회에 대해 데이터가 리턴되는지 확인하십시오.
변환 탭에서 도넛 카드의 시각화를 위해 데이터를 변환하는 코드를 추가하십시오.
예제 와 유사한 코드를 사용하거나 기본 변환을 사용하십시오.
완료를 클릭하십시오.
조회에서 리턴된 데이터가 차트에 표시됩니다.
도넛형 차트의 데이터 그룹을 구성하십시오.
이 예제에서는 두 개의 데이터 그룹 late및 totalShipments를 사용할 수 있습니다. 도넛에 표시할 데이터 그룹을 선택하십시오.
선택사항: 레이블 및 색상을 대체하십시오.

스타일 탭에서 카드의 스타일을 정의하십시오.

차원에서 카드의 너비 및 높이를 늘리십시오.
머리글에서 차트 제목을 수정하십시오.
가운데에서 큰 숫자를 설명하는 텍스트 레이블을 추가하십시오.
범례를 켜고 UI에서 해당 위치를 설정하십시오.
동작에서 범례 및 도구 팁과의 상호작용 동작을 구성하십시오.
바닥글 을 펼치고 바닥글 링크 를 켜짐으로 설정한 후 레이블을 지정하고 페이지 ID를 입력하십시오.

필드에 페이지 ID를 추가하거나 라이브러리에서 페이지를 선택할 수 있습니다. 페이지를 선택하려면 라이브러리에서 선택을 클릭하십시오. 또는 바닥글에 외부 링크를 추가할 수 있습니다. 클릭하면 이 링크가 새 탭에서 열립니다.

주: 일부 페이지는 다음과 같이 플래그 지정되어 있습니다.This page requires context.경고 즉, 이러한 페이지에는 페이지에서 컨텐츠를 올바르게 렌더링하기 위한 컨텍스트 변수가 필요하며 이러한 변수는 페이지 컨텍스트에서 누락되어 있습니다. 페이지 컨텍스트 변수를 추가하려면 페이지 컨텍스트 변수 구성을 참조하십시오.

페이지를 선택한 후 템플리트 변수를 추가하여 페이지 컨텐츠를 동적으로 만들 수 있습니다. 즉, 변수에 따라 사용자 정의된 컨텐츠를 사용하여 동일한 페이지를 여러 번 사용할 수 있습니다.
저장을 클릭하십시오.

예

다음 조회는 배송된 총 인바운드화물 출하문서 수와 배송이 늦은 총 화물출하문서 수를 검색합니다. 조회에 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
  }
}

다음 코드는 조회에서 사용할 변수를 정의하는 방법의 예입니다.

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

다음 코드는 쿼리에서 리턴되는 데이터의 예입니다. 이 예에서는 총 8개의 쉽먼트 중 두 개의 쉽먼트가 지연됩니다.

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

다음 코드에서 COMMON.SHIPMENT_STATUS.ON_TIME 는 그룹으로 추가됩니다. 정시 쉽먼트는 총 쉽먼트에서 지연 쉽먼트를 빼서 변환에서 계산됩니다.


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

변환에서 차트에 표시되는 데이터는 조회에서 리턴되는 데이터와 일치해야 합니다. 쿼리가 리턴하는 데이터에 대한 계산을 추가할 수 있습니다.

다음에 수행할 작업

대시보드 빌더를 사용하여 대시보드에 카드를 추가하십시오.