Chart XY

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

• バー、ライン、散布図としてデータを表示します。
• 可視化されるプロパティ、これらのプロパティがどのように集約されるか（例：カウント、合計、平均）、およびプロパティがどのようにセグメントされるかを選択できます。
• より高度な集約タイプとチャートを表示するために、Function-backed レイヤーを使用できます。
• チャートのタイトル、軸、凡例、数値のフォーマットに関する表示オプションを設定できます。
• チャートでの選択と下流フィルタリングを有効にできます。

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

設定オプション

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

レイヤー設定オプション

レイヤーの設定は、Chart XY ウィジェットにデータを追加するために必要です。レイヤーには以下の設定オプションが用意されています。

• タイトル
  • 現在のレイヤーに設定パネル内でタイトルを設定します。
  • 注：このタイトルはモジュールユーザーには表示されず、ビルダーが複数のレイヤーを使用した複雑な Chart XY 設定を整理・管理するのに役立ちます。
• データ入力
  • このレイヤーの入力データを制御します。
  • オブジェクトセット オプションでは、Workshop オブジェクトセット変数を入力として使用できます。
  • Function aggregation オプションでは、2D Aggregationまたは3D Aggregation を返す関数を入力として使用できます。
    • 注：Function aggregation レイヤーは、以下のレイヤー設定オプションの一部のみが利用可能です。
  • Time series set オプションでは、Workshop の時系列セット変数を入力として使用できます。時系列セット変数の詳細については、Variables を参照してください。これにより、X 軸に時間範囲、Y 軸に変数の時系列値が設定された時系列チャートが設定されます。
• レイヤータイプ
  • 表示されるチャートのタイプを選択します。現在のオプションには、バーチャート、ラインチャート、および 散布図 が含まれます。データ入力が時系列セットの場合、Line Chart オプションのみがサポートされます。時系列セット変数の詳細については、Variables を参照してください。
• 領域オプション
  • ラインチャートのための3つの可視化オプションを提供します。
    • "線"（単純な線グラフを表示），
    • "領域"（線グラフをプロットし、各線の下の領域を塗りつぶす），
    • "積み上げ"（"領域"オプションに似ていますが、セグメント化されたチャートの値を互いに積み上げます）。
  • 領域オプションは、ラインチャートのみで利用可能です。
• ラベル
  • チャート上の値のラベルの表示を切り替えます。
  • このオプションは、現在、バーチャートとラインチャートで利用可能です。
• X 軸プロパティ
  • チャートにプロットされるプロパティタイプを決定します。
• バー / ライン / チャートシリーズ
  • シングル/マルチプルシリーズの使用
    • 選択した X軸プロパティ に対して、1つまたは複数のチャートシリーズをプロットできるようにします。
    • 例えば、"アラートタイプ"が X軸プロパティ として選択された場合、複数のシリーズでは、各 "アラートタイプ" のカウントと、各 "アラートタイプ" の "# of Hours Delayed" の合計をプロットできます。
  • シリーズ集約
    • チャートにプロットされる各値を生成するために使用される集約方法を決定します。
    • デフォルトでは、「カウント」に設定されています。
    • その他のオプションには、「平均」、「最小」、「最大」、「合計」、「おおよそのユニークカウント」が含まれます。
  • セグメント化
    • オプションです。
    • 二次プロパティタイプによって、各プロットされた値がセグメント化されるようになります。
    • 例えば、「アラートタイプ」が X軸プロパティ に選択され、「航空機タイプ」がバーチャートの セグメント化 オプションに選択された場合、各バーは、「アラートタイプ」ごとのオブジェクトのカウントを、「航空機タイプ」ごとにセグメント化して表示します。
  • null/欠損値の表示
    • ラインチャート のみ利用可能です。
    • null または欠損値がラインチャート上でどのように表示されるかを制御します。
    • オプションは、「ギャップ」（欠損値がプロットされた線の空のギャップとして表示される）、「無視」（欠損値が無視され、プロットされた線が代わりに前後の利用可能な値に接続される）、「ゼロ」（欠損値が「0」と同等の値として扱われる）です。
  • 表示の上書き
    • オプションです。
    • 現在のシリーズの凡例表示名を上書きします。
    • セグメント化されたチャートの場合、単一のセグメントの凡例表示名が上書きされます。
  • セグメント上書き
    • バーチャート のみ利用可能です。
    • 各バーチャートの値の表示方法を変更します。
    • オプションには、「積み上げ」、「パーセンテージ」、「グループ化」が含まれます。
• 選択をフィルターとして
  • オプションであり、オブジェクトセット バックアップチャートのみで利用可能です。
  • 設定されている場合、出力 オブジェクトセットフィルター 変数を介して、このチャートレイヤーの選択と下流ウィジェットフィルタリングが可能になります。
• レイヤーの削除
  • 現在のチャートレイヤーを削除することができます。
• シナリオ
  • シナリオとの比較
    • この切り替えを有効にすると、シナリオ配列変数を選択してデータを比較できます。これにより、表のデータをチャートの "セグメント化" 軸を使用してシナリオ配列内のシナリオからの値と比較します。
    • このオプションが有効になっている場合、他のプロパティでセグメント化することはできません。
  • シナリオに関する詳細は、Scenarios documentation を参照してください。

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

上記で説明したレイヤーの設定オプションに加えて、Chart XY 設定パネルにはいくつかのチャート全体の設定オプションが含まれています。

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

関数集約（Function-backed レイヤー）

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

以下は、1つの時系列を別の時系列で割ったものをチャートするために、TwoDimensionalAggregation を返す完全な例です。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation,
         IRange, Timestamp } from "@foundry/functions-api";
// @foundry/functions-apiからFunction, TwoDimensionalAggregation, ThreeDimensionalAggregation,
// IRange, Timestampをインポートします。

import { ObjectSet, MyObjectType } from "@foundry/ontology-api"
// @foundry/ontology-apiからObjectSet, MyObjectTypeをインポートします。

export class TimeseriesAggregations {
// TimeseriesAggregationsクラスをエクスポートします。

    @Function()
    // 関数デコレータを使用します。
    public async percentOfTotal(objects:ObjectSet<MyObjectType>):
                                Promise<TwoDimensionalAggregation<IRange<Timestamp>>> {
        // 非同期関数percentOfTotalを定義します。この関数はオブジェクトセットをパラメータとして受け取り、
        // 2次元集約(IRange<Timestamp>)のPromiseを返します。
        const numerators = await objects.groupBy(e => e.date.byDays())
                                        .sum(e => e.value);
        // numerators定数には、objectsを日付ごとにグループ化し、それぞれのグループの値の合計を求める結果が格納されます。
        const denominators = await objects.groupBy(e => e.date.byDays())
                                          .sum(e => e.total);
        // denominators定数には、objectsを日付ごとにグループ化し、それぞれのグループの合計を求める結果が格納されます。

        return this.divide(numerators, denominators);
        // divideメソッドを呼び出し、その結果を返します。
    }

    private divide(numerators:TwoDimensionalAggregation<IRange<Timestamp>>,
                              denominators: TwoDimensionalAggregation<IRange<Timestamp>>):
                              TwoDimensionalAggregation<IRange<Timestamp>> {
        // divideメソッドを定義します。このメソッドは2つの2次元集約をパラメータとして受け取り、
        // 2次元集約を返します。

        const percentage = numerators.buckets.map((bucket, i) => {
           const numerator = bucket.value;
           // 分子をbucket.valueで取得します。
           const denominator = denominators.buckets[i].value;
           // 分母をdenominators.buckets[i].valueで取得します。
            if (denominator == 0) {
                return { key: bucket.key, value: 0 };
                // 分母が0の場合は、値を0にして返します。
            }
            return { key: bucket.key, value: numerator / denominator }
            // 分母が0でない場合は、分子を分母で割った値を返します。
        });

        return { buckets: percentage };
        // 結果をbucketsとして返します。
    }
}

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

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// "@foundry/functions-api"からいくつかのクラスと関数をインポートします
import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation,
         IRange, Timestamp } from "@foundry/functions-api";

// "@foundry/ontology-api"からObjectSetとMyObjectTypeをインポートします
import { ObjectSet, MyObjectType } from "@foundry/ontology-api"

// TimeseriesAggregationsクラスをエクスポートします
export class TimeseriesAggregations {

    // Functionデコレータを使用して、percentOfTotalSegmentedメソッドを非同期関数として定義します
    // この関数は、MyObjectTypeのオブジェクトのセットを受け取り、ThreeDimensionalAggregationを返します
    @Function()
    public async percentOfTotalSegmented(objects:ObjectSet<MyObjectType>):
                                         Promise<ThreeDimensionalAggregation<IRange<Timestamp>, string>> {
        // numeratorを計算します（各日付とgroupIdによってオブジェクトをグループ化し、各グループの値の合計を求めます）
        const numerators = await objects.groupBy(e => e.date.byDays())
                                        .segmentBy(e => e.groupId.topValues())
                                        .sum(e => e.value);
        // denominatorを計算します（各日付とgroupIdによってオブジェクトをグループ化し、各グループのtotalの合計を求めます）
        const denominators = await objects.groupBy(e => e.date.byDays())
                                          .segmentBy(e => e.groupId.topValues())
                                          .sum(e => e.total);

        // numeratorとdenominatorを引数に、divideThreeDimensional関数を呼び出し、その結果を返します
        return this.divideThreeDimensional(numerators, denominators);
    }

    // divideThreeDimensionalメソッドは、2つのThreeDimensionalAggregationを引数に取り、その割り算の結果をThreeDimensionalAggregationとして返します
    private divideThreeDimensional(numerators:ThreeDimensionalAggregation<IRange<Timestamp>, string>,
                             denominators: ThreeDimensionalAggregation<IRange<Timestamp>, string>):
                             ThreeDimensionalAggregation<IRange<Timestamp>, string> {

        var percentage = numerators.buckets; // numerators.bucketsをコピーします
        // numerators.bucketsの全ての要素に対してループを行います
        for (let i = 0; i < numerators.buckets.length; i++) {
            // 各バケットの全ての値に対してループを行います
            for (let j = 0; j < numerators.buckets[i].value.length; j++) {
                // 各値をそのバケットの対応するdenominatorで割り、その結果をpercentageに保存します
                percentage[i].value[j].value = numerators.buckets[i].value[j].value /
                                               denominators.buckets[i].value[j].value;
            }
        }

        // 計算したpercentageを含むThreeDimensionalAggregationを返します
        return { buckets: percentage };
    }
}

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