Sankey

エンコーディングマッピング

サンキー図は次のビジュアルチャネルをサポートします:

source: 始点チャネル。複数の次元をサポートします

target: 終点チャネル。複数の次元をサポートします

color: 色チャネル。複数の次元をサポートします

size: サイズチャネル。1 つの指標をサポートします

label: ラベルチャネル。複数の次元と複数の指標をサポートします

tooltip: ツールチップチャネル。複数の次元と複数の指標をサポートします

説明

サンキー図は source から target への流向関係を表示し、リンクの幅で流量の大きさを表します

適用シナリオ:

- 通常の node-link 構造の流向関係を表示する場合

- 複数の source 次元と複数の target 次元を連結した後の経路遷移を表示する場合

Warning

データ要件:

- source にマッピングできる source 次元またはデフォルト次元が少なくとも 1 つ必要です

- target 次元が少なくとも 1 つ必要です

- 流量の大きさをマッピングするために少なくとも 1 つの数値フィールド（指標）が必要です

- advanced pipeline では tidyData を通常の sankey が消費できる source / target / value 構造へ変換する必要があります

chartType

Type: "sankey"

説明

サンキー図

サンキー図。通常の source-target 流向関係と流量の大きさを表示します

例 'sankey'

dataset

Type: Record[]

説明

データセット

TidyData 仕様に準拠し、集計済みのデータセットです。グラフのデータソースと構造を定義します

例 [{fromRegion: '華北', toRegion: '華東', value: 30}]

dimensions

Type: SankeyDimension[] | undefined

説明

次元

次元設定。source / target ノード構造を定義するために使用し、source / target / color / detail / label / tooltip / row / column チャネルをサポートします

例 [{id: 'fromRegion', alias: '出発地域'}, {id: 'toRegion', alias: '到着地域', encoding: 'target'}]

alias

Type: string | undefined

説明

次元の別名

timeFormat

Type: TimeFormat | undefined

説明

次元の日付フォーマット設定

type

説明

時間粒度。日付の表示精度を決定します

encoding

説明

次元をマッピングするチャネル

- source: 複数の次元を source チャネルへマッピングできます。advanced 段階で上流ノードパスとして連結されます

- target: 複数の次元を target チャネルへマッピングできます。advanced 段階で下流ノードパスとして連結されます

- color: 複数の次元を色チャネルへマッピングできます。sankey の色分類キーを生成するために使用します

- detail: 複数の次元を詳細チャネルへマッピングできます

- label: 複数の次元をラベルチャネルへマッピングできます

- tooltip: 複数の次元をツールチップチャネルへマッピングできます

- row: 複数の次元を行チャネルへマッピングできます。ピボットグラフに使用します

- column: 複数の次元を列チャネルへマッピングできます。ピボットグラフに使用します

measures

Type: SankeyMeasure[] | undefined

説明

指標

指標設定。流量の大きさを定義するために使用し、size / detail / label / tooltip チャネルをサポートします

例 [{id: 'sales', alias: '売上高'}]

alias

Type: string | undefined

説明

指標の別名。重複できます。未指定の場合、alias は id になります

autoFormat

Type: boolean | undefined

説明

自動数値フォーマット。デフォルトで有効で、最も高い優先度を持ちます

autoFormat=true の場合、numFormat のすべての設定を上書きします

有効にすると、グラフのラベルとツールチップは指標値と言語環境に基づいて適切なフォーマットを自動選択します

フォーマット規則: 10進数、compact notation 有効、小数部は最小0桁・最大2桁、自動丸め、ブラウザーの Intl.NumberFormat で実装

例:

- locale=zh-CN: 749740.264 → 74.45万

- locale=en-US: 749740.264 → 744.5K

numFormat

Type: NumFormat | undefined

説明

指標のカスタム数値フォーマット。label と tooltip に自動適用されます

注意: カスタムフォーマットを使うには autoFormat=false を明示的に設定してください。そうしないと autoFormat がこの設定を上書きします

type

Type: "number" | "percent" | "permille" | "scientific" | undefined

説明

数値フォーマットのタイプ。数値（10進数）、パーセント（%）、パーミル（‰）、科学表記をサポートします

ratio

Type: number | undefined

説明

数値フォーマット比率。0にはできません

例 - 100000 は 10万に変換, ratio:10000, symbol:"万" - 100000 は 10K に変換, ratio:1000, symbol:"K"

symbol

Type: string | undefined

説明

数値フォーマット記号。例: %、‰

例 - 100000 は 10万に変換, ratio:10000, symbol:"万" - 100000 は 10K に変換, ratio:1000, symbol:"K"

thousandSeparator

Type: boolean | undefined

説明

数値フォーマットの桁区切り記号

suffix

Type: string | undefined

説明

数値フォーマットの接尾辞

prefix

Type: string | undefined

説明

数値フォーマットの接頭辞

fractionDigits

Type: number | undefined

説明

数値フォーマットの小数桁。ブラウザー Intl.NumberFormat の minimumFractionDigits と maximumFractionDigits を使用します。significantDigits より優先度は低くなります

例 - 1234.5678 は 1235 に変換, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 は 1234.6 に変換, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 は 1234.57 に変換, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 は 1230.568 に変換, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 は 1234.5678 に変換, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 は 1234.56780 に変換, fractionDigits:5 (roundingMode:halfCeil)

significantDigits

Type: number | undefined

説明

数値フォーマットの有効桁。ブラウザー Intl.NumberFormat の minimumSignificantDigits と maximumSignificantDigits を使用します。fractionDigits より優先度は高くなります

例 - 1234.5678 は 1000 に変換, significantDigits:1 - 1234.5678 は 1200 に変換, significantDigits:2 - 1234.5678 は 1230 に変換, significantDigits:3 - 1234.5678 は 1234 に変換, significantDigits:4 - 1234.5678 は 1234.6 に変換, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 は 1234.57 に変換, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 は 1234.568 に変換, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 は 1234.5678 に変換, significantDigits:8 (roundingMode:halfCeil)

roundingPriority

Type: "morePrecision" | "lessPrecision" | undefined

説明

significantDigits と fractionDigits を同時に設定した場合の数値フォーマットの丸め優先度。ブラウザー Intl.NumberFormat を使用し、Intl.NumberFormat の roundingPriority と同じ規則に従います

例 - 1234.5678 は 1230 に変換, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 は 1234.5678 に変換, significantDigits:3 (roundingPriority:morePrecision)

roundingMode

説明

数値フォーマットの丸めモード。ブラウザー Intl.NumberFormat を使用し、Intl.NumberFormat の roundingMode と同じ規則に従います

format

Type: NumFormat | undefined

type

Type: "number" | "percent" | "permille" | "scientific" | undefined

説明

数値フォーマットのタイプ。数値（10進数）、パーセント（%）、パーミル（‰）、科学表記をサポートします

ratio

Type: number | undefined

説明

数値フォーマット比率。0にはできません

例 - 100000 は 10万に変換, ratio:10000, symbol:"万" - 100000 は 10K に変換, ratio:1000, symbol:"K"

symbol

Type: string | undefined

説明

数値フォーマット記号。例: %、‰

例 - 100000 は 10万に変換, ratio:10000, symbol:"万" - 100000 は 10K に変換, ratio:1000, symbol:"K"

thousandSeparator

Type: boolean | undefined

説明

数値フォーマットの桁区切り記号

suffix

Type: string | undefined

説明

数値フォーマットの接尾辞

prefix

Type: string | undefined

説明

数値フォーマットの接頭辞

fractionDigits

Type: number | undefined

説明

significantDigits

Type: number | undefined

説明

roundingPriority

Type: "morePrecision" | "lessPrecision" | undefined

説明

例 - 1234.5678 は 1230 に変換, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 は 1234.5678 に変換, significantDigits:3 (roundingPriority:morePrecision)

roundingMode

説明

数値フォーマットの丸めモード。ブラウザー Intl.NumberFormat を使用し、Intl.NumberFormat の roundingMode と同じ規則に従います

encoding

Type: "detail" | "tooltip" | "label" | "size" | undefined

説明

指標をマッピングするチャネル

- size: 指標をエッジ幅 / 流量サイズチャネルへマッピングします

- detail: 指標を詳細チャネルへマッピング

- label: 指標をラベルチャネルへマッピング

- tooltip: 指標をツールチップチャネルへマッピング

parentId

Type: string | undefined

説明

フラットな指標設定形式でツリー状の指標グループを構築します。parentId は親指標グループの id を指し、指標ツリーの構築に使用されます

Tip

指標ツリーの設定方法は2つあります: 方法1は children で指標ツリーを直接設定する方法、方法2は parentId を持つフラットな指標リストを設定する方法です。この2つの方法は同時に使用できません

backgroundColor

Type: BackgroundColor

説明

背景色には 'red'、'blue' などの色文字列を指定できます。また、'#ff0000' や 'rgba(255,0,0,0.5)' のような hex、rgb、rgba も使用できます

color

Type: Color | undefined

説明

色

色設定。色リスト、色マッピング、色グラデーションなど、グラフの配色方案を定義します

colorScheme

Type: string[] | undefined

説明

離散カラースキーム。グラフ内の異なる要素の色を定義します

例 ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2']

linearColorScheme

Type: string[] | undefined

説明

線形グラデーションカラースキーム。グラフ内の異なる要素の色を定義します

例 ['#FFCDD2, #F8BBD0]

colorMapping

Type: Record<string, string> | undefined

説明

カラーマッピング。データ値を具体的な色へマッピングします

例 { 'profit': 'red', 'sales': 'blue', }

positiveColor

Type: string | undefined

説明

正負色設定。グラフ内の正の値の色を定義します

negativeColor

Type: string | undefined

説明

正負色設定。グラフ内の負の値の色を定義します

label

Type: Label | undefined

説明

グラフデータラベルを定義するラベル設定。位置、フォーマット、スタイルを含みます。

ラベル設定。位置、形式、スタイルなど、グラフのデータラベルを定義します

enable

Type: false | true

説明

ラベル機能を有効にするかどうか

wrap

Type: boolean | undefined

説明

ラベルを折り返すかどうか

showValue

Type: boolean | undefined

説明

ラベルに指標値を表示するかどうか

複数指標のシナリオでも値の矛盾を心配する必要はありません。描画に関連するすべての指標は foldMeasures で処理され、1つのデータ点を表す1つの指標に統合されるためです。

注意: encoding.label の優先度が高く、この設定は encoding.label には影響しません

showValuePercent

Type: boolean | undefined

説明

ラベルに指標値の割合を表示するかどうか

注意: encoding.label の優先度が高く、この設定は encoding.label には影響しません

showDimension

Type: boolean | undefined

説明

ラベルに次元ラベルを表示するかどうか

すべての次元ラベルを表示します

注意: encoding.label の優先度が高く、この設定は encoding.label には影響しません

autoFormat

Type: boolean | undefined

説明

ラベル値を自動フォーマットするかどうか。autoFormat が true の場合、numFormat 設定は無効になります

numFormat

Type: NumFormat | undefined

説明

ラベル値のフォーマット設定。measure の format とマージされ、measure の format の優先度が高くなります。numFormat の優先度は autoFormat より低くなります

type

Type: "number" | "percent" | "permille" | "scientific" | undefined

説明

数値フォーマットのタイプ。数値（10進数）、パーセント（%）、パーミル（‰）、科学表記をサポートします

ratio

Type: number | undefined

説明

数値フォーマット比率。0にはできません

例 - 100000 は 10万に変換, ratio:10000, symbol:"万" - 100000 は 10K に変換, ratio:1000, symbol:"K"

symbol

Type: string | undefined

説明

数値フォーマット記号。例: %、‰

例 - 100000 は 10万に変換, ratio:10000, symbol:"万" - 100000 は 10K に変換, ratio:1000, symbol:"K"

thousandSeparator

Type: boolean | undefined

説明

数値フォーマットの桁区切り記号

suffix

Type: string | undefined

説明

数値フォーマットの接尾辞

prefix

Type: string | undefined

説明

数値フォーマットの接頭辞

fractionDigits

Type: number | undefined

説明

例 - 1234.5678 は 1234.6 に変換, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 は 1234.57 に変換, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 は 1230.568 に変換, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 は 1234.5678 に変換, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 は 1234.56780 に変換, fractionDigits:5 (roundingMode:halfCeil)

significantDigits

Type: number | undefined

説明

例 - 1234.5678 は 1200 に変換, significantDigits:2 - 1234.5678 は 1230 に変換, significantDigits:3 - 1234.5678 は 1234 に変換, significantDigits:4 - 1234.5678 は 1234.6 に変換, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 は 1234.57 に変換, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 は 1234.568 に変換, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 は 1234.5678 に変換, significantDigits:8 (roundingMode:halfCeil)

roundingPriority

Type: "morePrecision" | "lessPrecision" | undefined

説明

例 - 1234.5678 は 1234.5678 に変換, significantDigits:3 (roundingPriority:morePrecision)

roundingMode

説明

数値フォーマットの丸めモード。ブラウザー Intl.NumberFormat を使用し、Intl.NumberFormat の roundingMode と同じ規則に従います

labelFontSize

Type: number | undefined

説明

ラベルのフォントサイズ

labelFontWeight

Type: string | number | undefined

説明

ラベルのフォントウェイト

labelBackgroundColor

Type: string | undefined

説明

ラベルの背景色

labelStroke

Type: string | undefined

説明

ラベルのストローク色

labelColor

Type: string | undefined

説明

ラベルのフォント色

labelColorSmartInvert

Type: boolean | undefined

説明

マーク色に応じてラベルのフォント色を自動反転するかどうか

labelPosition

Type: "inside" | "outside" | undefined

説明

ラベル位置

labelOverlap

Type: boolean | undefined

説明

ラベルの重なり回避を有効にするかどうか

selector

Type: Selector | Selectors | undefined

説明

ラベルフィルター。デフォルトでは selectors 間の条件関係は OR です

field

Type: string

説明

次元フィールド。dimensions のいずれかの項目の id

operator

Type: "in" | "not in" | undefined

説明

演算子

- in: 次元フィールドの値が value に含まれるデータ項目を選択します

- not in: 次元フィールドの値が value に含まれないデータ項目を選択します

op

Type: "in" | "not in" | undefined

説明

演算子

- in: 次元フィールドの値が value に含まれるデータ項目を選択します

- not in: 次元フィールドの値が value に含まれないデータ項目を選択します

operator と同じです

value

Type: string | number | (string | number)[]

説明

データ項目内の次元フィールド値を選択します。配列をサポートします

dynamicFilter

Type: ChartDynamicFilter | undefined

説明

動的フィルター（AI生成コード実行）

AI が生成した JavaScript コードで複雑なデータフィルタリングロジックを実装します

主な機能:

- 任意に複雑なデータフィルター条件をサポート

- 組み込みユーティリティ関数を使ってデータ操作を実行

- ブラウザー環境で安全に実行（Web Worker サンドボックス）

環境要件: ブラウザー環境のみ対応し、Node.js 環境では fallback を使用します

注意: selector と dynamicFilter は同時に使用できません。dynamicFilter の優先度が高くなります

グラフ動的フィルター設定

AI が生成した JavaScript コードでグラフマーク（棒、点など）をフィルタリングします

type

Type: "row-with-field"

description

Type: string | undefined

説明

ユーザーのフィルター要件説明（自然言語）

例 "売上が1000を超える棒をハイライト"

"各地域で利益率が最も高い棒をハイライト"

code

Type: string

説明

AI が生成した JavaScript フィルターコード

- 組み込みユーティリティ関数のみ使用できます（_ または R からアクセス）

- 入力パラメータ: data（配列）。各 item には行番号を示す __row_index フィールドが含まれます

- 行インデックスとフィールドの組み合わせ配列を返す必要があります: Array<{ __row_index: number, field: string }>

- __row_index は元データ項目の行番号、field はハイライト対象のフィールドを表します

- 使用禁止: eval、Function、非同期操作、DOM API、ネットワークリクエスト

例 sales が 1000 を超えるデータ項目の sales フィールドをハイライト

const filtered = _.filter(data, item => item.sales > 1000);
return _.map(filtered, item => ({
__row_index: item.__row_index,
field: 'sales'
}));

各地域で利益率が最も高いデータ項目をハイライト

const grouped = _.groupBy(data, 'area');
const maxItems = _.map(grouped, group =>
_.maxBy(group, item => item.profit / item.sales)
);
return _.flatten(
_.map(maxItems, item => [
{ __row_index: item.__row_index, field: 'product' },
{ __row_index: item.__row_index, field: 'profit' }
])
);

複数条件でフィルタしたデータ項目をハイライト

const filtered = _.filter(data, item => {
const profitRate = item.profit / item.sales;
return profitRate > 0.2 && item.sales > 5000;
});
return _.flatten(
_.map(filtered, item => [
{ __row_index: item.__row_index, field: 'product' },
{ __row_index: item.__row_index, field: 'sales' }
])
);

fallback

Type: Selector | Selectors | undefined

説明

コード実行に失敗した場合、または環境が対応していない場合のフォールバック

field

Type: string

説明

次元フィールド。dimensions のいずれかの項目の id

operator

Type: "in" | "not in" | undefined

説明

演算子

- in: 次元フィールドの値が value に含まれるデータ項目を選択します

- not in: 次元フィールドの値が value に含まれないデータ項目を選択します

op

Type: "in" | "not in" | undefined

説明

演算子

- in: 次元フィールドの値が value に含まれるデータ項目を選択します

- not in: 次元フィールドの値が value に含まれないデータ項目を選択します

operator と同じです

value

Type: string | number | (string | number)[]

説明

データ項目内の次元フィールド値を選択します。配列をサポートします

result

Type: DynamicFilterExecutionResult<RowWithFieldRes> | undefined

説明

動的フィルター実行結果（ランタイムフィールド）

prepare() 段階で書き込まれ、実行時は読み取り専用です

success

Type: false | true

data

Type: T[] | undefined

error

Type: string | undefined

legend

Type: Legend | undefined

説明

凡例設定。サンキー図の色凡例の表示、位置、スタイルを定義します

enable

Type: boolean | undefined

説明

凡例機能を有効にするかどうか

例 enable: true

border

Type: boolean | undefined

説明

凡例の境界線を有効にするかどうか

Warning

離散凡例にのみ有効

例

labelColor

Type: string | undefined

説明

凡例のフォント色

pagerIconColor

Type: string | undefined

説明

ページャーアイコン色

pagerIconDisableColor

Type: string | undefined

説明

無効状態のページャーアイコン色

labelFontSize

Type: number | undefined

説明

凡例のフォントサイズ

例

labelFontColor

Type: string | undefined

説明

凡例のフォント色

labelFontWeight

Type: string | number | undefined

説明

凡例のフォントウェイト

例

shapeType

説明

凡例の形状

Warning

離散凡例にのみ有効

例

position

Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined

説明

凡例位置

例

maxSize

Type: number | undefined

説明

凡例項目が多い場合の最大列数または最大行数

position が水平方向 (bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr) の場合、maxSize は表示列数を制御します

position が垂直方向 (left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb) の場合、maxSize は表示行数を制御します

Warning

離散凡例にのみ有効

例

Type: Tooltip | undefined

説明

ツールチップ設定。内容、形式、スタイルなど、グラフのツールチップ情報を定義します

enable

Type: false | true

説明

ツールチップを有効にするかどうか

theme

Type: Theme | undefined

説明

グラフのテーマ

テーマ

light、dark の 2 つの組み込みテーマがあります。新しいテーマは registerTheme でカスタム定義できます。

length

Type: number

brand

Type: brand

locale

説明

言語

グラフの言語設定。'zh-CN' と 'en-US' をサポートします

#Sankey

#chartType

#dataset

#dimensions

#id

#alias

#timeFormat

#type

#encoding

#measures

#id

#alias

#autoFormat

#numFormat

#type

#ratio

#symbol

#thousandSeparator

#suffix

#prefix

#fractionDigits

#significantDigits

#roundingPriority

#roundingMode

#format

#type

#ratio

#symbol

#thousandSeparator

#suffix

#prefix

#fractionDigits

#significantDigits

#roundingPriority

#roundingMode

#encoding

#parentId

#page

#field

#currentValue

#backgroundColor

#color

#colorScheme

#linearColorScheme

#colorMapping

#positiveColor

#negativeColor

#label

#enable

#wrap

#showValue

#showValuePercent

#showDimension

#autoFormat

#numFormat

#type

#ratio

#symbol

#thousandSeparator

#suffix

#prefix

#fractionDigits

#significantDigits

#roundingPriority

#roundingMode

#labelFontSize

#labelFontWeight

#labelBackgroundColor

#labelStroke

#labelColor

#labelColorSmartInvert

#labelPosition

#labelOverlap

#selector

#field

#operator

#op

#value

#dynamicFilter

#type

Sankey

chartType

dataset

dimensions

id

alias

timeFormat

type

encoding

measures

id

alias

autoFormat

numFormat

type

ratio

symbol

thousandSeparator

suffix

prefix

fractionDigits

significantDigits

roundingPriority

roundingMode

format

type

ratio

symbol

thousandSeparator

suffix

prefix

fractionDigits

significantDigits

roundingPriority

roundingMode

encoding

parentId

page

field

currentValue

backgroundColor

color

colorScheme

linearColorScheme

colorMapping

positiveColor

negativeColor

label

enable

wrap

showValue

showValuePercent

showDimension

autoFormat

numFormat

type

ratio

symbol

thousandSeparator

suffix

prefix

fractionDigits

significantDigits

roundingPriority

roundingMode

labelFontSize

labelFontWeight

labelBackgroundColor

labelStroke

labelColor

labelColorSmartInvert

labelPosition

labelOverlap

selector

field

operator

op

value

dynamicFilter

type