Histogram

エンコードマッピング

ヒストグラムは次の視覚チャネルに対応しています:

xAxis : x 軸チャネル。1 つの次元をサポートし、次元値をビニング計算したうえで x 軸に表示します

説明

ヒストグラム。データ分布を表示する場面に適しています。x 軸は数値軸(連続データ)、y 軸も数値軸(連続データ)で、バーは縦方向に配置されます。

適用シーン:

- 頻度分布や確率分布など、データの分布状況を表示

- データの集中傾向とばらつきの程度を分析

- データ内の外れ値やパターンを識別

chartType

Type: "histogram"

説明

ヒストグラム。データ分布を表示するのに適しています

dataset

Type: Record[]

説明

TidyData 仕様に準拠した集計済みデータセットで、チャートのデータソースと構造を定義します。ユーザー入力データセットは事前処理不要です。VSeed の強力なデータリシェイプ機能が自動的に整形を行います。柱状グラフのデータは最終的に2つの次元と1つの指標に変換されます。

[{category:'A', value:100}, {category:'B', value:200}]

dimensions

Type: HistogramDimension[] | undefined

説明

ヒストグラムでは通常、次元は不要です

[{id: "category", 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" | "row" | "column" | undefined

説明

ディメンションをマッピングするチャネル

- color: 複数ディメンションを色チャネルにマッピングできます

- detail: 複数ディメンションを詳細チャネルにマッピングできます

- tooltip: 複数のディメンションをツールチップチャネルへマッピングできます

- label: 複数のディメンションをラベルチャネルへマッピングできます

- row: 複数ディメンションを行チャネルにマッピングできます

- column: 複数ディメンションを列チャネルにマッピングできます

measures

Type: HistogramMeasure[] | undefined

説明

ヒストグラムは 1 つの次元のみをサポートし、データは離散データです

[{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

説明

数値フォーマットのタイプ。number(10進数)、percent(%)、permille(‰)、scientific(科学表記)に対応します

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(10進数)、percent(%)、permille(‰)、scientific(科学表記)に対応します

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: "value" | "color" | "tooltip" | "label" | "x0" | "x1" | undefined

説明

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

- value: ヒストグラムの値チャネル

- x0: ヒストグラムの x0 チャネル

- x1: ヒストグラムの x1 チャネル

- color: 指標を色チャネルにマッピングします

- 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'。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

説明

データ値を特定の色にマッピングする色マッピング

{ '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

説明

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

type

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

説明

数値フォーマットのタイプ。number(10進数)、percent(%)、permille(‰)、scientific(科学表記)に対応します

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

説明

演算子

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

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

op

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

説明

演算子

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

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

4

value

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

説明

次元フィールドの値。配列に対応します

dynamicFilter

Type: ChartDynamicFilter | undefined

説明

アニメーションフィルタ(AI生成コード実行)

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

主な機能:

- 任意の複雑なデータフィルタリング条件に対応します

- データ操作用の組み込みユーティリティ関数を使用します

- ブラウザ環境(Web Worker サンドボックス)で安全に実行します

環境要件: ブラウザ環境のみ対応します。Node.js 環境ではフォールバックを使用します

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

チャートのアニメーションフィルタ設定

AI生成の JavaScript コードでチャートマーカー(棒、点など)のフィルタリングを実装します

type

Type: "row-with-field"

description

Type: string | undefined

説明

ユーザーのフィルタリング要件説明(自然言語)

- Supports any complex data filtering conditions

- Uses built-in utility functions for data operations

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

説明

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

operator

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

説明

次元フィールド。次元項目のID

演算子

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

op

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

説明

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

演算子

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

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

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

説明

prepare() フェーズで書き込まれ、実行時は読み取り専用です

enable

Type: boolean | undefined

説明

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

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

border

Type: boolean | undefined

説明

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

Warning

離散凡例でのみ有効です

凡例のフォントウェイト

labelColor

Type: string | undefined

説明

legend font color

pagerIconColor

Type: string | undefined

説明

legend font color

pagerIconDisableColor

Type: string | undefined

説明

Pagination icon disabled color

labelFontSize

Type: number | undefined

説明

凡例のフォントサイズ

凡例のフォントサイズ

labelFontColor

Type: string | undefined

説明

legend font color

labelFontWeight

Type: string | number | undefined

説明

legend font color

凡例のフォントウェイト

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

説明

凡例の形状

Warning

離散凡例でのみ有効です

Brush

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

説明

Maximum number of columns or rows when there are many legends

If position is horizontal (bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize controls the number of columns displayed

If position is vertical (left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize controls the number of rows displayed

Warning

離散凡例でのみ有効です

ブラシモード。単一または複数の領域を選択できるかを定義します。

tooltip

Type: Tooltip | undefined

説明

ブラシ選択を有効にするかどうか

enable

Type: false | true

説明

チャートのツールチップ設定。位置、フォーマット、スタイルなどを定義します。

brush

Type: Brush | undefined

説明

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

ブラシ選択枠の形状と選択方向を定義します

- polygon: 多角形選択。複数の点をクリックして任意の多角形を描画して選択できます

enable

Type: boolean | undefined

説明

ブラシ選択モード: 単一または複数

brushType

Type: "rect" | "x" | "y" | "polygon" | undefined

説明

選択されたデータ点のスタイルを定義します。

brushtype

不透明度

選択されたデータ点の不透明度。範囲は 0-1 です

- polygon: 多角形ブラシ選択。複数の点をクリックして任意の多角形を描画して選択します

- x: X軸方向のみのブラシ選択。Y軸方向は制限されません

brushMode

Type: "single" | "multiple" | undefined

説明

- y: Y軸方向のみのブラシ選択。X軸方向は制限されません

選択されたデータ点の不透明度。範囲は 0-1 です

未選択データ項目のスタイル

選択されたブラシ範囲外のデータ点のスタイルを定義します

removeOnClick

Type: boolean | undefined

説明

- multiple: 複数選択モード。複数のブラシ範囲を同時に存在させることができます

inBrushStyle

Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined

説明

ブラシ選択終了後に選択範囲をクリアするかどうか

未選択データ点の不透明度。範囲は 0-1 です

opacity

Type: number | undefined

説明

ブラシ選択されたデータ点のスタイルを定義します

未選択データ項目のスタイル

stroke

Type: string | undefined

説明

ブラシ選択外のデータ点のスタイルを定義します

lineWidth

Type: number | undefined

説明

カテゴリ軸(X軸)設定。チャートのX軸を定義し、位置、フォーマット、スタイルなどを含みます。

outOfBrushStyle

Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined

説明

枠線幅

X軸、カテゴリ軸、X軸設定。チャートのX軸を定義し、位置、フォーマット、スタイルなどを含みます。

opacity

Type: number | undefined

説明

ブラシ選択外のデータ点のスタイルを定義します

未選択データ項目のスタイル

stroke

Type: string | undefined

説明

ブラシ選択範囲外のデータ点の不透明度。範囲は 0-1 です

lineWidth

Type: number | undefined

説明

カテゴリ軸(X軸)設定。チャートのX軸を定義し、位置、フォーマット、スタイルなどを含みます。

xAxis

Type: XLinearAxis | undefined

説明

X-axis numeric-axis configuration, used to define the chart X-axis, including position, format, style, and related settings.

visible

Type: boolean | undefined

説明

グリッド線タイプ

min

Type: number | undefined

説明

Axis line width

max

Type: number | boolean | undefined

説明

X-axis ticks

log

Type: boolean | undefined

説明

対数軸を使用するかどうか。数値軸にのみ適用されます

logBase

Type: number | undefined

説明

Base of the logarithmic axis; only applies to numeric axes

nice

Type: boolean | undefined

説明

読みやすい軸 tick label にするため、軸 tick 間隔を自動調整するかどうか。このオプションは min と max が設定されている場合は無効になり、数値軸にのみ適用されます。

inverse

Type: boolean | undefined

説明

X軸アニメーション設定

zero

Type: boolean | undefined

説明

数値軸(Y軸)設定。チャートのY軸を定義し、位置、フォーマット、スタイルなどを含みます。

autoFormat

Type: boolean | undefined

説明

数値軸の tick label を自動フォーマットするかどうか。数値軸にのみ適用されます。autoFormat が true の場合、numFormat は無視されます。

numFormat

Type: NumFormat | undefined

説明

数値軸の数値フォーマット。数値軸にのみ適用され、autoFormat より優先度は低くなります。

type

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

説明

数値フォーマットのタイプ。decimal、percent(%)、permille(‰)、科学表記をサポートします

ratio

Type: number | undefined

説明

数値フォーマットのタイプ。number(10進数)、percent(%)、permille(‰)、scientific(科学表記)に対応します

- 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

説明

Thousands separator for numeric formatting

suffix

Type: string | undefined

説明

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

prefix

Type: string | undefined

説明

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

fractionDigits

Type: number | undefined

説明

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

- 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

説明

Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than 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

説明

Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's 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

説明

Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.

label

Type: { visible?: boolean; labelColor?: string; labelFontSize?: number; labelFontWeight?: number; labelAngle?: number; } | undefined

説明

- orderBy:'date'

visible

Type: boolean | undefined

説明

カテゴリ軸に直接適用されるカスタムソート順

labelColor

Type: string | undefined

説明

value: 'tool'

labelFontSize

Type: number | undefined

説明

orderBy: 'profit',

labelFontWeight

Type: number | undefined

説明

or

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

説明

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

tick

Type: { visible?: boolean; tickInside?: boolean; tickColor?: string; tickSize?: number; } | undefined

説明

X 軸目盛り

visible

Type: boolean | undefined

説明

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

tickInside

Type: boolean | undefined

説明

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

tickColor

Type: string | undefined

説明

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

tickSize

Type: number | undefined

説明

- 1234.5678 は 1234.5678 に変換されます。fractionDigits:4 (roundingMode:halfCeil)

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

説明

sort order, optional values 'asc' or 'desc'

titleColor

Type: string | undefined

説明

- 1234.5678 は 1234.5678 に変換されます。significantDigits:3 (roundingPriority:morePrecision)

titleFontSize

Type: number | undefined

説明

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

titleFontWeight

Type: number | undefined

説明

X軸目盛ラベル

grid

Type: { visible?: boolean; gridColor?: string; gridWidth?: number; gridLineDash?: number[]; } | undefined

説明

Includes built-in light and dark themes. Custom themes can be added via 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

説明

operator: 'not in',

easing

Type: string | undefined

説明

}

yAxis

Type: YLinearAxis | undefined

説明

Y軸数値軸設定。チャートのY軸を定義し、位置、フォーマット、スタイル、および関連設定を含みます。

visible

Type: boolean | undefined

説明

グリッド線タイプ

min

Type: number | undefined

説明

Axis line width

max

Type: number | boolean | undefined

説明

Y軸目盛

log

Type: boolean | undefined

説明

対数軸を使用するかどうか。数値軸にのみ適用されます

logBase

Type: number | undefined

説明

アニメーションのイージング関数。

nice

Type: boolean | undefined

説明

Y軸(カテゴリ軸)設定。Y軸を定義し、位置、フォーマット、スタイルなどを含みます。

inverse

Type: boolean | undefined

説明

X軸アニメーション設定

zero

Type: boolean | undefined

説明

数値軸(Y軸)設定。チャートのY軸を定義し、位置、フォーマット、スタイルなどを含みます。

autoFormat

Type: boolean | undefined

説明

数値軸の目盛ラベルを自動フォーマットするかどうか。数値軸にのみ適用されます。autoFormat が true の場合、numFormat は無視されます。

numFormat

Type: NumFormat | undefined

説明

数値軸の数値フォーマット。数値軸にのみ有効で、autoFormat より優先度は低くなります

type

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

説明

数値フォーマットのタイプ。number(10進数)、percent(%)、permille(‰)、scientific(科学表記)に対応します

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

説明

数値フォーマットのタイプ。number(10進数)、percent(%)、permille(‰)、scientific(科学表記)に対応します

fractionDigits

Type: number | undefined

説明

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

- 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

説明

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

- 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

説明

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

- 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

説明

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

label

Type: { visible?: boolean; labelColor?: string; labelFontSize?: number; labelFontWeight?: number; labelAngle?: number; } | undefined

説明

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

visible

Type: boolean | undefined

説明

カテゴリ軸に直接適用されるカスタムソート順

labelColor

Type: string | undefined

説明

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

labelFontSize

Type: number | undefined

説明

orderBy: 'profit',

labelFontWeight

Type: number | undefined

説明

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

labelAngle

Type: number | undefined

説明

ラベルの回転角度

line

Type: { visible?: boolean; lineColor?: string; lineWidth?: number; } | undefined

説明

X 軸線

visible

Type: boolean | undefined

説明

- orderBy:'date'

lineColor

Type: string | undefined

説明

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

lineWidth

Type: number | undefined

説明

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

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

説明

- 1234.5678 は 1234.6 に変換されます。significantDigits:5 (roundingMode:halfCeil)

titleText

Type: string | undefined

説明

sort order, optional values 'asc' or 'desc'

titleColor

Type: string | undefined

説明

- 1234.5678 は 1234.5678 に変換されます。significantDigits:3 (roundingPriority:morePrecision)

titleFontSize

Type: number | undefined

説明

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

titleFontWeight

Type: number | undefined

説明

X軸目盛ラベル

grid

Type: { visible?: boolean; gridColor?: string; gridWidth?: number; gridLineDash?: number[]; } | undefined

説明

Includes built-in light and dark themes. Custom themes can be added via 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

説明

operator: 'not in',

easing

Type: string | undefined

説明

}

crosshairRect

Type: CrosshairRect | undefined

説明

コード実行に失敗した場合、または環境が対応していない場合の fallback 方案。

ローカルデータセレクタ

visible

Type: boolean | undefined

説明

selector = {

rectColor

Type: string | undefined

説明

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

labelColor

Type: string | undefined

説明

Operator

labelVisible

Type: boolean | undefined

説明

チャートテーマ。テーマは優先度の低い設定で、すべてのチャートタイプで共有される共通設定と、各チャートタイプ固有の設定を含みます。組み込みテーマには 'light' と 'dark' があり、Builder でカスタマイズできます。

labelBackgroundColor

Type: string | undefined

説明

テーマ

stackCornerRadius

Type: number | number[] | undefined

説明

組み込みのライトテーマとダークテーマ。registerTheme で新しいテーマをカスタマイズできます。

binCount

Type: number | undefined

説明

ヒストグラムのビン数。ヒストグラムのビン矩形(バー)の数を定義します

binStep

Type: number | undefined

説明

ビン幅の計算に使用するビンステップで、最終的なヒストグラム内の矩形(バー)の幅にも影響します。binCount と binStep を同時に設定した場合は binStep が優先されます

binValueType

Type: "count" | "percentage" | undefined

説明

ヒストグラムのビン値タイプ。ヒストグラムのビン矩形(バー)の値タイプを定義します。デフォルトは 'count' です

theme

Type: Theme | undefined

説明

Operator

const maxItems = _.map(grouped, group =>

_.map(maxItems, item => [

Operator

Highlight items meeting multiple filtering conditions

const filtered = _.filter(data, item => {

length

Type: number

brand

Type: brand

barStyle

Type: BarStyle | BarStyle[] | undefined

説明

矩形マークスタイル。柱グラフの色、境界線、角丸などを定義します。

グローバルスタイルまたは条件付きスタイル設定をサポートします

データフィルター

selector を設定すると、数値 selector、部分データ selector、条件付き次元 selector、条件付き指標 selector の 4 種類のデータマッチングを利用できます

selector を設定しない場合、スタイルは全体に適用されます。

selector

Type: Selector | Selectors | undefined

説明

データセレクタ

selector を設定すると、数値 selector、部分データ selector、条件付き次元 selector、条件付き指標 selector の 4 種類のデータマッチングを利用できます

selector を設定しない場合、スタイルは全体に適用されます。

数値セレクタ 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

説明

次元フィールド。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 コードで複雑なデータフィルタリングロジックを実装します。

Top N、統計分析、複雑条件など、静的 selector では表現しにくいシーンに適しています。

主な機能:

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

  • 組み込みユーティリティ関数でデータ操作を実行

  • ブラウザ環境で安全に実行(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

barVisible

Type: boolean | undefined

説明

棒要素(矩形)を表示するかどうか

barColor

Type: string | undefined

説明

棒要素(矩形)の色

barColorOpacity

Type: number | undefined

説明

棒要素(矩形)の色の透明度

barBorderColor

Type: string | undefined

説明

棒要素(矩形)の枠線色

barBorderWidth

Type: number | undefined

説明

棒要素(矩形)の枠線幅

barBorderStyle

Type: "solid" | "dashed" | "dotted" | undefined

説明

棒要素(矩形)の枠線スタイル

solid

dashed

dotted

barBorderOpacity

Type: number | undefined

説明

棒要素(矩形)の角丸

棒要素(矩形)のストローク透明度

4

[0, 0, 10, 10]

barRadius

Type: number | number[] | undefined

annotationPoint

Type: AnnotationPoint | AnnotationPoint[] | undefined

説明

注釈点設定。選択したデータに基づいて、注釈点の位置、形式、スタイルなどを定義します。

selector

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)[]

説明

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

measureId

Type: string | undefined

説明

注釈点が属する指標 id を指定します。複数 measure のシーンでは、selector と組み合わせて対象指標の注釈点を一意に特定できます。

dynamicFilter

Type: ChartDynamicFilter | undefined

説明

動的フィルター(AI 生成コード実行)

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

Top N、統計分析、複雑条件など、静的 selector では表現しにくいシーンに適しています。

主な機能:

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

  • 組み込みユーティリティ関数でデータ操作を実行

  • ブラウザ環境で安全に実行(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

text

Type: string | string[] | undefined

説明

テキスト内容

'Annotation text'

textColor

Type: string | undefined

説明

テキスト色

'red'

textFontSize

Type: number | undefined

説明

テキストのフォントサイズ

12

textFontWeight

Type: number | undefined

説明

テキストのフォントウェイト

400

textAlign

Type: "left" | "right" | "center" | undefined

説明

テキストの配置。通常は設定不要です

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

説明

注釈点全体の Y 方向オフセット距離。注釈点がチャート上側(値が大きい)にある場合は正の値、下側(値が小さい)にある場合は負の値を推奨します。

負の値では全体が上に移動します。例: -10 を設定すると、テキストと背景を含む注釈点コンポーネント全体が 10px 上に移動します

正の値では全体が下に移動します。例: 10 を設定すると、テキストと背景を含む注釈点コンポーネント全体が 10px 下に移動します

offsetY: 5

offsetX

Type: number | undefined

説明

注釈点全体の X 方向オフセット距離。注釈点がチャート左側(カテゴリ軸の始点)にある場合は正の値、右側(カテゴリ軸の終点)にある場合は負の値を推奨します。

負の値では全体が左に移動します。例: -10 を設定すると、テキストと背景を含む注釈点コンポーネント全体が 10px 左に移動します

正の値では全体が右に移動します。例: 10 を設定すると、テキストと背景を含む注釈点コンポーネント全体が 10px 右に移動します

offsetX: 5

annotationVerticalLine

Type: AnnotationVerticalLine | AnnotationVerticalLine[] | undefined

説明

垂直注釈線設定。選択したデータまたは固定値に基づいて垂直参照線を定義します。

xValue

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

説明

垂直線を注釈する固定 X 値。カテゴリ軸が X 方向の場合は次元値、数値軸が X 方向の場合は具体的な数値を入力できます

dynamicFilter

Type: ValueDynamicFilter | undefined

説明

動的フィルター(AI 生成コード実行)

AI 生成の JavaScript フィルターコード

  • 組み込みユーティリティ関数のみ使用できます(_ または R でアクセス)

  • 入力パラメータ: data(配列)

  • 単一の数値または文字列を返す必要があります: number | string

  • 適用シーン: 注釈線(水平線、垂直線)に必要な動的値

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

type

Type: "value"

description

Type: string | undefined

説明

ユーザーの動的値要件説明(自然言語)

"注釈線の基準として最大売上値を取得"

"注釈線用に平均売上を計算"

code

Type: string

説明

動的フィルター(AI 生成コード実行)

AI 生成の JavaScript フィルターコード

  • 組み込みユーティリティ関数のみ使用できます(_ または R でアクセス)

  • 入力パラメータ: data(配列)

  • 単一の数値または文字列を返す必要があります: number | string

  • 適用シーン: 注釈線(水平線、垂直線)に必要な動的値

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

売上の最大値を注釈線の値として取得

const maxSales = _.maxBy(data, 'sales')?.sales;
return maxSales || 0;

平均値を計算して注釈線に使用

const avgSales = _.meanBy(data, 'sales');
return _.round(avgSales, 2);

分位値を注釈線として取得

const sorted = _.sortBy(data, 'sales');
const index = Math.floor(sorted.length * 0.75);
return sorted[index]?.sales || 0;

条件に基づいて目標値を計算

const currentYearTotal = _.sumBy(
_.filter(data, item => item.year === 2024),
'sales'
);
return currentYearTotal;

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

説明

テキスト内容

'Annotation text'

textPosition

Type: "outsideStart" | "outsideEnd" | "outsideMiddle" | "insideStart" | "insideMiddle" | "insideEnd" | undefined

説明

テキスト位置

注釈線のラベル位置(線に対する相対位置)。

'outsideEnd'

textColor

Type: string | undefined

説明

テキスト色

'red'

textFontSize

Type: number | undefined

説明

テキストのフォントサイズ

12

textFontWeight

Type: number | undefined

説明

テキストのフォントウェイト

400

textAlign

Type: "left" | "right" | "center" | undefined

説明

テキストの配置。通常は設定不要です

right を推奨します。これによりテキストを注釈線の左側に配置できます

right: テキストは参照線の左側にあり、テキストの右端が(垂直)注釈線に揃います

left: テキストは参照線の右側にあり、テキストの左端が(垂直)注釈線に揃います

center: テキストは参照線の中央にあり、テキストの中心が(垂直)注釈線に揃います

'right'

textBaseline

Type: "top" | "bottom" | "middle" | undefined

説明

テキストの垂直配置。通常は設定不要です

top を推奨します。これによりテキスト全体をチャートの可視領域内に表示できます

top: テキストは参照線の下側にあり、テキストの上端が(垂直)注釈線の終点に揃います

middle: テキストは参照線の中央にあり、テキストの中心が(垂直)注釈線の終点に揃います

bottom: テキストは参照線の上側にあり、テキストの下端が(垂直)注釈線の終点に揃います

'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 生成コード実行)

AI 生成の JavaScript フィルターコード

  • 組み込みユーティリティ関数のみ使用できます(_ または R でアクセス)

  • 入力パラメータ: data(配列)

  • 単一の数値または文字列を返す必要があります: number | string

  • 適用シーン: 注釈線(水平線、垂直線)に必要な動的値

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

type

Type: "value"

description

Type: string | undefined

説明

Background padding

Line visible

次元フィールド。次元項目の ID です

code

Type: string

説明

動的フィルター(AI 生成コード実行)

AI 生成の JavaScript フィルターコード

  • 組み込みユーティリティ関数のみ使用できます(_ または R でアクセス)

  • 入力パラメータ: data(配列)

  • 単一の数値または文字列を返す必要があります: number | string

  • 適用シーン: 注釈線(水平線、垂直線)に必要な動的値

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

売上の最大値を注釈線の値として取得

const maxSales = _.maxBy(data, 'sales')?.sales;
return maxSales || 0;

平均値を計算して注釈線に使用

const avgSales = _.meanBy(data, 'sales');
return _.round(avgSales, 2);

分位値を注釈線として取得

const sorted = _.sortBy(data, 'sales');
const index = Math.floor(sorted.length * 0.75);
return sorted[index]?.sales || 0;

条件に基づいて目標値を計算

const currentYearTotal = _.sumBy(
_.filter(data, item => item.year === 2024),
'sales'
);
return currentYearTotal;

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

説明

テキスト内容

'Annotation text'

textPosition

Type: "outsideStart" | "outsideEnd" | "outsideMiddle" | "insideStart" | "insideMiddle" | "insideEnd" | undefined

説明

テキスト位置

注釈線のラベル位置(線に対する相対位置)。

'outsideEnd'

textColor

Type: string | undefined

説明

テキスト色

'red'

textFontSize

Type: number | undefined

説明

テキストのフォントサイズ

12

textFontWeight

Type: number | undefined

説明

テキストのフォントウェイト

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

説明

注釈値より小さい部分に対応する主色

annotationArea

Type: AnnotationArea | AnnotationArea[] | undefined

説明

注釈領域設定。選択したデータに基づき、注釈領域の位置やスタイルなどを定義します。

selector

Type: AreaSelector | AreaSelectors | 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)[]

説明

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

text

Type: string | string[] | undefined

説明

テキスト内容

'Annotation text'

textPosition

Type: "left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined

説明

テキスト位置

'top'

textColor

Type: string | undefined

説明

テキスト色

'red'

textFontSize

Type: number | undefined

説明

テキストのフォントサイズ

12

textFontWeight

Type: number | undefined

説明

テキストのフォントウェイト

400

textAlign

Type: "left" | "right" | "center" | undefined

説明

テキストの配置。通常は設定不要です

center: テキストは注釈領域の中央にあり、テキスト中心が領域に揃います

left: テキストは注釈領域の左側にあります

right: テキストは注釈領域の右側にあります

'center'

textBaseline

Type: "top" | "bottom" | "middle" | undefined

説明

テキストの垂直配置。通常は設定不要です

top: テキストは注釈領域の上側にあります

middle: テキストは注釈領域の中央にあります

bottom: テキストは注釈領域の下側にあります

'middle'

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

説明

注釈領域の色

'rgba(255,0,0,0.1)'

areaColorOpacity

Type: number | undefined

説明

注釈領域の透明度

0.2

areaBorderColor

Type: string | undefined

説明

注釈領域の枠線色

'red'

areaBorderWidth

Type: number | undefined

説明

注釈領域の枠線幅

2

areaBorderRadius

Type: number | undefined

説明

注釈領域の角丸

4

areaLineDash

Type: number[] | undefined

説明

注釈領域の枠線破線設定

[4, 4]

outerPadding

Type: number | undefined

説明

外側余白

8

kdeRegressionLine

Type: KdeRegressionLine | KdeRegressionLine[] | undefined

説明

カーネル密度回帰線設定。データの傾向と分布状況を表示するために使用します

enable

Type: boolean | undefined

説明

回帰線機能を有効にするかどうか

color

Type: string | undefined

説明

回帰線の色

回帰線の色を設定します。未設定の場合、デフォルトでグラフのメインカラーを使用します

lineWidth

Type: number | undefined

説明

回帰線の幅

回帰線の幅をピクセル単位で設定します。デフォルト値は 1 です

lineDash

Type: number[] | undefined

説明

回帰線のスタイル

回帰線のスタイルを設定します。例: 実線、破線など。デフォルト値は実線です

text

Type: string | undefined

説明

回帰線ラベルテキスト

回帰線のラベルテキストを設定します。空文字列はラベルを表示しないことを表します

textColor

Type: string | undefined

説明

テキスト色

'red'

textFontSize

Type: number | undefined

説明

[2, 2]

12

textFontWeight

Type: number | undefined

説明

0

400

ecdfRegressionLine

Type: EcdfRegressionLine | EcdfRegressionLine[] | undefined

説明

経験累積分布関数の回帰線設定。データの累積分布状況を表示するために使用します

enable

Type: boolean | undefined

説明

有効にするかどうか

color

Type: string | undefined

説明

回帰線の色

回帰線の色を設定します。未設定の場合、デフォルトでグラフのメインカラーを使用します

lineWidth

Type: number | undefined

説明

回帰線の幅

回帰線の幅をピクセル単位で設定します。デフォルト値は 1 です

lineDash

Type: number[] | undefined

説明

回帰線のスタイル

回帰線のスタイルを設定します。例: 実線、破線など。デフォルト値は実線です

text

Type: string | undefined

説明

回帰線ラベルテキスト

回帰線のラベルテキストを設定します。空文字列はラベルを表示しないことを表します

textColor

Type: string | undefined

説明

テキスト色

'red'

textFontSize

Type: number | undefined

説明

[2, 2]

12

textFontWeight

Type: number | undefined

説明

0

400

dimensionLinkage

Type: DimensionLinkage | undefined

説明

チャートでピボット機能または指標の組み合わせが有効な場合、次元連動機能を有効にするかどうか。

ある次元値に hover したとき、他のチャート内の同じ次元値のデータを連動してハイライトします。

ピボットチャート次元連動設定

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

説明

チャートの言語設定。'zh-CN' と 'en-US' の 2 言語をサポートします。intl.setLocale('zh-CN') を呼び出して言語を設定することもできます