RaceLine
動的折れ線グラフ (Race Line Chart)
時間とともに変化するデータの傾向を表示するのに適しており、データ点を線分で接続してトレンドラインを形成します
適用シーン:
- 複数のデータ系列が時間とともに変化する傾向を表示する場合
- 異なるカテゴリの成長または低下パターンを比較する場合
- 時間次元におけるデータの変動を観察する場合
動的折れ線グラフ:
- X軸は通常、時間軸またはカテゴリ軸で、次元値を表示します
- Y軸は数値軸で、指標値を表示します
- プレイヤーで時間次元を制御し、折れ線が伸びる過程を動的に表示できます
chartType
Type: "raceLine"
動的折れ線グラフ。時間とともに変化するデータの傾向を表示するのに適しています
dataset
Type: Record[]
データソース
dimensions
Type: ColumnDimension[] | undefined
ディメンション
id
Type: string
次元に対応するフィールドID
alias
Type: string | undefined
次元の別名
timeFormat
Type: TimeFormat | undefined
次元の日付フォーマット設定
type
Type: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second"
時間粒度。日付の表示精度を決定します
encoding
Type: "xAxis" | "color" | "detail" | "tooltip" | "label" | "row" | "column" | undefined
次元をマッピングするチャネル
- xAxis: 複数次元をx軸にマッピングできます
- color: 複数次元を色チャネルにマッピングできます
- detail: 複数次元を詳細チャネルにマッピングできます
- tooltip: 複数次元をツールチップチャネルにマッピングできます
- label: 複数次元をラベルチャネルにマッピングできます
- row: 複数次元を行チャネルにマッピングできます
- column: 複数次元を列チャネルにマッピングできます
measures
Type: ColumnMeasure[] | undefined
メジャー
id
Type: string
指標ID。一意である必要があります
alias
Type: string | undefined
指標の別名。重複可能です。未設定の場合、別名は id になります
autoFormat
Type: boolean | undefined
数値の自動フォーマット。デフォルトで有効で、最優先です
autoFormat=true の場合、すべての numFormat 設定を上書きします
有効にすると、チャートのデータラベルとツールチップは、指標値とロケールに応じて適切なフォーマットを自動選択します
フォーマット規則: コンパクト表記を有効にした小数。最小小数桁数は0、最大小数桁数は2、自動丸めを行い、ブラウザの Intl.NumberFormat 実装を使用します
例:
- locale='zh-CN': 749740.264 → 74.45万
- locale='en-US': 749740.264 → 744.5K
numFormat
Type: NumFormat | undefined
指標のカスタム数値フォーマット。ラベルとツールチップに自動適用されます
注意: カスタムフォーマットを使用するには autoFormat=false を明示的に設定してください。そうしない場合、autoFormat がこの設定を上書きします
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数値フォーマットのタイプ。number(小数)、percent(%)、permille(‰)、科学表記をサポートします
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
数値フォーマットのタイプ。number(小数)、percent(%)、permille(‰)、科学表記をサポートします
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: "color" | "detail" | "tooltip" | "label" | "yAxis" | undefined
指標をマッピングするチャネル
- yAxis: 指標をy軸にマッピングします
- detail: 指標を詳細チャネルにマッピングします
- color: measure を色チャネルにマッピングします
- label: measure を label チャネルにマッピングします
- tooltip: measure を tooltip チャネルにマッピングします
parentId
Type: string | undefined
フラットな指標設定形式でツリー状の指標グループを構築します。parentId は親指標グループの id を指し、指標ツリーの構築に使用します
measure ツリーの設定方法は2つあります。方法1は children で measure ツリーを直接設定する方法、方法2は parentId を持つフラットな measure リストを設定する方法です。この2つの方法は同時に使用できません
page
Type: Page | undefined
ページング
チャートページネーションのページ設定
field
Type: string
ページネーションフィールド。ページネーションに使用するフィールド名を指定します。次元である必要があります
currentValue
Type: string
現在のページネーション値。現在のページを判定するための値を指定します
例 '2023-01-01'
player
Type: Player | undefined
プレイヤー設定。時間次元を指定するための動的棒グラフの中核設定です
プレイヤー設定。再生するフィールド名を指定します。次元である必要があります
この機能は table、pivotTable、dualAxis、histogram、boxPlot などのグラフタイプをサポートせず、指標組み合わせや行列ピボットを有効にした状態では使用できません
maxCount
Type: number | false | undefined
最大再生数。この数を超えるデータは切り捨てられます。false に設定すると制限しません
interval
Type: number | undefined
再生間隔、単位 ms
autoPlay
Type: boolean | undefined
自動再生するかどうか
loop
Type: boolean | undefined
ループ再生するかどうか
position
Type: "left" | "top" | "right" | "bottom" | undefined
プレイヤー位置
railColor
Type: string | undefined
プレイヤー進行バーのトラック色
fontFamily
Type: string | undefined
プレイヤーテキストのフォント
fontSize
Type: number | undefined
プレイヤーテキストのフォントサイズ
trackColor
Type: string | undefined
プレイヤー進行バーの進捗色
sliderHandleColor
Type: string | undefined
プレイヤー進行バーのスライダー色
sliderHandleBorderColor
Type: string | undefined
プレイヤー進行バーのスライダー枠線色
startButtonColor
Type: string | undefined
プレイヤー開始ボタンの色
pauseButtonColor
Type: string | undefined
プレイヤー一時停止ボタンの色
backwardButtonColor
Type: string | undefined
プレイヤー戻るボタンの色
forwardButtonColor
Type: string | undefined
プレイヤー進むボタンの色
backgroundColor
Type: BackgroundColor
チャートの背景色
背景色は色文字列(例: 'red', 'blue')、または hex、rgb、rgba 値(例: '#ff0000', 'rgba(255,0,0,0.5)')を指定できます
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つの指標へ結合されるため、値の競合を心配する必要はありません
注意: encoding の label の優先度が高く、この設定は encoding の label には影響しません
showValuePercent
Type: boolean | undefined
ラベルに指標値の割合を表示するかどうか
複数指標のシナリオでは、プロット関連のすべての指標が foldMeasures 処理を通って単一データポイントを表す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
数値フォーマットのタイプ。number(小数)、percent(%)、permille(‰)、科学表記をサポートします
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 と同じ規則に従います
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
ラベルフィルタリング。セレクタ間のデフォルト関係は OR です
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
operator と同じ
value
Type: string | number | (string | number)[]
次元フィールドの値。配列に対応します
dynamicFilter
Type: ChartDynamicFilter | undefined
動的フィルター(AI 生成コード実行)
コア機能:
- 組み込みユーティリティ関数を使用してデータを操作します
- ブラウザー環境で安全に実行します(Web Worker サンドボックス)
環境要件: ブラウザー環境のみをサポートします。Node.js 環境では fallback を使用します
注意: selector と dynamicFilter は同時に使用できません。dynamicFilter の優先度が高くなります
チャート動的フィルター設定
チャート動的フィルター設定
type
Type: "row-with-field"
description
Type: string | undefined
ユーザーのフィルタリング要件説明(自然言語)
例 "Highlight data items with sales greater than 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 フィールドをハイライト
各エリアで利益率が最も高いデータ項目をハイライト
複数条件で絞り込んだデータ項目をハイライト
fallback
Type: Selector | Selectors | undefined
コード実行に失敗した場合、または環境が対応していない場合のフォールバック方案
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
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
凡例の境界線を有効にするかどうか。
離散凡例にのみ有効
例 border: true
labelColor
Type: string | undefined
凡例のフォント色
pagerIconColor
Type: string | undefined
ページャーアイコン色
pagerIconDisableColor
Type: string | undefined
無効状態のページャーアイコン色
labelFontSize
Type: number | undefined
凡例のフォントサイズ
例 labelFontSize: 10
labelFontColor
Type: string | undefined
凡例のフォント色
labelFontWeight
Type: string | number | undefined
凡例のフォントウェイト
例 labelFontWeight: 400
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
凡例の形状
離散凡例にのみ有効
例 shapeType: 'circle'
position
Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined
凡例位置
例 position: 'rightTop'
maxSize
Type: number | undefined
凡例項目が多い場合の最大列数または行数
離散凡例にのみ有効
例 maxSize: 2
tooltip
Type: Tooltip | undefined
ツールチップ
チャートのツールチップ設定。位置、フォーマット、スタイルなどを定義します。
enable
Type: false | true
ツールチップ機能を有効にするかどうか
brush
Type: Brush | undefined
チャートブラシ設定
enable
Type: boolean | undefined
ブラシ選択を有効にするかどうか
brushType
Type: "rect" | "x" | "y" | "polygon" | undefined
brush のタイプ
brush の形状と選択方向を定義します
- rect: 矩形 brush 選択。X軸方向とY軸方向の両方で同時に選択できます
- polygon: 多角形 brush 選択。複数の点をクリックして任意の多角形を描画し、選択できます
- x: X軸方向の brush 選択。X軸方向にのみ選択し、Y軸方向は制限しません
- y: Y軸方向の brush 選択。Y軸方向にのみ選択し、X軸方向は制限しません
brushMode
Type: "single" | "multiple" | undefined
- multiple: 複数モード。複数の brush 選択を同時に保持できます
ブラシ選択モードを定義します
- multiple: 複数選択モード。複数の brush 領域を同時に存在させられます
removeOnClick
Type: boolean | undefined
選択終了後にブラシ領域をクリアするかどうか
inBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
未選択データ点の不透明度。範囲は 0-1 です
ブラシ選択されたデータ点のスタイルを定義します
opacity
Type: number | undefined
不透明度
選択されたデータポイントの不透明度。範囲は0〜1です
stroke
Type: string | undefined
ストローク色
lineWidth
Type: number | undefined
枠線幅
outOfBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
X軸、カテゴリ軸、X軸設定。チャートのX軸を定義し、位置、フォーマット、スタイルなどを含みます。
ブラシ選択外のデータ点のスタイルを定義します
opacity
Type: number | undefined
不透明度
選択されていないデータポイントの不透明度。範囲は 0-1 です
stroke
Type: string | undefined
ストローク色
lineWidth
Type: number | undefined
枠線幅
xAxis
Type: XBandAxis | undefined
X軸
カテゴリ軸。位置、フォーマット、スタイル、関連設定を定義するX軸設定です。
visible
Type: boolean | undefined
軸を表示するかどうか
inverse
Type: boolean | undefined
軸を反転表示するかどうか。数値軸にのみ有効です
zero
Type: boolean | undefined
座標軸上に 0 値を強制表示するかどうか。min と max が設定されている場合、この設定は無効です。数値軸にのみ有効です。
labelAutoHide
Type: boolean | undefined
軸ラベルの自動非表示。2つのラベルが重なる場合、重なりを引き起こすラベルを自動的に非表示にします。カテゴリ軸にのみ有効です。
labelAutoHideGap
Type: number | undefined
軸ラベルの自動非表示間隔。2つのテキストラベルの間隔が autoHideGap より小さい場合、重なりを引き起こすラベルを自動的に非表示にします。カテゴリ軸にのみ有効です。
autoHide が有効な場合は autoHide を使用し、autoHideSeparation で設定します。
autoHide が無効な場合は sampling を使用し、minGap で設定します。
labelAutoRotate
Type: boolean | undefined
軸ラベルの自動回転。ラベル幅が軸の長さを超えると、ラベルを自動的に回転します。カテゴリ軸にのみ有効です。
labelAutoRotateAngleRange
Type: number[] | undefined
軸ラベルの自動回転角度範囲。カテゴリ軸にのみ有効です。
labelAutoLimit
Type: boolean | undefined
軸ラベルの自動長さ制限。ラベル幅が軸の長さを超えると、超過部分を省略記号で表示し、ホバー時に完全なラベルを表示します。カテゴリ軸にのみ有効です。
labelAutoLimitLength
Type: number | undefined
軸ラベルの自動長さ制限の最大長。ラベルテキストがこの長さを超えると、超過部分を省略記号で表示し、ホバー時に完全なラベルを表示します。カテゴリ軸にのみ有効です。
label
Type: { visible?: boolean; labelColor?: string; labelFontSize?: number; labelFontWeight?: number; labelAngle?: number; } | undefined
X軸の目盛ラベル
visible
Type: boolean | undefined
ラベルを表示するかどうか
labelColor
Type: string | undefined
ラベルの色
labelFontSize
Type: number | undefined
ラベルのフォントサイズ
labelFontWeight
Type: number | undefined
ラベルのフォントの太さ
labelAngle
Type: number | undefined
ラベルの回転角度
line
Type: { visible?: boolean; lineColor?: string; lineWidth?: number; } | undefined
X軸線
visible
Type: boolean | undefined
軸線を表示するかどうか
lineColor
Type: string | undefined
軸線の色
lineWidth
Type: number | undefined
軸線の幅
tick
Type: { visible?: boolean; tickInside?: boolean; tickColor?: string; tickSize?: number; } | undefined
X軸の目盛
visible
Type: boolean | undefined
目盛を表示するかどうか
tickInside
Type: boolean | undefined
目盛を内向きにするかどうか
tickColor
Type: string | undefined
目盛の色
tickSize
Type: number | undefined
目盛のサイズ
title
Type: { visible?: boolean; titleText?: string; titleColor?: string; titleFontSize?: number; titleFontWeight?: number; } | undefined
X軸タイトル
visible
Type: boolean | undefined
タイトルを表示するかどうか
titleText
Type: string | undefined
タイトルテキスト。デフォルトではフィールド設定に従います
titleColor
Type: string | undefined
タイトルの色
titleFontSize
Type: number | undefined
タイトルのフォントサイズ
titleFontWeight
Type: number | undefined
タイトルのフォントの太さ
grid
Type: { visible?: boolean; gridColor?: string; gridWidth?: number; gridLineDash?: number[]; } | undefined
組み込みの light と dark テーマを含みます。カスタムテーマは registerTheme で追加できます。
visible
Type: boolean | undefined
gridColor
Type: string | undefined
selector = [{ profit: 100 }, { profit: 200 }]
gridWidth
Type: number | undefined
- not in: 次元フィールド値が
value配列内にないデータ項目を選択します。
gridLineDash
Type: number[] | undefined
グローバルスタイルまたは条件付きスタイル設定をサポートします。
animation
Type: { duration?: number; easing?: string; } | undefined
X軸アニメーション設定
duration
Type: number | undefined
value: [100, 300]
easing
Type: string | undefined
}
yAxis
Type: YLinearAxis | undefined
Y軸
数値軸。Y軸設定。Y軸の位置、書式、スタイルなどを定義します。
visible
Type: boolean | undefined
軸を表示するかどうか
min
Type: number | undefined
軸線 width
max
Type: number | boolean | undefined
X 軸目盛り
log
Type: boolean | undefined
対数軸を使用するかどうか。数値軸にのみ有効です
logBase
Type: number | undefined
アニメーションのイージング関数。
nice
Type: boolean | undefined
Y軸(カテゴリ軸)設定。Y軸の位置、形式、スタイルなどを定義します。
inverse
Type: boolean | undefined
軸を反転表示するかどうか。数値軸にのみ有効です
zero
Type: boolean | undefined
座標軸上に 0 値を強制表示するかどうか。min と max が設定されている場合、この設定は無効です。数値軸にのみ有効です。
autoFormat
Type: boolean | undefined
数値軸の tick label を自動フォーマットするかどうか。数値軸にのみ適用されます。autoFormat が true の場合、numFormat は無視されます。
numFormat
Type: NumFormat | undefined
数値軸の数値フォーマット。数値軸にのみ適用され、autoFormat より優先度は低くなります。
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数値フォーマットのタイプ。number(小数)、percent(%)、permille(‰)、科学表記をサポートします
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 と同じ規則に従います
label
Type: { visible?: boolean; labelColor?: string; labelFontSize?: number; labelFontWeight?: number; labelAngle?: number; } | undefined
X軸の目盛ラベル
visible
Type: boolean | undefined
ラベルを表示するかどうか
labelColor
Type: string | undefined
ラベルの色
labelFontSize
Type: number | undefined
ラベルのフォントサイズ
labelFontWeight
Type: number | undefined
ラベルのフォントウェイト
labelAngle
Type: number | undefined
ラベルの回転角度
line
Type: { visible?: boolean; lineColor?: string; lineWidth?: number; } | undefined
X軸線
visible
Type: boolean | undefined
- orderBy:'date'
lineColor
Type: string | undefined
}
lineWidth
Type: number | undefined
- 100000 は 10万 に変換, ratio:10000, symbol:"万"
tick
Type: { visible?: boolean; tickInside?: boolean; tickColor?: string; tickSize?: number; } | undefined
order: 'asc',
visible
Type: boolean | undefined
数値フォーマットの接尾辞
tickInside
Type: boolean | undefined
目盛を内向きにするかどうか
tickColor
Type: string | undefined
凡例ソート設定。次元または指標に基づくソート、およびカスタムソート順をサポートします。sort 配列は左から右、または上から下の順序に従います。
tickSize
Type: number | undefined
目盛のサイズ
title
Type: { visible?: boolean; titleText?: string; titleColor?: string; titleFontSize?: number; titleFontWeight?: number; } | undefined
X軸タイトル
visible
Type: boolean | undefined
- 1234.5678 は 1234.6 に変換されます。significantDigits:5 (roundingMode:halfCeil)
titleText
Type: string | undefined
タイトルテキスト。デフォルトではフィールド設定に従います
titleColor
Type: string | undefined
- orderBy:'profit'
titleFontSize
Type: number | undefined
カスタムソート順。この順序は凡例に直接適用されます。昇順は左から右、または上から下に従い、降順は右から左、または下から上に従います。
titleFontWeight
Type: number | undefined
])
grid
Type: { visible?: boolean; gridColor?: string; gridWidth?: number; gridLineDash?: number[]; } | undefined
組み込みの light と dark テーマを含みます。カスタムテーマは registerTheme で追加できます。
visible
Type: boolean | undefined
gridColor
Type: string | undefined
selector = [{ profit: 100 }, { profit: 200 }]
gridWidth
Type: number | undefined
- not in: 次元フィールド値が
value配列内にないデータ項目を選択します。
gridLineDash
Type: number[] | undefined
グローバルスタイルまたは条件付きスタイル設定をサポートします。
animation
Type: { duration?: number; easing?: string; } | undefined
selector = [{ profit: 100 }, { profit: 200 }]
duration
Type: number | undefined
value: [100, 300]
easing
Type: string | undefined
}
crosshairLine
Type: CrosshairLine | undefined
垂直ガイド線
マウスがグラフ上を移動するときに表示される垂直ガイド線。
クロスヘア線(ガイド線)をグラフに表示するための設定です。
visible
Type: boolean | undefined
クロスヘア線を表示するかどうか
lineColor
Type: string | undefined
クロスヘア線の色
labelColor
Type: string | undefined
クロスヘア線ラベルの色
labelVisible
Type: boolean | undefined
クロスヘア線のラベルを表示するかどうか
labelBackgroundColor
Type: string | undefined
クロスヘア線ラベルの背景色
sort
Type: Sort | undefined
X軸ソート設定。次元または指標によるソート、およびカスタムソート順をサポートします
カテゴリ軸ソート設定。次元または指標によるソート、およびカスタムソート順をサポートします
例 sort: { orderBy: 'profit', order: 'asc', } sort: { customOrder:['2019', '2020', '2021'] }
- order:'asc' - orderBy:'date'
- customOrder:['2019', '2020', '2021']
order
Type: "asc" | "desc" | undefined
ソート順。値は 'asc' または 'desc' です
例 order:'asc'
orderBy
Type: string | undefined
利益率が最も高いデータ項目を各リージョンで強調表示
例 - orderBy:'date' - orderBy:'profit'
customOrder
Type: string[] | undefined
カテゴリ軸に直接適用されるカスタムソート順
sortLegend
Type: SortLegend | undefined
凡例ソート設定。次元または指標によるソート、およびカスタムソート順をサポートします
凡例ソート設定。ソート配列は左から右、または上から下の順序に従います
例 sortLegend: { orderBy: 'profit', order: 'asc', } sortLegend: { customOrder:['2019', '2020', '2021'] }
- order:'asc' - orderBy:'date'
- customOrder:['2019', '2020', '2021']
order
Type: "asc" | "desc" | undefined
ソート順。値は 'asc' または 'desc' です
例 order:'asc'
orderBy
Type: string | undefined
利益率が最も高いデータ項目を各リージョンで強調表示
例 - orderBy:'date' - orderBy:'profit'
customOrder
Type: string[] | undefined
凡例に直接適用されるカスタムソート順。昇順は左から右または上から下、降順は右から左または下から上です
theme
Type: Theme | undefined
テーマ設定
テーマ
組み込みテーマには light と dark の2種類があります。新しいテーマは registerTheme でカスタムテーマとして定義できます。
length
Type: number
brand
Type: brand
pointStyle
Type: PointStyle | PointStyle[] | undefined
ポイントマークスタイル設定。ポイントマークの色、枠線などを定義します。
グローバルスタイルまたは条件付きスタイル設定をサポートします
データフィルター
selector
Type: Selector | Selectors | undefined
- not in: 次元フィールド値が
value配列内にないデータ項目を選択します。
例 棒プリミティブ (矩形) のストローク色 selector = "tool" selector = ["tool", "book"] selector = 100 selector = [100, 200]
selector = { profit: 100 } selector = [{ profit: 100 }, { profit: 200 }]
selector = { field: 'category', operator: 'in', value: 'tool' } selector = { field: 'category', operator: 'not in', value: 'book' }
selector = { field: 'profit', operator: '>=', value: 100 } selector = { field: 'profit', operator: 'between' value: [100, 300] }
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
operator と同じ
value
Type: string | number | (string | number)[]
次元フィールドの値。配列に対応します
dynamicFilter
Type: ChartDynamicFilter | undefined
動的フィルター(AI 生成コード実行)
コア機能:
- 組み込みユーティリティ関数を使用してデータを操作します
- ブラウザー環境で安全に実行します(Web Worker サンドボックス)
環境要件: ブラウザー環境のみをサポートします。Node.js 環境では fallback を使用します
注意: selector と dynamicFilter は同時に使用できません。dynamicFilter の優先度が高くなります
チャート動的フィルター設定
チャート動的フィルター設定
type
Type: "row-with-field"
description
Type: string | undefined
ユーザーのフィルタリング要件説明(自然言語)
例 "Highlight data items with sales greater than 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 フィールドをハイライト
各エリアで利益率が最も高いデータ項目をハイライト
複数条件で絞り込んだデータ項目をハイライト
fallback
Type: Selector | Selectors | undefined
コード実行に失敗した場合、または環境が対応していない場合のフォールバック方案
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
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
pointVisible
Type: boolean | undefined
ポイントを表示するかどうか
pointSize
Type: number | undefined
ポイントサイズ
ポイントサイズ
pointColor
Type: string | undefined
ポイントマークの色
ポイントマークの色
pointColorOpacity
Type: number | undefined
ポイントマーク色の不透明度
ポイントマーク色の不透明度
pointBorderColor
Type: string | undefined
ポイントマークの枠線色
ポイントマークの枠線色
pointBorderWidth
Type: number | undefined
ポイントマークの枠線幅
ポイントマークの枠線幅
pointBorderStyle
Type: "solid" | "dashed" | "dotted" | undefined
ポイントマークの枠線スタイル
ポイントマークの枠線スタイル
例 solid
dashed
dotted
lineStyle
Type: LineStyle | LineStyle[] | undefined
ラインマークスタイル設定。ラインマークの色、不透明度、曲線などを定義します。
グローバルスタイルまたは条件付きスタイル設定をサポートします
データフィルター
selector
Type: Selector | Selectors | undefined
- not in: 次元フィールド値が
value配列内にないデータ項目を選択します。
例 棒プリミティブ (矩形) のストローク色 selector = "tool" selector = ["tool", "book"] selector = 100 selector = [100, 200]
selector = { profit: 100 } selector = [{ profit: 100 }, { profit: 200 }]
selector = { field: 'category', operator: 'in', value: 'tool' } selector = { field: 'category', operator: 'not in', value: 'book' }
selector = { field: 'profit', operator: '>=', value: 100 } selector = { field: 'profit', operator: 'between' value: [100, 300] }
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
operator と同じ
value
Type: string | number | (string | number)[]
次元フィールドの値。配列に対応します
dynamicFilter
Type: ChartDynamicFilter | undefined
動的フィルター(AI 生成コード実行)
コア機能:
- 組み込みユーティリティ関数を使用してデータを操作します
- ブラウザー環境で安全に実行します(Web Worker サンドボックス)
環境要件: ブラウザー環境のみをサポートします。Node.js 環境では fallback を使用します
注意: selector と dynamicFilter は同時に使用できません。dynamicFilter の優先度が高くなります
チャート動的フィルター設定
チャート動的フィルター設定
type
Type: "row-with-field"
description
Type: string | undefined
ユーザーのフィルタリング要件説明(自然言語)
例 "Highlight data items with sales greater than 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 フィールドをハイライト
各エリアで利益率が最も高いデータ項目をハイライト
複数条件で絞り込んだデータ項目をハイライト
fallback
Type: Selector | Selectors | undefined
コード実行に失敗した場合、または環境が対応していない場合のフォールバック方案
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
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
lineVisible
Type: boolean | undefined
線分を表示するかどうか
lineSmooth
Type: boolean | undefined
線分を滑らかにするかどうか
lineColor
Type: string | undefined
線分の色
lineColorOpacity
Type: number | undefined
線分色の不透明度
lineWidth
Type: number | undefined
線分の幅
lineStyle
Type: "solid" | "dashed" | "dotted" | undefined
線分スタイル
例
lineStyle: 'solid'
annotationPoint
Type: AnnotationPoint | AnnotationPoint[] | undefined
注釈点設定。選択したデータに基づいて、注釈点の位置、書式、スタイルなどを定義します。
selector
Type: Selector | Selectors | undefined
注釈点のセレクタ。データ点を選択するために使用します。
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
operator と同じ
value
Type: string | number | (string | number)[]
次元フィールドの値。配列に対応します
measureId
Type: string | undefined
注釈ポイントが属する measure id を指定します。複数 measure のシナリオでは、selector と組み合わせて対象 measure の注釈ポイントを一意に特定できます。
dynamicFilter
Type: ChartDynamicFilter | undefined
動的フィルター(AI 生成コード実行)
コア機能:
- 組み込みユーティリティ関数を使用してデータを操作します
- ブラウザー環境で安全に実行します(Web Worker サンドボックス)
環境要件: ブラウザー環境のみをサポートします。Node.js 環境では fallback を使用します
注意: selector と dynamicFilter は同時に使用できません。dynamicFilter の優先度が高くなります
チャート動的フィルター設定
チャート動的フィルター設定
type
Type: "row-with-field"
description
Type: string | undefined
ユーザーのフィルタリング要件説明(自然言語)
例 "Highlight data items with sales greater than 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 フィールドをハイライト
各エリアで利益率が最も高いデータ項目をハイライト
複数条件で絞り込んだデータ項目をハイライト
fallback
Type: Selector | Selectors | undefined
コード実行に失敗した場合、または環境が対応していない場合のフォールバック方案
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
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
text
Type: string | string[] | undefined
'red'
例 'マークテキスト'
textColor
Type: string | undefined
4
例 'red'
textFontSize
Type: number | undefined
[2, 2]
例 12
textFontWeight
Type: number | undefined
0
例 400
textAlign
Type: "left" | "right" | "center" | undefined
テキストの配置です。通常は right に設定し、テキストを注釈点の左側に表示して、グラフの可視領域内に収めます
'right' を推奨します。これによりテキストを注釈点の左側に配置できます
right: テキストは注釈点の左側にあり、テキストの右端が注釈点に揃います
left: テキストは注釈点の右側にあり、テキストの左端が注釈点に揃います
center: テキストは注釈点の中央にあり、テキストの中心が注釈点に揃います
例 'right' テキストは注釈点の左側
textBaseline
Type: "top" | "bottom" | "middle" | undefined
テキストの垂直配置です。通常は top に設定し、テキストを注釈点の下側に表示して、グラフの可視領域内に収めます
'top' を推奨します。これによりテキスト全体をグラフの可視領域内に表示できます
top: テキストは注釈点の下側にあり、テキストの上端が注釈点に揃います
middle: テキストは注釈点の中央にあり、テキストの中心が注釈点に揃います
bottom: テキストは注釈点の上側にあり、テキストの下端が注釈点に揃います
例 'top' テキストは注釈点の下側
textBackgroundVisible
Type: boolean | undefined
背景を表示するかどうか
例 true
textBackgroundColor
Type: string | undefined
背景色
例 'red'
textBackgroundBorderColor
Type: string | undefined
テキスト色
例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景の枠線幅
例 2
textBackgroundBorderRadius
Type: number | undefined
背景の角丸
例 4
textBackgroundPadding
Type: number | undefined
背景の内側余白
例 4
offsetY
Type: number | undefined
背景を表示するかどうか。
例 true
offsetX
Type: number | undefined
注釈点全体のX方向のピクセルオフセットです。注釈点がグラフ左側(カテゴリ軸の開始点)にある場合は正の値、右側(カテゴリ軸の終了点)にある場合は負の値を推奨します。
負の値では全体が左へ移動します。たとえば -10 にすると、テキストと背景を含む注釈点コンポーネント全体が左へ10ピクセル移動します
正の値では全体が右へ移動します。たとえば 10 にすると、テキストと背景を含む注釈点コンポーネント全体が右へ10ピクセル移動します
例 offsetX: 5, 注釈点全体を右へ5ピクセル移動
annotationVerticalLine
Type: AnnotationVerticalLine | AnnotationVerticalLine[] | undefined
次元値の注釈線。垂直方向に表示され、位置とスタイルを設定できます
xValue
Type: string | number | (string | number)[] | undefined
);
dynamicFilter
Type: ValueDynamicFilter | undefined
動的フィルター(AI 生成コード実行)
type
Type: "value"
description
Type: string | undefined
ユーザーのフィルタリング要件説明(自然言語)
例 "売上高が最も高い値をマークラインの参照として取得"
"マークライン用に平均売上高を計算"
code
Type: string
- 入力パラメータ: data(配列)。各項目には行番号を表す __row_index フィールドが含まれます
- __row_index は元データ項目の行番号を表します。field はハイライトするフィールドを表します
- 禁止: eval、Function、非同期操作、DOM API、ネットワークリクエスト
例
fallback
Type: string | number | undefined
コード実行に失敗した場合、または環境が対応していない場合のフォールバック方案
result
Type: { success: boolean; data?: number | string; } | undefined
アニメーションフィルタ実行結果(ランタイムフィールド)
prepare() フェーズで書き込まれ、実行時は読み取り専用です
success
Type: false | true
data
Type: string | number | undefined
text
Type: string | string[] | undefined
'red'
例 'マークテキスト'
textPosition
Type: "outsideStart" | "outsideEnd" | "outsideMiddle" | "insideStart" | "insideMiddle" | "insideEnd" | undefined
選択された次元フィールド値。配列をサポートします。
例 'outsideEnd'
textColor
Type: string | undefined
4
例 'red'
textFontSize
Type: number | undefined
[2, 2]
例 12
textFontWeight
Type: number | undefined
0
例 400
textAlign
Type: "left" | "right" | "center" | undefined
テキストの配置です。通常は設定不要です
'right' を推奨します。これによりテキストを注釈線の左側に配置できます
right: テキストは参照線の左側にあり、テキストの右端が(垂直)注釈線に揃います
left: テキストは参照線の右側にあり、テキストの左端が(垂直)注釈線に揃います
center: テキストは参照線の中央にあり、テキストの中心が(垂直)注釈線に揃います
例 'right'
textBaseline
Type: "top" | "bottom" | "middle" | undefined
middle: テキストは注釈領域内で垂直方向に中央揃えになります。
例 'top'
lineVisible
Type: boolean | undefined
注釈領域の色の不透明度
例 true
lineColor
Type: string | undefined
注釈領域の枠線色。
例 'red'
lineWidth
Type: number | undefined
注釈領域の枠線幅。
例 2
lineStyle
Type: "solid" | "dashed" | "dotted" | undefined
注釈領域枠線の角丸半径。
例 'solid'
textBackgroundVisible
Type: boolean | undefined
背景を表示するかどうか
例 true
textBackgroundColor
Type: string | undefined
背景色
例 'red'
textBackgroundBorderColor
Type: string | undefined
テキスト色
例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景の枠線幅
例 2
textBackgroundBorderRadius
Type: number | undefined
背景の角丸
例 4
textBackgroundPadding
Type: number | undefined
背景の内側余白
例 4
annotationHorizontalLine
Type: AnnotationHorizontalLine | AnnotationHorizontalLine[] | undefined
数値注釈線です。平均線、最大値線、最小値線などを含みます。水平方向に表示され、位置とスタイルを設定できます。平均線など、数値に対応する注釈線を描画する場合に使用します。
yValue
Type: string | number | (string | number)[] | undefined
水平線を注釈するための固定Y値です。カテゴリ軸がY方向の場合は次元値を、数値軸がY方向の場合は具体的な数値を入力できます。
dynamicFilter
Type: ValueDynamicFilter | undefined
動的フィルター(AI 生成コード実行)
type
Type: "value"
description
Type: string | undefined
ユーザーのフィルタリング要件説明(自然言語)
例 "売上高が最も高い値をマークラインの参照として取得"
"マークライン用に平均売上高を計算"
code
Type: string
- 入力パラメータ: data(配列)。各項目には行番号を表す __row_index フィールドが含まれます
- __row_index は元データ項目の行番号を表します。field はハイライトするフィールドを表します
- 禁止: eval、Function、非同期操作、DOM API、ネットワークリクエスト
例
fallback
Type: string | number | undefined
コード実行に失敗した場合、または環境が対応していない場合のフォールバック方案
result
Type: { success: boolean; data?: number | string; } | undefined
アニメーションフィルタ実行結果(ランタイムフィールド)
prepare() フェーズで書き込まれ、実行時は読み取り専用です
success
Type: false | true
data
Type: string | number | undefined
text
Type: string | string[] | undefined
'red'
例 'マークテキスト'
textPosition
Type: "outsideStart" | "outsideEnd" | "outsideMiddle" | "insideStart" | "insideMiddle" | "insideEnd" | undefined
2
例 'outsideEnd'
textColor
Type: string | undefined
4
例 'red'
textFontSize
Type: number | undefined
[2, 2]
例 12
textFontWeight
Type: number | undefined
0
例 400
textAlign
Type: "left" | "right" | "center" | undefined
テキストの配置です。通常は設定不要です
'right' を推奨します。これによりテキストを注釈線の左側に配置できます
right: テキストは参照線の左側にあり、テキストの右端が(水平)注釈線の終点に揃います
left: テキストは参照線の右側にあり、テキストの左端が(水平)注釈線の終点に揃います
center: テキストは参照線の中央にあり、テキストの中心が(水平)注釈線の終点に揃います
例 'right'
textBaseline
Type: "top" | "bottom" | "middle" | undefined
テキストの垂直配置です。通常は設定不要です
'top' を推奨します。これによりテキスト全体をグラフの可視領域内に表示できます
top: テキストは参照線の下側にあり、テキストの上端が(水平)注釈線に揃います
middle: テキストは参照線の中央にあり、テキストの中心が(水平)注釈線に揃います
bottom: テキストは参照線の上側にあり、テキストの下端が(水平)注釈線に揃います
例 'top'
textBackgroundVisible
Type: boolean | undefined
背景を表示するかどうか
例 true
textBackgroundColor
Type: string | undefined
背景色
例 'red'
textBackgroundBorderColor
Type: string | undefined
テキスト色
例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景の枠線幅
背景の枠線幅
例 2
textBackgroundBorderRadius
Type: number | undefined
背景の角丸
例 4
textBackgroundPadding
Type: number | undefined
背景の内側余白
例 4
lineVisible
Type: boolean | undefined
注釈領域の色の不透明度
注釈領域の色の不透明度
例 true
lineColor
Type: string | undefined
注釈領域の枠線色。
例 'red'
lineWidth
Type: number | undefined
注釈領域の枠線幅。
例 2
lineStyle
Type: "solid" | "dashed" | "dotted" | undefined
注釈領域枠線の角丸半径。
例 'solid'
splitLine
Type: boolean | { positiveColor?: string; negativeColor?: string; } | undefined
注釈領域枠線の破線スタイル。
positiveColor
Type: string | undefined
注釈値より大きい部分の主色
negativeColor
Type: string | undefined
0
annotationArea
Type: AnnotationArea | AnnotationArea[] | undefined
注釈領域
選択したデータに基づいて、注釈領域の位置やスタイルを定義する設定です。
selector
Type: AreaSelector | AreaSelectors | undefined
チャートでパースペクティブが有効な場合、または指標が結合されている場合に、次元連動機能を有効にするかどうか。
field
Type: string
次元フィールド。次元項目のID
operator
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
op
Type: "in" | "not in" | undefined
operator と同じ
- in: 次元フィールドの値が指定値に含まれるデータ項目を選択します
operator と同じ
value
Type: string | number | (string | number)[]
次元フィールドの値。配列に対応します
text
Type: string | string[] | undefined
'red'
例 'マークテキスト'
textPosition
Type: "left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined
2
例 'top'
textColor
Type: string | undefined
4
例 'red'
textFontSize
Type: number | undefined
[2, 2]
例 12
textFontWeight
Type: number | undefined
0
例 400
textAlign
Type: "left" | "right" | "center" | undefined
多項式回帰線設定。多項式の次数、回帰線スタイルなどを含みます。
'center' に設定することを推奨します。これにより、テキストをマークエリアの中央に配置できます
例 'center' テキストはマークエリアの中央に配置されます
textBaseline
Type: "top" | "bottom" | "middle" | undefined
多項式回帰の次数
例 'top' テキストはマークエリアの下側に配置されます
textBackgroundVisible
Type: boolean | undefined
背景を表示するかどうか
例 true
textBackgroundColor
Type: string | undefined
背景色
例 'red'
textBackgroundBorderColor
Type: string | undefined
テキスト色
テキスト色
例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景の枠線幅
例 2
textBackgroundBorderRadius
Type: number | undefined
背景の角丸
背景の角丸
例 4
textBackgroundPadding
Type: number | undefined
背景の内側余白
例 4
areaColor
Type: string | undefined
マークエリアの色
例 'red'
areaColorOpacity
Type: number | undefined
注釈領域の塗りつぶし不透明度
例 0.5
areaBorderColor
Type: string | undefined
注釈領域の枠線色
例 'red'
areaBorderWidth
Type: number | undefined
注釈領域の枠線幅
例 2
areaBorderRadius
Type: number | undefined
注釈領域の枠線角丸
例 4
areaLineDash
Type: number[] | undefined
注釈領域の枠線スタイル
例 [2, 2]
outerPadding
Type: number | undefined
マークエリアの余白
例 0
dimensionLinkage
Type: DimensionLinkage | undefined
チャートでピボット機能または指標グループが有効な場合に、次元連動を有効にするかどうか
ある次元値にホバーしたとき、他のチャート内の同じ次元値のデータを連動して強調表示します
ピボットグラフの次元連動設定
enable
Type: false | true
ピボットグラフの次元連動を有効にするかどうか
showTooltip
Type: boolean | undefined
すべての次元に対応するサブグラフの Tooltip 情報を表示するかどうか
showLabel
Type: boolean | undefined
crosshair に対応するラベルを表示するかどうか
locale
Type: "zh-CN" | "en-US" | "ja-JP" | "de-DE" | "id-ID" | "fr-FR" | "ko-KR" | "vi-VN" | undefined
Language
チャートの言語設定。'zh-CN' と 'en-US' の 2 つの言語をサポートします。また intl.setLocale('zh-CN') を呼び出して言語を設定できます