antv-gpt-vis

注：Markdown モードでは、コンテンツ領域に構文モードのプレーン形式と同様に、最初の行 vis <type> を必ず含める必要があります。

コードモード

対象のフレームワークに基づいて、実行可能なコード一式を生成します。

インストール

NPM：

npm install @antv/gpt-vis

import { GPTVis } from '@antv/gpt-vis';

CDN：

<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>

CDN で読み込んだ後、GPTVis.GPTVis を通じてメインクラスにアクセスします。

HTML の完全な例

<html>
  <head>
    <script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      const gptVis = new GPTVis.GPTVis({
        container: '#container',
        width: 600,
        height: 400,
      });

      gptVis.render(`
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
title Annual Trend
`);
    </script>
  </body>
</html>

グラフの種類ごとの設定

共通設定

すべてのチャートには以下のフィールドが含まれます。これらは、以下の個別のチャートタイプ定義では省略されています。各セクションの見出しは type の値（例：line、column）で、上のチャートタイプ表の type 列に対応しています。

{ type: string; title?: string; theme?: 'default' | 'light' | 'dark' | 'academy'; style?: { backgroundColor?: string; palette?: string[] } }

line / area

{ data: { time: string | number; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; style?: { lineWidth?: number } }

stack は area のみでサポートされています。

column / bar

{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; group?: boolean }

pie

値にパーセンテージの数値を指定してはいけません。

{ data: { category: string; value: number }[]; innerRadius?: number }

innerRadius を 0.6 に設定すると、ドーナツチャートになります。

scatter

{ data: { x: number; y: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string }

dual-axes

{ categories: string[]; series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[]; axisXTitle?: string; style?: { startAtZero?: boolean } }

histogram

{ data: number[]; binNumber?: number; axisXTitle?: string; axisYTitle?: string }

boxplot / violin

分布を表示するには、同じカテゴリに複数のデータポイントが必要です。

{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; style?: { startAtZero?: boolean } }

radar

{ data: { name: string; value: number; group?: string }[]; align?: boolean }

align：すべての次元のスケールを揃えるかどうかを指定します。デフォルトは false（各軸が個別にスケーリング）です。true にすると、すべての軸で最大値が共通になり、複数の系列の絶対値を比較するのに適しています。

funnel

{ data: { category: string; value: number; }[]; }

waterfall

減少を示すために、値に負の数を指定できます。palette は、[正の値の色、負の値の色、合計の色] の順に並べた色の配列です。

{ data: { category: string; value: number }[]; axisXTitle?: string; axisYTitle?: string; style?: { palette?: string[] } }

liquid

percent の範囲は 0～1 です。

{ percent: number; shape?: 'rect' | 'circle' | 'pin' | 'triangle' }

word-cloud

{ data: { text: string; value: number; }[]; }

venn

交差部分では、セット識別子をカンマで区切ります：sets: "A,B"。チャート上に該当するセットの名前を表示するには、label を使用します。

{ data: { sets: string | string[]; value: number; label?: string }[] }

treemap

type TreeNode = { name: string; value: number; children?: TreeNode[] };
{ data: TreeNode[] }

sankey

{ data: { source: string; target: string; value: number }[]; nodeAlign?: 'left' | 'center' | 'right' | 'justify' }

flow-diagram / network-graph

source/target は、ノードの name の値を参照します。

type GraphData = { nodes: { name: string }[]; edges: { source: string; target: string; name?: string }[] };

// flow-diagram
{ data: GraphData }

// network-graph
{ data: GraphData; layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre' }

mindmap / indented-tree / organization-chart

type TreeData = { name: string; children?: TreeData[] };

// mindmap
{ data: TreeData; direction?: 'H' | 'LR' | 'RL' }

// indented-tree
{ data: TreeData; direction?: 'LR' | 'RL' | 'H' }

// organization-chart
type OrganizationChartData = {
  name: string;
  description?: string;
  children?: OrganizationChartData[];
};

{ data: OrganizationChartData }

mindmap のデフォルトは 'H'、indented-tree のデフォルトは 'LR' です。

fishbone-diagram

type FishboneNode = { name: string; children?: FishboneNode[] };
{ data: FishboneNode; style?: { texture?: 'rough' | 'default' } }

texture: 'rough' を指定すると、手描き風になります。

table

{ data: Record<string, string | number>[]; }

summary

summary は他のチャートタイプとは大きく異なります。Syntax/JSON 設定は使用せず、代わりに T8 構文（Markdown + 意味注釈）を使用します。

⚠️ summary を生成する前に、必ず references/summary.md を読んで、T8 構文のルール、エンティティタイプの全一覧、属性フィールドの定義、生成要件、例を確認してから、コンテンツを生成してください。この手順を省略すると、構文エラーが発生します。

ベストプラクティス

1. 円グラフのカテゴリ数は 5 以下にし、残りは「その他」にまとめるか、棒グラフに切り替えてください
2. 傾向の表示に円グラフを使わず、順序のないカテゴリに折れ線グラフを使わないでください
3. 値のフィールドは数値、カテゴリのフィールドはテキストにしてください
4. 連続値（例：給与、スコア、年齢）の分布には、ヒストグラムを使用してください
5. 多次元のフィールドマッピング：カテゴリの次元が 2 つある場合、x 軸の次元には time/category を、もう一方には group を指定してください
6. Syntax モードでは、Syntax 形式を優先してください（ストリーミングに適しています）
7. Code モードでは、HTML + CDN 方式をデフォルトとしてください（インストール不要）。npm 方式は、ユーザーがフレームワークを指定した場合にのみ使用してください