Codex怎么制作交互式数据看板-人工智能-PHP中文网

用codex的data-to-dashboard插件可快速生成实时响应、支持点击筛选、图表交互、一键导出的网页看板：导入数据→启用插件→输入自然语言指令→自动产出dashboard_auto.html→注入真实数据→添加点击跳转逻辑→打包分享。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

codex怎么制作交互式数据看板

你需要用Codex快速生成一个能实时响应数据变化、支持点击筛选、图表可交互、导出即用的网页版数据看板，而不是手动拼HTML或截图发邮件。

启用Data-to-Dashboard插件生成基础看板

在Codex工作区中，确保已导入结构清晰的CSV或Excel源文件（如sales_oct_2026.csv）→ 点击右上角插件栏，启用【Data-to-Dashboard】→ 在插件输入框中输入自然语言指令：“生成本月各区域销售额趋势图，并标出环比增长超15%的区域”。

Codex会自动生成一个包含响应式布局、悬停提示、缩放控件的HTML文件，文件名默认为dashboard_auto.html。这一步必须在插件激活状态下执行，否则只会输出静态代码片段。

注入真实业务数据并绑定交互逻辑

方法一：直接替换占位数据
打开生成的dashboard_auto.html → 定位到<script>标签内含data = [...]的数组 → 将其替换为fetch('./data/real_sales.json').then(r => r.json()).then(renderChart)，同时在同目录下新建data/real_sales.json，确保JSON格式合法且字段与图表配置匹配。</script>

方法二：用Codex自动拉取并转换
在项目对话框中输入：“读取当前目录下data/sales_raw.xlsx，提取Sheet1中A1:D100区域，按‘日期’列聚合日销售额，生成time_series.json，字段为date和revenue，保存到./data/”。【务必确认Excel文件已关闭，否则Codex读取会失败并静默跳过】

Codex Multi Subscription Auth Fallbacks

配置 OpenClaw 多提供商认证与 OpenAI Codex OAuth 备用方案，实现自动模型切换，适用于多 OpenAI Codex 账户设置。

下载

添加点击筛选与状态反馈

第一步：在图表容器DOM上添加data-filter-id属性，例如

。
第二步：在script末尾追加事件监听：
document.getElementById('sales-chart').addEventListener('click', e => {
  if (e.detail?.point?.data?.region) {
    window.open(`./detail.html?region=${e.detail.point.data.region}`, '_blank');
  }
});
第三步：新建detail.html，用URLSearchParams获取region参数并动态加载对应子集数据。

这一步完成后，点击趋势图上的任意数据点，就会新开页面展示该区域明细。若未配置detail.html，浏览器将报404但不影响主看板运行。