円グラフの作成

円グラフ・カードには、データ・グループ内のデータが表示されます。データ・グループは、それぞれが全体の比率を表すセクターに分割された円としてプロットできます。円グラフの視覚化を使用して、カテゴリー・データの比率を表示できます。

このタスクについて

円グラフの構造は、以下のとおりです。

カードのタイトル: カードに割り当てられている固有のラベルまたは見出し。
カードのツールチップ: ツールチップには、カードに表示されるデータに関する追加の詳細が示されます。
ラベル: 個々のカテゴリーの全体に対するパーセンテージ値。例えば、 24% や 76%など。
フッター・リンク: クリック可能なフィールド、またはラベル付きのリンク (例: View all)。

カード・ビルダーを使用して、円グラフを作成できます。

手順

ナビゲーション・メニューから、「カード・ビルダー」をクリックします。
「新規カード」をクリックします。

「一般」タブで、カードを定義します。

カードに名前を割り当てます。
カードは、カード・ライブラリー内でその名前によって参照されます。
カード・タイプを選択します。
カードのタイプとして Chart を選択し、バリアントとして Pieを選択します。

「データ」タブで、カードにデータを追加します。

データを取得するための GraphQL 照会を追加します。
「追加」をクリックし、例のような照会を作成します。詳しくは、カードへの照会の追加を参照してください。
照会で使用する変数を定義します。
QUERY VARIABLES フィールドで、例のコードに似た形式を使用して、JSON 形式で変数を定義します。
照会を実行します。
例で返されるデータと同様に、照会に対してデータが返されることを確認します。
「変換」タブで、円グラフの視覚化のためにデータを変換するコードを追加します。
例のようなコードを使用するか、デフォルト変換を使用します。
「完了」をクリックします。
照会によって返されたデータがグラフに表示されます。
円グラフのデータ・グループを構成します。
この例では、 lateと onTimeの 2 つのデータ・グループが使用可能です。円グラフに表示するデータ・グループを選択します。
オプション: ラベルと色をオーバーライドします。

「スタイル」タブで、カードのスタイルを定義します。

「ディメンション」で、カードの幅と高さを大きくします。
「ヘッダー」で、グラフのタイトルを変更します。
凡例をオンにし、その位置を UI に設定します。
凡例およびツールチップとの対話の動作を構成します。
「フッター」を展開し、「フッター・リンク」をオンに設定してラベルを割り当て、ページ ID を入力します。

フィールドにページ ID を追加することも、ライブラリーからページを選択することもできます。ページを選択するには、「Select from 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}}"
		}
	]
}

変換では、グラフに表示されるデータは、照会によって返されるデータと一致する必要があります。クエリーが返すデータに対して任意の計算を追加できます。

次のタスク

ダッシュボード・ビルダーを使用して、ダッシュボードにカードを追加します。