# チャートとデータビジュアライゼーション

データについて質問すると、AIは単にテーブルを返すだけでなく、会話内にインタラクティブなチャートを直接レンダリングします。ツールチップを表示するためにホバーしたり、凡例アイテムをクリックしてシリーズの表示を切り替えたり、分析ワークフローに合わせてビジュアライゼーションを探索したりすることができます。

注意
AIはデータとリクエストに基づいて、チャートの種類、軸のマッピング、カラーパレットを自動的に選択します。チャートは自己完結型のHTMLファイルとして生成され、ファイルビューアにレンダリングされます。外部サービスへの呼び出しは行われません。AIの初期選択が分析に合わない場合は、別のチャートタイプをリクエストすることができます。モバイルでは、チャートはHTMLファイルビューアで閲覧できますが、チャートの生成にはWebまたはDesktopセッションが必要です。

## 目的

Studioで利用可能なチャートの種類、クエリからビジュアライゼーションへのデータの流れ、レンダリングされたチャートの操作方法、および包括的な分析のためのマルチセルダッシュボードの構築方法を理解します。

## 前提条件

- Treasure AI Studioにサインイン済みであること（[はじめに](/ja/products/ai-studio/getting-started)）
- チャットインターフェースに慣れていること（[AIチャットインターフェース](/ja/products/ai-studio/chat/chat)）
- Treasure AIアカウントにクエリ可能なデータを持つデータベースが少なくとも1つあること


## AIワークフローにおけるチャートの重要性

テーブルは数値を示します。チャートはストーリーを示します。AIがチャートとともにクエリ結果を返すことで、以下のことが可能になります。

- **パターンを即座に把握** — トレンドライン、外れ値、分布が一目でわかります
- **AIの推論を検証** — データがAIの要約や推奨事項を裏付けているかどうかを確認できます
- **より速く反復** — 「これをファネルとして表示して」や「地域別に分解して」と依頼すると、数秒で新しいチャートが生成されます
- **ステークホルダーと共有** — ダッシュボード内のチャートは、SQLの知識がなくても調査結果を伝えることができます


## 一般的なチャートの種類

AIはデータとリクエストに応じて、さまざまな種類のチャートを生成できます。一般的な種類には以下が含まれます。

| チャートの種類 | 最適な用途 | 使用例 |
|  --- | --- | --- |
| **棒グラフ** | カテゴリの比較 | 製品ライン別の収益 |
| **横棒グラフ** | カテゴリラベルが長い場合 | セッション数上位20ページ |
| **積み上げ棒グラフ** | カテゴリ別の構成比 | チャネルとデバイスタイプ別のコンバージョン |
| **折れ線グラフ** | 時系列のトレンド | 90日間のデイリーアクティブユーザー数 |
| **エリアチャート** | 時系列のボリュームトレンド | 月別累積収益 |
| **円グラフ** | 全体に対する割合 | トラフィックソースの分布 |
| **散布図** | 変数間の相関関係 | セッション時間とページビュー数 |
| **レーダーチャート** | 多次元の比較 | セグメント別の機能採用スコア |
| **サンキー図** | フローと遷移 | ランディングページからチェックアウトまでのユーザージャーニー |
| **ツリーマップ** | 階層的な割合 | データベースとテーブル別のストレージ使用量 |
| **ファネル** | 段階的な離脱 | サインアップから購入までのコンバージョン段階 |


プロのヒント
チャートの種類を覚える必要はありません。理解したいことを説明してください。「ユーザーがチェックアウトをどのように進むか見せて」と伝えると、AIが適切なチャートタイプ（この場合はサンキー図）を選択します。特定のタイプを希望する場合は、明示的に指定してください。「これをファネルチャートとして表示して」のように伝えます。

## チャートの生成方法

ビジュアライゼーションが有効な質問をすると、AIは以下の手順を実行します。

1. **クエリの実行** — AIがTrinoクエリを作成して実行し、データを取得します（[クエリの実行](/ja/products/ai-studio/query/query-execution)を参照）
2. **チャートタイプの選択** — データの形状とリクエストに基づいて、AIがチャートタイプを選択します
3. **データのマッピング** — AIがクエリの列をチャートの軸、シリーズ、ラベルにマッピングします
4. **ファイルの生成** — AIがチャートロジックを埋め込んだ自己完結型のHTMLファイルを生成し、ファイルビューアで開きます


チャットストリームで各ステップを確認できます。ツールコールとしてのクエリ、その後のチャートレンダリングが表示されるため、ビジュアライゼーションを信頼する前にデータを検証できます。

### 会話の例


```
You: Show me daily signups for the last 30 days

AI: [Runs Trino query with td_interval(-30d)]
    [Renders line chart: x-axis = date, y-axis = signup count]

    Signups have been trending upward, with a notable spike on March 15
    that correlates with the product launch announcement.
```

## チャートの操作

### WebとDesktop

HTMLとしてレンダリングされたチャートは、標準的なウェブ操作をサポートしています。

| 操作 | 動作 |
|  --- | --- |
| **ホバー** | カーソル下のデータポイントの正確な値がツールチップに表示されます |
| **凡例のクリック** | データシリーズのオン/オフを切り替えて、特定のメトリクスに集中できます |
| **テーマの同期** | チャートはStudioのテーマに合わせてライトモードとダークモードを自動的に切り替えます |


### コンテキスト内でのチャートの読み方

チャートは**ファイルパネル**（画面右側）に表示されます。チャットストリームには、チャートのファイル名が記載されたファイル通知カードが表示されます。クリックするとファイルビューアでチャートが開きます。

## カラーパレットとテーマ

AIはチャートを生成する際に、Treasure AIデザインシステムから一貫したカラーパレットを適用します。生成されたHTMLで使用されるチャートライブラリによって、色が異なる場合があります。

パレットはテーマに合わせて調整されます。

- **ライトモード** — 暗い軸ラベル、明るいグリッドライン、明るいツールチップ背景
- **ダークモード** — 明るい軸ラベル、控えめなグリッドライン、暗いツールチップ背景


## グリッドダッシュボード

近日公開予定
グリッドダッシュボードは計画中の機能です。このセクションで説明されている機能は、現在のリリースではまだ利用できません。

包括的な分析のために、AIは**グリッドダッシュボード**（チャート、テーブル、KPI、その他のビジュアライゼーションを1ページに組み合わせたマルチセルレイアウト）を構築できるようになる予定です。

### 計画中のセルタイプ

| セルタイプ | 表示内容 | 使用例 |
|  --- | --- | --- |
| **チャート** | サポートされているすべてのチャートタイプ | トレンドライン、比較、分布 |
| **テーブル** | ソート可能なデータテーブル | 詳細レコード、上位Nリスト |
| **KPI** | トレンドインジケーター付きの単一メトリクス | 総収益、コンバージョン率、DAU |
| **ゲージ** | しきい値付きの半円メーター | SLAコンプライアンス、クォータの進捗 |
| **スコア** | ラベル付きプログレスバー | 機能採用率、ヘルススコア |
| **Markdown** | リッチテキストコンテンツ | セクションヘッダー、説明ノート |


### ダッシュボードのリクエスト

表示したい内容を説明して、AIにダッシュボードの構築を依頼します。


```
You: Build a dashboard showing:
     - Total revenue and MoM growth as KPIs
     - Revenue by region as a bar chart
     - Daily revenue trend as a line chart
     - Top 10 customers as a table
```

AIはマルチセルレイアウトをHTMLファイルとして生成し、ファイルビューアに結果を表示します。各セルは独立してスクロール可能で、テーマが適用されています。

### マルチページダッシュボード

ダッシュボードは複数のページをサポートする予定です。上部の**ページセレクタードロップダウン**でビューを切り替えることができます。例えば、「概要」、「地域別内訳」、「顧客詳細」などのページを切り替えられます。

## データフォーマットリファレンス

AIがチャートデータをどのように構造化するかを理解することで、より具体的なリクエストが可能になります。

### デカルトチャート（棒グラフ、折れ線グラフ、エリアチャート、積み上げ棒グラフ、横棒グラフ）

AIはデータを以下にマッピングします。

- **ラベル** — カテゴリまたは時間軸（x軸）
- **データセット** — ラベルと値を持つ1つ以上のデータシリーズ


**例：** 「四半期別の収益とコスト」は以下を生成します。

- ラベル：Q1、Q2、Q3、Q4
- データセット1：収益 — [100, 150, 200, 250]
- データセット2：コスト — [60, 80, 90, 110]


### 円グラフとファネルチャート

各スライスまたは段階は以下にマッピングされます。

- **名前** — カテゴリラベル
- **値** — 数値


### 散布図

各ポイントは以下にマッピングされます。

- **X** — 水平位置
- **Y** — 垂直位置
- **シリーズ** — グループラベル（マルチシリーズ散布図の場合）


### サンキー図

フローデータは以下にマッピングされます。

- **ノード** — 名前付きエンティティ（ページ、段階、カテゴリ）
- **リンク** — フロー値を持つノード間の接続


### ツリーマップ

階層データは以下にマッピングされます。

- **名前** — カテゴリラベル
- **値** — 面積の割合


## 確認

このガイドを読んだ後、以下のことができるようになります。

- [ ] クエリ結果からチャートをリクエストし、AIがチャートタイプを選択する方法を理解する
- [ ] ホバーツールチップと凡例の切り替えを使用して、レンダリングされたチャートを操作する
- [ ] AIのデフォルト選択が合わない場合に、特定のチャートタイプを名前で指定してリクエストする
- [ ] AIに混合ビジュアライゼーションタイプを持つマルチセルグリッドダッシュボードの構築を依頼する
- [ ] サンキー図とファネルチャートの違いを説明する


## トラブルシューティング

| 問題 | 解決策 |
|  --- | --- |
| チャートが空白で表示される | 基になるクエリを確認してください。チャットのツールコールを展開して、データが返されたことを確認します |
| チャートタイプが間違っている | 明示的に依頼してください：「代わりに棒グラフで表示して」 |
| チャートが小さすぎる | AIに「フル幅」のビジュアライゼーションをリクエストするか、より大きなサイズで再生成します |
| 色が区別しにくい | ライトモードとダークモードを切り替えてください。パレットはコントラストを改善するように調整されます |
| ダッシュボードのセルが重なる | AIに別のグリッドレイアウトで再生成するよう依頼してください（例：「2列レイアウトを使用して」） |


## 次のステップ

- [クエリの実行](/ja/products/ai-studio/query/query-execution) — クエリがチャートにデータを提供する方法を理解する
- [クエリ結果テーブル](/ja/products/ai-studio/query/query-results) — チャートと並行して表形式データを操作する
- [ファイル出力](/ja/products/ai-studio/files/artifacts) — チャートとダッシュボードをファイル（PPTX、PDF）としてエクスポートする
- [TDXコマンド](/ja/products/ai-studio/query/tdx-commands) — チャート作成前にデータ探索のためのCLIコマンドを実行する