创建饼图

饼图卡显示数据组中的数据，这些数据可以绘制为一个圆圈，该圆圈被划分为每个扇区，每个扇区代表一个整体的比例。您可以使用饼图可视化来显示分类数据的比例。

关于本任务

饼图的剖析如下:

卡标题: 分配给卡的唯一标签或标题。
卡工具提示: 工具提示提供有关卡上显示的数据的额外详细信息。
标签: 单个类别的整体百分比值，例如 24% 或 76%。
页脚链接: 可单击的字段或带有标签的链接，例如， View all。

您可以使用卡构建器来创建饼图。

程序

从导航菜单中，单击卡构建器。
单击新建卡。

在常规选项卡上，定义卡:

为卡指定名称。
卡在卡库中由其名称引用。
选择卡类型。
选择 Chart 作为卡类型，选择 Pie作为变体。

在数据选项卡上，将数据添加到卡中:

添加 GraphQL 查询以检索数据。
单击添加并编写类似于示例中的查询的查询。有关更多信息，请参阅向卡添加查询。
定义在查询中使用的任何变量。
在 QUERY VARIABLES 字段中，使用类似于示例中的代码的格式来定义 JSON 格式的变量。
运行查询。
验证是否为查询返回了数据，类似于示例中返回的数据。
在变换选项卡上，添加代码以变换饼图上的可视化数据。
使用类似于示例的代码或使用缺省变换。
单击完成。
查询返回的数据将显示在图表上。
配置饼图的数据组。
在此示例中，提供了两个数据组: late和 onTime。选择要在饼图中显示的数据组。
可选: 覆盖标签和颜色。

在样式选项卡上，定义卡的样式:

在维中，增大卡的宽度和高度。
在标题中，修改图表标题。
打开图注，并在 UI 上设置其位置。
配置与图注和工具提示交互的行为。
展开页脚，并将页脚链接设置为开启并分配标签，然后输入页面标识。

您可以在字段中添加页面标识，也可以从库中选择页面。要选择页面，请单击从 libaray 中选择。或者，可以向页脚添加外部链接。单击时，此链接将在新选项卡中打开。

注: 某些页面被标记为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 个装运中，有 2 个装运延迟。

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

在变换中，图表上显示的数据必须与查询返回的数据匹配。您可以对查询返回的数据添加任何计算。

下一步

使用仪表板构建器将卡添加到仪表板。