Custom Graph リファレンス

Custom Graph で利用可能な Geometry と Statistics の一覧です。各項目の詳細は、レイヤー設定内のヘルプボタン（?）で確認できます。

テーブル内の Description はアプリ UI の表記と一致させるため英語で記載しています。

Geometry（形状）

Geometry と aesthetic の互換性

各 Geometry は特定の aesthetic（位置・色・サイズなどの視覚マッピング）のみを受け付けます。対応していない aesthetic を指定しても効果はありません。

R = required（必須）, ○ = optional（指定時に追加の動作が発生）, • = supported（対応）

• Required の aesthetic はカラムへのマッピングか Statistics による供給が必要です。
• color と fill の違い: Bar と Tile は塗りつぶしに fill を使います（color ではありません）。Area は両方を受け付けます — color は輪郭線、fill は塗りつぶしです。Ribbon は輪郭線を描画せず、color が塗りつぶし色を決めます。Ribbon の fill は threshold カラースケールを使う場合にのみ参照されます。Crossbar と Box Plot は矩形の塗りつぶしに fill を、線の色（Box Plot では箱の枠線・ひげ・中央値線・ひげの外の点）に color を使います。
• stroke: Point のみが対応しています。ポイントの輪郭色を設定します。
• shape: Box Plot では、割り当てた列の水準ごとに箱が分割され（color や fill と同様）、ひげの外の点が水準ごとに異なるマーカー形状で描かれます。size はひげの外の点にのみ適用されます。
• ymin / ymax: Line は両方が存在するとインターバルバンドを描画します。Ribbon・Errorbar・Crossbar では必須です。
• label: Text ではカラムへのマッピングが必須です。Label では aes.label か geom.defaults.labelContent のどちらかが必要です。

Geometry と position の互換性

各 Geometry が受け付ける position（位置調整）は異なります。各 position type の意味は Position を参照してください。表にない position type を tabs.addGraphLayer / tabs.updateGraphLayer で指定すると INVALID_INPUT エラーになります。position を省略した場合のデフォルトは bar が stack、それ以外の geom が identity です。

Statistics（統計変換）

Statistics のパラメータ

各 Statistic は tabs.addGraphLayer / tabs.updateGraphLayer の stats 配列に params オブジェクトを渡します。以下の表は各 Statistic のパラメータ名、TypeScript 型、デフォルト値、説明の一覧です。

await window.midas.tabs.addGraphLayer('tab_001', {
  geom: { type: 'point' },
  stats: [
    { type: 'smooth', params: { method: 'loess', span: 0.5, interval: 'confidence' } }
  ],
  aes: { x: 'weight', y: 'mpg' }
});

型の記法: A | B は A か B のどちらかを指定、T[] は T の配列、フィールド名末尾の ?（例: p?）は省略可能を表します。各 Statistic の前提・限界・ユースケースの詳細は Custom Graph を参照してください。

Identity (No transformation)

No parameters.

Bin (Histogram)

Time Bin (Datetime Histogram)

Smooth (Regression)

Count (Aggregation)

No parameters.

Density (KDE)

Summary (Aggregation)

Boxplot (Quartiles + Whiskers)

Survival (Kaplan-Meier)

X Mean

X Median

Y Mean

Cumulative Sum (Pareto)

Sort (Pareto)

ECDF (Empirical CDF)

No parameters.

QQ (Normal Q-Q Plot)

Transform (Linear)

Palettes（パレット）

layers[].scales の color / fill aesthetic で paletteId に指定できる値の一覧です。API での設定方法は Agent API を参照してください。

Categorical

カテゴリカル変数の色分けに使います。scaleType: 'categorical' で指定します。

デフォルトは midas-default です。

Sequential

連続変数や順序尺度の変数に使います。scaleType: 'sequential' で指定します。

scaleType: 'categorical' と 'threshold' でも使用できます。カテゴリ数または閾値で区切られた領域数ぶんの色をパレット全域から等間隔にサンプリングします。

デフォルトは blues です。Viridis、Plasma、Inferno、Magma は知覚的に均一で色覚多様性に配慮したパレットです。

Diverging

中心値からの乖離を両方向に表す変数に使います。scaleType: 'diverging' で指定します。

scaleType: 'threshold' でも使用できます。閾値で区切られた領域数ぶんの色をパレット全域から等間隔にサンプリングします。

デフォルトは rdbu です。

scaleType と paletteId の互換性

threshold では thresholdColors で色を直接指定することもできます。thresholdColors を指定するとそれが優先され、省略すると paletteId のパレット全域から閾値で区切られた領域数ぶんの色を等間隔にサンプリングします。

Graph Builder の UI で scaleType を切り替えると、非互換になったパレットはその scaleType の既定パレットに自動でリセットされ、グラフはそのまま描画されます。API で非互換の paletteId を直接指定した場合は、描画時にエラーになりグラフが表示されません。

この互換性の判定には実効のスケール種別を使います。数値でない列に sequential / diverging を指定した場合、実効種別は categorical になるため、指定した種別の上では適合するパレットでもエラーになることがあります。エラーメッセージには実効種別へ解決された経緯が示されます。

Geometry の固定設定

aesthetic はカラムを視覚属性にマッピングします。データに依存しない固定の色・サイズ・不透明度は aes ではなく geom.defaults に置きます。Graph Builder の UI では、これらはレイヤーの Geometry セクションで設定します。

• 固定色: 線・点・文字の色は geom.defaults の color、bar・area・tile・ribbon・crossbar・boxplot の塗りつぶし色は geom.defaults の fill に CSS カラー文字列を指定します。tile の枠線色は geom.defaults の stroke です。crossbar と boxplot の線色（枠線・中心線・ひげ）も stroke で指定します（geom.defaults に color キーはありません）
• 固定サイズ: geom.defaults の size（point）、strokeWidth（line・step）、fontSize（text・label）に指定します
• 固定不透明度: geom.defaults の alpha に指定します。0 が完全透明、1 が完全不透明です

await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'point', defaults: { color: '#3366CC', size: 8, alpha: 0.5 } },
  aes: { x: 'weight', y: 'height' }
});

固定値を aes に渡すと（例: aes.color: { fixedColor: ... } や aes.size: 8）INVALID_INPUT エラーになります。aes.* はカラム名のみを受け付けます。

複数レイヤーに異なる固定色を設定する

各系列を個別のレイヤーとして追加し、それぞれに geom.defaults.color を設定します。

// レイヤー 1: 実測値（青）
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line', defaults: { color: '#3366CC' } },
  aes: { x: 'date', y: 'actual' }
});

// レイヤー 2: 予測値（赤）
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line', defaults: { color: '#CC3333' } },
  aes: { x: 'date', y: 'predicted' }
});

代替手段: カテゴリカル色分け

データが long 形式（1行1観測値、グループ列あり）の場合、固定色の代わりにグループ列を color にマッピングします。パレットが各グループに自動で色を割り当てます。

// long 形式: 各行に "series" 列（"actual" や "predicted"）がある
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'value', color: 'series' }
});

系列数が動的に変わる場合や、複数グラフでパレット色をそろえたい場合は、この方法を使います。

Statistics と Label の連携

レイヤーで Statistics（Count、Summary、Bin 等）を使用すると、元のカラム値が集約結果に置き換わります。aes.label のカラムマッピングでは変換後のデータから元の値を参照できません。集約値をラベルとして表示するには、aes.label の代わりに geom.defaults.labelContent を設定します。

labelContent は $ プレフィックス付きの stat 出力変数を参照します。

// Summary の平均値をラベルとして表示する
await window.midas.tabs.addGraphLayer(tabId, {
  geom: {
    type: 'label',
    defaults: {
      labelContent: { field: '$y', format: '.1f' }
    }
  },
  stats: [{ type: 'summary', params: { outputs: [{ fun: 'mean', to: 'y' }] } }],
  aes: { x: 'category', y: 'value' }
});

labelContent オブジェクトのプロパティ:

座標系

座標系はグラフレベルの設定で、tabs.configureGraph または reports.addGraph の coordinates フィールドに指定します。

• 'cartesian'（デフォルト）— 標準的な直交座標系
• 'flipped' — X 軸と Y 軸を入れ替えます。カテゴリラベルが長い横棒グラフで読みやすくなります

GUI では Graph Builder の Coordinate System セクションに対応します。表示例は Custom Graph: 軸の入れ替え を参照してください。

flipped 座標系での scales.x / scales.y

flipped 座標系では aes.y のデータが物理 X 軸（横）に、aes.x のデータが物理 Y 軸（縦）に描画されます。scales.x / scales.y の設定は、項目によって参照する軸が異なります。

• スケール種別と tick の設定（type、domain、ticks、zoomEnabled）は物理的な画面軸に適用されます。flipped でも scales.x が横軸、scales.y が縦軸を制御します
• title はデータの軸に追従します。scales.x.title は aes.x のデータの軸（flipped では縦軸）に、scales.y.title は aes.y のデータの軸（flipped では横軸）に表示されます

// 横棒グラフ: aes.x にカテゴリ、aes.y に数値をマッピングした場合
await window.midas.tabs.configureGraph(tabId, {
  coordinates: 'flipped',
  scales: {
    x: { title: 'Product' },      // aes.x の軸 — flipped では縦軸に表示
    y: { title: 'Sales (USD)' }   // aes.y の軸 — flipped では横軸に表示
  }
});

副 Y 軸（scales.y2）は flipped 座標系では無効になります。

See also

• 高度なグラフ作成 - Custom Graph の使い方とチュートリアル
• Graph Builder タブ - Graph Builder の基本操作

このページの Markdown 版もあります。