注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
Chart XY ウィジェットが希望する機能やフォーマットを実現できない場合は、Vega Chart ウィジェットの使用を検討してください。
Chart XY ウィジェットは、オブジェクトをインタラクティブなチャートとして視覚化するために使用されます。モジュールビルダーは、Chart XY ウィジェットを設定することで以下のことができます:
以下のスクリーンショットは、Flight Alerts
データを表示する3つの設定された Chart XY ウィジェットの例を示しています:
以下の画像では、青い矢印の左側に新しく追加された(まだ設定されていない)Chart XY ウィジェットとその初期設定パネルが表示されています。青い矢印の右側には、Flight Alerts
のバックオブジェクトセットが既に入力されている個々の レイヤー 設定パネルが表示されています:
レイヤーを設定することで、Chart XY ウィジェットにデータを追加することができます。レイヤーには以下の設定オプションがあります:
上記のレイヤー設定オプションに加えて、主な Chart XY 設定パネルにはいくつかのチャート全体の設定オプションがあります:
関数バックのレイヤーを設定するには、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}
詳細な例については、オブジェクトセット集計 と カスタム集計の作成 に関する関数のドキュメントを参照してください。