highcharts MCP

Highcharts仪表板MCP服务器

一种先进的模型上下文协议（MCP）服务器，使AI代理（如Claude Desktop）能够生成 分析级交互式仪表板和数据网格——所有这些都是自包含的HTML工件。

______________________________________________________________________

🚀 特性

仪表板+网格集成

核心能力：图表和网格表 共享单个DataPool连接器，使用零自定义JavaScript实现本机Highcharts同步。

图表类型

• 线路 –缩放同步的时间序列趋势
• 列 –分类比较
• 馅饼 –比例分配
• 分散 相关性分析
• 关键绩效指标 –一目了然的标题指标

网格特征

• 内联列过滤器（类型感知：文本、数字、日期、布尔值）
• 单击以使用多列排序对标题进行排序（按住Shift键并单击）
• 拖动以调整列的大小
• 交替的行条纹+悬停高亮
• 分页
• 使用图表传播进行单元格内编辑
• 完整的CSS变量主题

数据摄入——任何格式

将数据作为远程URL或以以下任何格式内联传递：

• CSV/TSV
• Markdown表格 (| col | col |)
• JSON对象数组 ([{"col": val}, ...])

自动检测列类型（字符串、数字、布尔值、日期）以配置适当的筛选器。

______________________________________________________________________

🛠️ 建筑

┌─────────────────────────────────────────────┐
│  DashboardRequest                           │
│                                             │
│  DataPool Connector (shared)                │
│       │                                     │
│       ├── KPI components (row 1)            │
│       ├── Chart components (rows 2–N)       │
│       └── Grid Pro component (last row)     │
│             ↕ highlight / extremes / vis    │
└─────────────────────────────────────────────┘

暴露了两个MCP工具：

• generate_highcharts_dashboard --图表+可选网格，完全同步
• generate_highcharts_grid --仅限独立表（不需要图表）

______________________________________________________________________

📦 安装和设置

1.克隆并安装

git clone https://github.com/Bencockin/highcharts_mcp.git
cd highcharts_mcp

python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

2.配置克劳德桌面

打开 ~/Library/Application Support/Claude/claude_desktop_config.json 并添加：

{
  "mcpServers": {
    "highcharts": {
      "command": "/Users/YOUR_USER/highcharts_mcp/venv/bin/python",
      "args": ["/Users/YOUR_USER/highcharts_mcp/server.py"]
    }
  }
}

3.重新启动克劳德桌面

退出并重新打开。寻找🔌 确认MCP已连接的图标。

______________________________________________________________________

💡 使用示例

带有同步网格的仪表板

Create a hiring pipeline dashboard from this data:
[paste CSV or Markdown table]

Include a column chart of candidates by stage, a KPI for total pipeline,
and add the full data grid below so I can filter by recruiter.

克劳德会打电话的 generate_highcharts_dashboard 随着 include_grid=True.\ 将鼠标悬停在图表中的条形图上，会突出显示网格中匹配的行。

______________________________________________________________________

具有双向编辑功能的仪表板

Create a forecast dashboard. I want to be able to drag points on the chart
to adjust values, and have the table update automatically.

克劳德将设置 allow_editing=True 在GridConfig上，启用实时拖放\ 在具有即时网格传播的图表点上。

______________________________________________________________________

独立电网

Create an interactive table from this Markdown data. Sort by Score descending,
add inline filters on every column, and use a dark navy header.

克劳德会打电话的 generate_highcharts_grid 使用适当的主题和列配置。

______________________________________________________________________

🔑 关键选项

DashboardRequest

GridConfig （在仪表板内使用）

ColumnConfig

______________________________________________________________________

⚠️ 脚本加载顺序

使用Dashboard+Grid时，加载顺序为 强制性的:

服务器会自动处理此问题。

______________________________________________________________________

📄 许可证

麻省理工学院