创建简单条形图

简单条形图显示数据组中的数据，这些数据组可以以等宽的条形和表示为数量量级的可变高度的条形的形式绘制。您可以使用简单的条形图来根据统计图可视化数量比较。

关于本任务

简单条形图的剖析如下:

卡标题: 分配给卡的唯一标签或标题。
卡工具提示: 工具提示提供有关卡上显示的数据的额外详细信息。
阈值: 图表上的一条线，上面或下面都是重要值。
Y 轴轴名: 分配给图表垂直轴的标签。
X 轴轴名: 分配给图表水平轴的标签。
图例: 数据组的标签。
页脚链接: 可单击的字段或带有标签的链接，例如， View all。

您可以使用卡构建器来创建简单的条形图。

程序

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

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

为卡分配名称。

卡在卡库中由其名称引用。
选择卡类型。

选择 Chart 作为卡类型，选择 Simple bar 作为变体。

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

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

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

在维中，增大卡的宽度和高度。
在标题中，添加卡标题并打开描述工具提示。
在轴中，设置 X 轴的刻度和使用的标签。您可以为 X 轴设置阈值。
在轴中，设置 Y 轴的刻度和使用的标签。您可以为 Y 轴设置阈值。
在图注中，打开图注，并在 UI 上设置其位置。
在行为中，配置与图注和工具提示交互的行为。
展开页脚，并将页脚链接设置为开启并分配标签，然后输入页面标识。

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

注: 某些页面被标记为This page requires context.警告。这意味着这些页面需要上下文变量才能在页面上正确呈现内容，而这些变量在页面上下文中缺失。要添加页面上下文变量，请参阅配置页面上下文变量。

选择页面后，可以添加模板变量以使页面内容成为动态内容。这意味着您可以根据变量多次将同一页面与定制内容配合使用。
单击保存。

示例

以下查询从业务对象服务检索数据，并返回按供应商分组的过去到期订单行的列表。查询将租户标识作为输入参数，并允许按位置，类别和供应商进行过滤。该查询还包含一个聚集参数，用于按供应商对订单行进行分组并合计订单行的总值。此查询将返回过去到期订单行的总值最高的前五个供应商。

query pastDueOrderlineBySupplier($tenantId: String!, $locationFilter: BooleanExp = {CONSTANT_VALUE: true}, $categoryFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  pastDueOrderLineBySupplierChar: businessObjects(
    simpleFilter: {type: OrderLine, tenantId: $tenantId}
    hint: {viewId: "graph"}
    advancedFilter: {AND: [{GREATER_THAN: [{SELECT: "order.plannedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {EQUALS: [{SELECT: "order.orderType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, $locationFilter, $categoryFilter, $supplierFilter]}
    aggregationParams: {paginationParams: {first: 5, sort: [{fieldPath: "totalOrderLinesBySupplier.sum", order: DESC}]}, dimension: {fieldPath: "order.vendor.name", type: STRING}, reduce: {expression: {fieldPath: "value", operator: SUM, type: INT}, output: {resultAlias: "totalOrderLinesBySupplier", type: INT}}}
  ) {
    totalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        numValue
      }
    }
    edges {
      cursor
      object {
        ... on OrderLine {
          valueCurrency
        }
      }
    }
  }
}

以下代码是如何定义要在查询中使用的变量的示例。

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

在以下示例中，供应商将返回过去的到期订单行值。

{
	"data": {
		"pastDueOrderLineBySupplierChar": {
			"totalCount": 19,
			"aggregationResults": [
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "McGrey Electrical",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 604160,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Total Source Extrusion Corporation",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 226800,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "F & M Metals",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 125900,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "LightLens Industries",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 107920,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Alumi-lux Metal Products",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 59605,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				}
			],
			"edges": [
				{
					"cursor": "NTQ1NDE2NA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ5OA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NTc3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NDIzOQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				}
			],
			"__typename": "BusinessObjectsCursor"
		}
	},
	"loading": false,
	"networkStatus": 7
}

以下代码是如何为卡创建变换的示例。


{
	"totalCount": "{{ this.data.pastDueOrderLineBySupplierChar.totalCount }}",
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"currency": [
		{
			"{{#if this.data.pastDueOrderLineBySupplierChar.edges.length > 0}}": "{{this.data.pastDueOrderLineBySupplierChar.edges[0].object.valueCurrency}}"
		},
		{
			"{{#else}}": ""
		}
	],
	"results": {
		"{{#each this.data.pastDueOrderLineBySupplierChar.aggregationResults}}": {
			"group": "{{dimensionValues[0].value}}",
			"value": "{{values[0].numValue}}"
		}
	}
}

在变换中，图表的每个轴上显示的数据必须与查询返回的数据匹配。此属性在 "数据组" 部分中选择。可以对返回的数据进行计算。在此示例中，会将McGrey Electrical 添加到查询返回的组。

下一步

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