Chart MCP Service

一个基于MCP（Model Context Protocol）的图表服务，实现根据输入自动生成对应图表的功能。该服务使用模板方式引入@alife/bi-material-center-chart组件，不直接在MCP包中引入依赖。

功能特性

• 🎯 智能识别图表类型 - 输入任何图表需求描述，自动识别最适合的图表类型
• ⚡ 生成图表代码 - 基于@alife/bi-material-center-chart生成完整的React组件代码
• 📊 图表管理 - 创建、查看、更新、删除图表配置
• 📚 规则查看 - 查看完整的图表组件规则、触发关键词和模板
• 💡 最佳实践 - 获取特定图表类型的开发最佳实践和注意事项
• ✅ 配置验证 - 检查图表配置是否符合最佳实践和规则要求

支持的图表类型

• line - 折线图
• bar - 柱状图
• pie - 饼图
• area - 面积图
• scatter - 散点图
• radar - 雷达图
• heatmap - 热力图
• wordcloud - 词云图
• strip - 水平条形图
• sankey - 桑基图
• treemap - 矩形树图

安装和使用

1. 安装依赖

```bash npm install ```

2. 编译项目

```bash npm run build ```

3. 启动服务

```bash npm start ```

4. 开发模式

```bash npm run dev ```

MCP工具列表

1. identify_chart_type

智能识别图表类型

• 参数: description - 图表需求描述
• 示例: "显示销售趋势"、"创建一个饼图"、"用户分布可视化"

2. generate_chart_code

生成图表代码

• 参数: type - 图表类型
• 返回: 完整的React组件代码，包含导入语句

3. create_chart

创建图表实例

• 参数: id, type, title, config(可选)
• 返回: 包含完整代码和配置的图表对象

4. get_chart

获取图表详情

• 参数: id - 图表ID
• 返回: 图表的完整信息

5. list_charts

列出所有图表

• 返回: 当前存储的所有图表列表

6. update_chart

更新图表配置

• 参数: id, updates - 要更新的字段

7. delete_chart

删除图表

• 参数: id - 要删除的图表ID

8. get_chart_rules

获取图表规则

• 参数: type(可选) - 特定图表类型
• 返回: 图表规则、触发关键词和模板

9. get_best_practices

获取最佳实践

• 参数: type - 图表类型
• 返回: 特定图表类型的开发最佳实践

10. validate_chart_config

验证图表配置

• 参数: type, config
• 返回: 验证结果，包含错误、警告和建议

使用示例

识别图表类型

``` 输入: "我想展示一下销售数据的时间变化趋势" 输出: { "type": "line", "confidence": 80, "reasons": ["匹配关键词: 趋势, 时间, 变化"], "suggestions": [ "建议使用 折线图 来展示您的数据", "推荐导入: import { Line, LineProps } from '@alife/bi-material-center-chart'" ] } ```

生成图表代码

```javascript // 生成面积图代码示例 import { Area, AreaProps } from '@alife/bi-material-center-chart'; import React from 'react';

const AreaChart: React.FC = () => { const data = [ { month: '1月', value: 3, category: '产品A' }, { month: '2月', value: 4, category: '产品A' }, // ... 更多数据 ];

const config: AreaProps = { data, xField: 'month', yField: 'value', seriesField: 'category', height: 500, point: { size: 4 }, area: { style: { fillOpacity: 0.3 } }, legend: { position: 'top' }, tooltip: { shared: true }, color: ['#1890ff', '#2fc25b'] };

return <Area {...config} />; }; ```

颜色配置最佳实践

• 分类数据使用seriesField进行颜色映射 - 用于展示同一维度下的不同系列数据
• 数值映射使用colorField - 用于连续数值到颜色的映射
• 多系列对比使用seriesField - 如柱状图中的不同系列
• 单一维度分类使用colorField - 如饼图的不同扇形

项目结构

``` chart-mcp-service/ ├── src/ │ ├── index.ts # MCP服务主文件 │ ├── rules.ts # 图表规则处理类 │ └── chart-generator.ts # 图表代码生成器类 ├── dist/ # 编译输出目录 ├── package.json ├── tsconfig.json └── README.md ```

技术栈

• TypeScript - 类型安全的JavaScript
• MCP SDK - Model Context Protocol SDK
• Node.js - 运行时环境

开发说明

本项目遵循chart-mcp.json配置文件中的规则，实现了：

1. 模板引入 - 不在MCP包中直接引入@alife/bi-material-center-chart，而是通过模板生成导入代码
2. 智能识别 - 基于关键词匹配算法识别图表类型
3. 最佳实践 - 遵循颜色配置、数据结构等最佳实践
4. 规则验证 - 对图表配置进行验证，确保符合规范

许可证

ISC