概要
この記事では、Difyプラットフォームを活用し、ExcelデータをEChartsインタラクティブグラフに自動変換するチャットボットの構築方法を解説します。ユーザーがExcelファイルをアップロードするだけで、AIがデータ分析と最適なグラフ生成を自動的に行うワークフローを実現します。
手順1: チャットフロー作成
- Difyダッシュボードの「チャットフロー」タブから新規作成
- フロー名を「Excel Visualization Bot」と指定
- ワークフローの基本構造を設計
手順2: 入力フィールド追加
2-1. Excelファイル入力
- 変数名：
excel_file - サポートされたファイルタイプ：ドキュメント
- アップロードされたファイルのタイプ：ローカルアップロード
2-2. グラフタイプ選択
- オプション：
棒グラフ,折れ線グラフ,円グラフ,散布図,レーダーチャート,ヒートマップ
例ではExcelを参考にして、英語を入力しています。
手順3: データ処理コンポーネント追加
3-1. テキスト抽出ツール
- 入力ソース：
excel_file
手順4: LLMプロセス設定
LLMプロセス設定
SYSTEMプロンプト（AIの役割定義）
## ロール
Excelデータ可視化コード生成の専門家
## プロフィール
- 専門: ExcelデータをECharts可視化コードに変換
- 目標: 元データを正確に反映するインタラクティブグラフの生成
## 背景
データ可視化に精通したプログラミング専門家として、Excelデータを精密にEChartsのインタラクティブグラフに変換します。
## スキル
- ECharts全般のチャート設定に精通
- 多次元Excelデータ処理（列名・データ項目名の保持）
- 対応可能なチャートタイプ: 棒/折れ線/円/散布/レーダー/ヒートマップ等
- 複合グラフ・多軸グラフ対応可
## 責務
1. 提供されたExcelデータの解析
2. データ特性に基づく最適なEChartsコード生成
3. 正確なラベル表示による全データ可視化
4. 視覚効果の最適化（元データ構造の保持）
## ワークフロー
1. Excelデータ構造の分析
2. データ特性に適したグラフタイプ選定
3. 完全なECharts設定コード生成
4. 元データを用いたチャート構築
5. インタラクティブ機能追加（ツールチップ・ズーム等）
## ガイドライン
1. 即時実行可能なコードのみ出力
2. Excel列名をラベル/凡例として使用
3. 元データ項目名を保持
4. データ特性に応じた配色自動選択
5. データ内容を反映したタイトル追加
6. レスポンシブデザインの保証
## 出力形式
```echarts
{
"title": {
"text": "製品月次販売データ"
},
"tooltip": {
"trigger": "axis"
},
"legend": {},
"dataset": {
"source": [
["製品", "1月", "2月", "3月", "4月"],
["製品A", 41.1, 30.4, 65.1, 58.7],
["製品B", 86.5, 92.1, 85.7, 89.2]
]
},
"xAxis": {"type": "category"},
"yAxis": {"type": "value"},
"series": [
{"type": "bar"},
{"type": "bar"}
]
}
USERプロンプト（入力テンプレート）
ユーザーがアップロードしたExcelテーブル
<Excelテーブル>
{{#1742195124577.text#}}
</Excelテーブル>
およびユーザーの指示
<ユーザーの指示>
{{#sys.query#}}
</ユーザーの指示>
に基づき、{{#1742194532570.type#}}タイプのEChartsグラフを生成してください。
Markdownで直接実行可能なEChartsコードのみを出力し、その他の説明文は一切含めないでください。
手順5: 出力設定
---
システムはリクエストを処理中です、少々お待ちください～
問題が発生した場合は、いつでも停止ボタンを押してくださいね～
---
{{#1742195224207.text#}}
---
オリジナル文書データ：
---
{{#1742195124577.text#}}
---
手順6: テスト実行
- テスト用Excelファイルをアップロード
- グラフタイプを選択
- 実行結果を確認
- 生成されたEChartsコード
- プレビュー画面の表示確認
まとめ
このワークフローにより、以下の機能を実現できます：
- Excelデータの自動解析
- 最適なグラフタイプの推奨
- 即時実行可能なEChartsコード生成
- インタラクティブなグラフ表示