使用说明
Highcharts仪表板MCP服务器
一种先进的模型上下文协议（MCP）服务器，使AI代理（如Claude Desktop）能够生成 分析级交互式仪表板和数据网格——所有这些都是自包含的HTML工件。
🚀 特性
仪表板+网格集成
核心能力：图表和网格表 共享单个DataPool连接器，使用零自定义JavaScript实现本机Highcharts同步。
| 同步类型 | 它的作用 |
|---|---|
highlight |
悬停图表点会突出显示相应的网格行，反之亦然 |
extremes |
缩放或平移图表会使网格范围仅显示匹配的行 |
visibility |
切换图例系列显示/隐藏相应的网格行 |
| 双向编辑 | 编辑网格单元格→ 图表实时更新。拖动图表点→ 网格行更新 |
图表类型
- 线路 –缩放同步的时间序列趋势
- 列 –分类比较
- 馅饼 –比例分配
- 分散 相关性分析
- 关键绩效指标 –一目了然的标题指标
网格特征
- 内联列过滤器（类型感知：文本、数字、日期、布尔值）
- 单击以使用多列排序对标题进行排序（按住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
| 选项 | 类型 | 描述 |
|---|---|---|
title |
string | 仪表板标题 |
data_url |
string | 远程CSV/JSON URL |
data_inline |
string | CSV、Markdown表或JSON数组 |
charts |
ChartConfig[] | 要包含的图表组件 |
include_grid |
bool | 在图表下方添加Grid Pro |
grid |
GridConfig | 网格配置（见下文） |
theme |
GridTheme | 视觉主题 |
GridConfig （在仪表板内使用）
| 选项 | 类型 | 描述 |
|---|---|---|
columns |
ColumnConfig[] | 每列覆盖 |
allow_editing |
bool | 启用双向单元格编辑 |
rows_per_page |
int | 启用分页 |
sort_by |
string | 预排序列 |
height |
int | 网格单元格高度（像素） |
ColumnConfig
| 选项 | 类型 | 描述 |
|---|---|---|
id |
string | 必须与数据列名匹配 |
sortable |
bool | 允许排序（默认值：true） |
filterable |
bool | 启用筛选器（默认值：true） |
filter_inline |
bool | 内联与弹出过滤器（默认：内联） |
editable |
bool | 允许单元格编辑 |
format |
string | Highcharts格式字符串，例如。 £{value:,.0f} |
width |
int | 固定列宽（像素） |
hidden |
bool | 从网格中排除 |
⚠️ 脚本加载顺序
使用Dashboard+Grid时，加载顺序为 强制性的:
<!-- 1. Grid Pro — must come BEFORE Dashboards -->
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css" />
<!-- 2. Highcharts Core -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 3. Dashboards -->
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<link rel="stylesheet" href="https://code.highcharts.com/dashboards/css/dashboards.css" />
<!-- 4. Optional — only when allow_editing=True -->
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
服务器会自动处理此问题。
📄 许可证
麻省理工学院
