Skip to content

チャートタイプ

Graphic Walkerは、geoms設定を通じてさまざまなチャートタイプをサポートしています。各ジオメトリタイプは、データを異なるビジュアル表現にマッピングします。

汎用チャート

これらのチャートはデフォルトの'generic'座標系を使用します。

ジオメトリタイプ名前適した用途
'bar'棒グラフカテゴリの比較、分布の表示
'line'折れ線グラフ時間の経過に伴うトレンド、連続データ
'area'面グラフ累積合計、時間に伴う部分と全体
'point'散布図2つのメジャー間の相関
'circle'円プロット散布図と同様だが塗りつぶしの円
'tick'ティックプロット軸に沿った値の分布
'rect'ヒートマップ2次元の分布、密度
'arc'円グラフ / ドーナツチャート部分と全体の比率
'boxplot'箱ひげ図統計的分布（四分位数、外れ値）
'table'データテーブルチャートビュー内の生データ表示

地理チャート

これらのチャートにはcoordSystem: 'geographic'が必要です。

ジオメトリタイプ名前適した用途
'poi'ポイントマップ位置ベースのデータポイント
'choropleth'コロプレスマップ色付き領域による地域比較

ビジュアルエンコーディングチャネル

各チャートタイプは、データフィールドをビジュアルプロパティにマッピングするビジュアルエンコーディングチャネルを使用します:

チャネル説明対応タイプ
columnsX軸の位置すべての汎用チャート
rowsY軸の位置すべての汎用チャート
color色相すべてのチャート
opacity透明度すべてのチャート
size要素のサイズpoint、circle
shape要素の形状point
theta角度arc（円/ドーナツ）
radius半径arc（ドーナツの穴）
longitudeマップの経度poi
latitudeマップの緯度poi
geoId地理的領域IDchoropleth
details詳細グループ化（ビジュアルエンコーディングなし）すべてのチャート
textテキストラベルすべてのチャート
filters行レベルのフィルタリングすべてのチャート

集計

defaultAggregatedがtrue（デフォルト）の場合、メジャーフィールドは自動的に集計されます。利用可能な集計関数:

集計関数説明
sum値の合計
mean算術平均
countレコード数
min最小値
max最大値
median中央値
variance統計的分散
stdev標準偏差
distinctCountユニーク値の数

スタックモード

スタックモードは、重なるマークの配置方法を制御します。layout.stackで設定します:

モード説明
'none'スタッキングなし — マークが重なる
'stack'マークを上に積み重ねる
'normalize'積み重ねて100%に正規化
'zero'ゼロベースラインからスタック
'center'中心揃えでスタック（ストリームグラフ）

ファセット

ディメンションフィールドをメジャーフィールドとともにrowsやcolumnsに配置することで、可視化を複数のパネルに分割します。Graphic Walkerは自動的にファセット（スモールマルチプル）レイアウトを作成します。

たとえば、Regionを列に、Salesを行に、Monthも列に配置すると、地域ごとのチャートが横に並び、それぞれが時間経過による売上を表示します。

サイズモード

layout.size.modeでチャートのサイズを制御します:

モード動作
'auto'コンテンツに基づいて自動サイズ
'fixed'指定されたwidthとheightの値を使用
'full'親コンテナを埋める

設定例

const chart: IChart = {
  visId: 'example',
  name: 'Sales Trend',
  encodings: {
    dimensions: [],
    measures: [],
    rows: [{ fid: 'sales', name: 'Sales', analyticType: 'measure', semanticType: 'quantitative' }],
    columns: [{ fid: 'month', name: 'Month', analyticType: 'dimension', semanticType: 'temporal' }],
    color: [{ fid: 'region', name: 'Region', analyticType: 'dimension', semanticType: 'nominal' }],
    opacity: [],
    size: [],
    shape: [],
    theta: [],
    radius: [],
    longitude: [],
    latitude: [],
    geoId: [],
    details: [],
    filters: [],
    text: [],
  },
  config: {
    defaultAggregated: true,
    geoms: ['line'],
    coordSystem: 'generic',
    limit: -1,
  },
  layout: {
    showTableSummary: false,
    stack: 'none',
    showActions: false,
    interactiveScale: true,
    zeroScale: true,
    size: { mode: 'auto', width: 800, height: 400 },
    format: {},
    resolve: {},
  },
};