Chart XY

Chart XY ウィジェットが希望する機能やフォーマットを実現できない場合は、Vega Chart ウィジェットの使用を検討してください。

Chart XY ウィジェットは、オブジェクトをインタラクティブなチャートとして視覚化するために使用されます。モジュールビルダーは、Chart XY ウィジェットを設定することで以下のことができます：

データを棒グラフ、折れ線グラフ、散布図として表示する。
表示するプロパティやその集計方法（例：カウント、合計、平均）を選択し、プロパティのセグメント化の有無を設定する。
関数バックのレイヤーを使用して、より高度な集計タイプやチャートを表示する。
チャートのタイトル、軸、凡例、数値フォーマットの表示オプションを設定する。
チャート上で選択と下流のフィルタリングを有効にする。

以下のスクリーンショットは、Flight Alerts データを表示する3つの設定された Chart XY ウィジェットの例を示しています：

設定オプション

以下の画像では、青い矢印の左側に新しく追加された（まだ設定されていない）Chart XY ウィジェットとその初期設定パネルが表示されています。青い矢印の右側には、Flight Alerts のバックオブジェクトセットが既に入力されている個々の レイヤー 設定パネルが表示されています：

レイヤー設定オプション

レイヤーを設定することで、Chart XY ウィジェットにデータを追加することができます。レイヤーには以下の設定オプションがあります：

タイトル
- 設定パネル内の現在のレイヤーにタイトルを設定します。
- 注：このタイトルはモジュールユーザーには表示されず、複数のレイヤーを使用する複雑な Chart XY 設定を整理および管理するためにビルダーが使用します。
データ入力
- このレイヤーの入力データを制御します。
- オブジェクトセット オプションを使用すると、ワークショップのオブジェクトセット変数を入力として使用できます。
- 関数集計 オプションを使用すると、2D 集計または 3D 集計を返す関数を入力として使用できます。
  - 注：関数集計レイヤーでは、以下のレイヤー設定オプションのサブセットのみが利用可能です。
- タイムシリーズセット オプションを使用すると、ワークショップのタイムシリーズセット変数を入力として使用できます。タイムシリーズセット変数の詳細については変数を参照してください。これにより、X 軸にタイムレンジ、Y 軸に変数のタイムシリーズ値を持つタイムシリーズチャートが設定されます。
レイヤータイプ
- 表示されるチャートのタイプを選択します。現在のオプションには 棒グラフ、折れ線グラフ、散布図 があります。データ入力がタイムシリーズセットの場合、折れ線グラフオプションのみがサポートされます。タイムシリーズセット変数の詳細については変数を参照してください。
エリアオプション
- 折れ線グラフに対して3つの視覚化オプションを提供します：
  - 「ライン」（単純な折れ線グラフを表示）
  - 「エリア」（折れ線グラフをプロットし、各線の下のエリアを塗りつぶす）
  - 「積み上げ」（「エリア」オプションに似ていますが、セグメント化されたチャートの値を互いに積み上げます）
- エリアオプションは折れ線グラフのみに利用可能です。
ラベル
- チャート上の値ラベルの表示を切り替えます。
- このオプションは現在、棒グラフと折れ線グラフに利用可能です。
X 軸プロパティ
- チャートにプロットされるプロパティタイプを決定します。
棒 / ライン / チャートシリーズ
- 単一 / 複数シリーズの使用
  - 選択された X 軸プロパティ に対して一つまたは複数のチャートシリーズをプロットすることを許可します。
  - 例えば、「アラートタイプ」が X 軸プロパティ として選択された場合、複数シリーズを使用すると、各「アラートタイプ」のカウントと各「アラートタイプ」の「遅延時間数」の合計をプロットすることができます。
- シリーズ集計
  - チャートにプロットされる各値を生成するために使用される集計方法を決定します。
  - デフォルトでは「カウント」に設定されています。
  - 他のオプションには：「平均」、「最小」、「最大」、「合計」、「概算ユニークカウント」があります。
- セグメント化
  - オプション。
  - 各プロット値を二次プロパティタイプでセグメント化することを可能にします。
  - 例えば、「アラートタイプ」が X 軸プロパティ として選択され、「航空機タイプ」が棒グラフの セグメント化 オプションとして選択された場合、各棒は各「アラートタイプ」のオブジェクトのカウントを各「航空機タイプ」でセグメント化して表示します。
- null/欠損値の表示
  - 折れ線グラフ のみ利用可能。
  - 折れ線グラフで null または欠損値を表示する方法を制御します。
  - オプションは「ギャップ」（欠損値がプロットされた線の空白として表示される）、「無視」（欠損値が無視され、プロットされた線が前後の利用可能な値を接続する）、「ゼロ」（欠損値が「0」と等価と見なされる）です。
- 表示オーバーライド
  - オプション。
  - 現在のシリーズの凡例表示名をオーバーライドします。
  - セグメント化されたチャートでは、単一のセグメントの凡例表示名をオーバーライドします。
- セグメントオーバーライド
  - 棒グラフ のみ利用可能。
  - 各棒グラフ値の表示方法を変更します。
  - オプションには：「積み上げ」、「パーセンテージ」、「グループ化」があります。
フィルタとしての選択
- オプションであり、オブジェクトセット バックのチャートのみで利用可能。
- 設定すると、このチャートレイヤーで選択と下流のウィジェットフィルタリングを オブジェクトセットフィルタ 変数を介して有効にします。
レイヤー削除
- 現在のチャートレイヤーを削除します。
シナリオ
- シナリオと比較
  - このトグルを有効にして、データを比較するシナリオ配列変数を選択します。これはチャートの「セグメント化」軸を使用してシナリオ配列のシナリオの値と表のデータを比較します。
  - このオプションを有効にすると、他のプロパティでセグメント化することはできません。
- シナリオの詳細については、シナリオのドキュメントを参照してください。

チャート全体の設定オプション

上記のレイヤー設定オプションに加えて、主な Chart XY 設定パネルにはいくつかのチャート全体の設定オプションがあります：

カテゴリ軸
- タイトルを表示
  - 有効にすると、カテゴリ軸のタイトルが表示され、このタイトルをオーバーライドすることもできます。
  - デフォルトでは、このタイトルはチャートのシリーズ内でプロットされたプロパティタイプを表示します。
- 数値フォーマットを有効にする
  - 有効にすると、カテゴリ軸キーに表示される数値の設定オプションを提供します。
  - 設定オプションには、数値グループ化、最小/最大小数表示、科学的記数法などがあります。
- ソート順
  - 各チャート値が表示される順序を制御します。
  - デフォルトでは、カテゴリキーを A から Z までアルファベット順にソートします。
値軸
- 複数の値軸を使用
  - 複数のチャートシリーズが設定されている場合にのみ利用可能で、シリーズごとに値軸を設定することができます。これは、チャート上の異なるシリーズが大幅に異なる値スケールを持つ場合に役立ちます。
- タイトルを表示
  - 有効にすると、値軸のタイトルが表示され、このタイトルをオーバーライドすることもできます。
  - デフォルトでは、このタイトルはチャートのシリーズ内で使用される集計タイプを表示します。
- 数値フォーマットを有効にする
  - 有効にすると、値軸に表示される数値の設定オプションを提供します。
  - 設定オプションには、数値グループ化、最小/最大小数表示、科学的記数法などがあります。
- スケールタイプ
  - 値軸のスケールを「線形」（デフォルト）または「対数」に設定できます。
- 最小限界
  - デフォルトでは、表示されるチャート値に基づいて「最小限界を自動計算」に設定されています。
  - 「最小」に切り替えた場合、モジュールビルダーは値軸の最小値表示を制御できます。
- 最大限界
  - デフォルトでは、表示されるチャート値に基づいて「最大限界を自動計算」に設定されています。
  - 「最大」に切り替えた場合、モジュールビルダーは値軸の最大値表示を制御できます。
凡例
- 凡例を表示
  - チャートシリーズのタイトルとシリーズの色の凡例表示を切り替えます。
- 位置オプション
  - 「凡例を表示」が有効な場合、チャート内の凡例の位置を制御します。
棒の向き
- 水平/垂直の切り替え
  - チャートの向きを制御します。
  - 棒グラフ では「水平」がデフォルトです。
  - 折れ線グラフ または 散布図 では「垂直」のみが許可されます。

関数集計（関数バックのレイヤー）

関数バックのレイヤーを設定するには、TwoDimensionalAggregation または ThreeDimensionalAggregation を返す関数を記述する必要があります。

以下は、あるタイムシリーズを別のタイムシリーズで割るための TwoDimensionalAggregation を返す完全な例です：

Copied!1import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation,
2         IRange, Timestamp } from "@foundry/functions-api";
3import { ObjectSet, MyObjectType } from "@foundry/ontology-api"
4
5export class TimeseriesAggregations {
6
7    @Function()
8    public async percentOfTotal(objects:ObjectSet<MyObjectType>):
9                                Promise<TwoDimensionalAggregation<IRange<Timestamp>>> {
10        const numerators = await objects.groupBy(e => e.date.byDays())
11                                        .sum(e => e.value);
12        const denominators = await objects.groupBy(e => e.date.byDays())
13                                          .sum(e => e.total);
14
15        return this.divide(numerators, denominators);
16    }
17
18    private divide(numerators:TwoDimensionalAggregation<IRange<Timestamp>>,
19                              denominators: TwoDimensionalAggregation<IRange<Timestamp>>):
20                              TwoDimensionalAggregation<IRange<Timestamp>> {
21
22        const percentage = numerators.buckets.map((bucket, i) => {
23           const numerator = bucket.value;
24           const denominator = denominators.buckets[i].value;
25            if (denominator == 0) {
26                return { key: bucket.key, value: 0 };
27            }
28            return { key: bucket.key, value: numerator / denominator }
29        });
30
31        return { buckets: percentage };
32    }
33}

以下は、segmentBy() で返される各値のための別々のシリーズをチャートする ThreeDimensionalAggregation を返す完全な例です：

Copied!1import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation,
2         IRange, Timestamp } from "@foundry/functions-api";
3import { ObjectSet, MyObjectType } from "@foundry/ontology-api"
4
5export class TimeseriesAggregations {
6
7    @Function()
8    public async percentOfTotalSegmented(objects:ObjectSet<MyObjectType>):
9                                         Promise<ThreeDimensionalAggregation<IRange<Timestamp>, string>> {
10        const numerators = await objects.groupBy(e => e.date.byDays())
11                                        .segmentBy(e => e.groupId.topValues())
12                                        .sum(e => e.value);
13        const denominators = await objects.groupBy(e => e.date.byDays())
14                                          .segmentBy(e => e.groupId.topValues())
15                                          .sum(e => e.total);
16
17        return this.divideThreeDimensional(numerators, denominators);
18    }
19
20    private divideThreeDimensional(numerators:ThreeDimensionalAggregation<IRange<Timestamp>, string>,
21                             denominators: ThreeDimensionalAggregation<IRange<Timestamp>, string>):
22                             ThreeDimensionalAggregation<IRange<Timestamp>, string> {
23
24        var percentage = numerators.buckets; //copy
25        for (let i = 0; i < numerators.buckets.length; i++) {
26            for (let j = 0; j < numerators.buckets[i].value.length; j++) {
27                percentage[i].value[j].value = numerators.buckets[i].value[j].value /
28                                               denominators.buckets[i].value[j].value;
29            }
30        }
31
32        return { buckets: percentage };
33    }
34}

詳細な例については、オブジェクトセット集計とカスタム集計の作成に関する関数のドキュメントを参照してください。

←

PREVIOUSVisualization widgets

NEXTVega Chart

→