HierarchySankey
階層サンキー図は次の視覚チャネルに対応しています:
hierarchy: 階層チャネル。複数の次元をサポートします
size: サイズチャネル。1 つの指標をサポートします
label: ラベルチャネル。複数の次元と複数の指標をサポートします
tooltip: ツールチップチャネル。複数の次元と複数の指標をサポートします
階層サンキー図。階層的な流れデータを表示するために使用し、ツリー状ノードと流れのリンクで階層関係と流量の大きさを表します。
適用シーン:
- 上流から下流への階層的な流れ関係を表示
- ツリー構造における流量配分と経路伝達を強調
データ要件:
- 階層構造を構築するために少なくとも 1 つの次元フィールドが必要です
- 流量の大きさをマッピングするために少なくとも 1 つの数値フィールド（指標）が必要です
- advanced pipeline では tidyData を VChart がサポートするツリー型 children 構造へ変換する必要があります
chartType
Type: "hierarchySankey"
階層サンキー図
階層サンキー図。階層構造内の流れ関係と流量の大きさを表示します
例 'hierarchySankey'
dataset
Type: Record[]
データセット
TidyData 仕様に準拠し、集計済みのデータセットです。グラフのデータソースと構造を定義します
例 [{region: '華北', province: '河北', value: 30}, {region: '華南', province: '広東', value: 70}]
dimensions
Type: HierarchyDimension[] | undefined
次元
次元設定。階層構造を定義するために使用し、hierarchy / label / tooltip チャネルをサポートします
例 [{id: 'region', alias: '地域'}, {id: 'province', alias: '省'}]
id
Type: string
次元に対応するフィールド ID
alias
Type: string | undefined
次元の別名
timeFormat
Type: TimeFormat | undefined
次元の日付フォーマット設定
type
Type: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second"
時間粒度。日付の表示精度を決定します
encoding
Type: "tooltip" | "label" | "hierarchy" | undefined
次元をマッピングするチャネル
- hierarchy: 複数の次元を階層チャネルへマッピングできます
- label: 複数の次元をラベルチャネルへマッピングできます
- tooltip: 複数の次元をツールチップチャネルへマッピングできます
最初の次元は color チャネルへ直接マッピングされます。
measures
Type: HierarchyMeasure[] | undefined
指標
指標設定。流量の大きさを定義するために使用し、size / label / tooltip チャネルをサポートします
例 [{id: 'value', alias: 'フロー量'}]
id
Type: string
指標 ID。重複できません
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
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数値フォーマットの丸めモード。ブラウザー 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
数値フォーマットの小数桁。ブラウザー 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
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数値フォーマットの丸めモード。ブラウザー Intl.NumberFormat を使用し、Intl.NumberFormat の roundingMode と同じ規則に従います
encoding
Type: "tooltip" | "label" | "size" | undefined
指標をマッピングするチャネル
- size: 指標をサイズチャネルへマッピングし、Treemap や Sunburst などのチャートで面積またはサイズを表示します。
- label: 指標をラベルチャネルへマッピング
- tooltip: 指標をツールチップチャネルへマッピング
parentId
Type: string | undefined
フラットな指標設定形式でツリー状の指標グループを構築します。parentId は親指標グループの id を指し、指標ツリーの構築に使用されます
指標ツリーの設定方法は2つあります: 方法1は children で指標ツリーを直接設定する方法、方法2は parentId を持つフラットな指標リストを設定する方法です。この2つの方法は同時に使用できません
page
Type: Page | undefined
ページネーションに使用するフィールド名を指定します。次元である必要があります
field
Type: string
ページネーションフィールド。ページネーションに使うフィールド名を指定します。必ず次元である必要があります
currentValue
Type: string
現在のページネーション値。現在のページを判定するための値を指定します
例 '2023-01-01'
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
ラベルに指標値の割合を表示するかどうか
複数指標のシナリオでも値の矛盾を心配する必要はありません。描画に関連するすべての指標は foldMeasures で処理され、1つのデータ点を表す1つの指標に統合されるためです。
注意: 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
数値フォーマットの小数桁。ブラウザー Intl.NumberFormat の minimumFractionDigits と maximumFractionDigits を使用します。significantDigits より優先度は低くなります
例 - 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 は 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 は 1234.5678 に変換, significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数値フォーマットの丸めモード。ブラウザー 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、ネットワークリクエスト
例 return _.map(filtered, item => ({
const maxItems = _.map(grouped, group =>
const profitRate = item.profit / item.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
凡例の境界線を有効にするかどうか
離散凡例にのみ有効
例
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
Type: "circle" | "cross" | "diamond" | "square" | "arrow" | "arrow2Left" | "arrow2Right" | "wedge" | "thinTriangle" | "triangle" | "triangleUp" | "triangleDown" | "triangleRight" | "triangleLeft" | "stroke" | "star" | "wye" | "rect" | "arrowLeft" | "arrowRight" | "rectRound" | "roundLine" | undefined
凡例の形状
離散凡例にのみ有効
例
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 は表示行数を制御します
離散凡例にのみ有効
例
tooltip
Type: Tooltip | undefined
ツールチップ設定。内容、形式、スタイルなど、グラフのツールチップ情報を定義します
enable
Type: false | true
ツールチップを有効にするかどうか
theme
Type: Theme | undefined
light と dark の 2 つのテーマを内蔵しています。ユーザーは Builder でテーマをカスタマイズできます
const maxItems = _.map(grouped, group =>
_.map(maxItems, item => [
例 'dark'
'light'
length
Type: number
brand
Type: brand
locale
Type: "zh-CN" | "en-US" | "ja-JP" | "de-DE" | "id-ID" | "fr-FR" | "ko-KR" | "vi-VN" | undefined
言語
グラフの言語設定。'zh-CN' と 'en-US' の 2 つの言語をサポートします