vibeknow无法解析前端交互图表，需人工提取数据：先用开发者工具截图ocr或network抓json，再在vibeknow中手动配置chart mode、粘贴结构化数据并设置双轴等参数生成动态讲解视频。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要把网页里嵌着的交互式图表（比如ECharts动态折线图、Tableau仪表盘、可点击筛选的D3.js地图）转成能直接播放的讲解视频，VibeKnow无法保留JavaScript运行逻辑，必须先剥离交互层、提取静态语义——否则AI会把整个HTML代码块当文字读出来，生成一堆“点击此处”“拖动滑块”之类的无效旁白。
确认图表是否可被VibeKnow识别
打开目标网页，在Chrome或Edge浏览器中右键→“查看网页源代码”，搜索<script></script>标签内是否含echarts.init、tableau.embed或d3.select等关键词。如果存在，说明该图表是前端实时渲染的，VibeKnow无法解析其数据和状态，必须人工干预。
直接粘贴URL提交后，若预览视频中对应段落只显示空白灰框、或出现“加载失败”字样，就证实了这一点——此时AI已放弃提取，你看到的是占位符而非真实图表内容。
提取图表核心数据与结构
方法一：用浏览器开发者工具截图+OCR补全
按F12打开开发者工具→切换到“Elements”面板→用鼠标悬停查找包含图表的<div id="chart-container">类节点→右键该节点→选择“Scroll into view”确保图表完全可见→按<code>Ctrl+Shift+P调出命令菜单→输入“screenshot”→选“Capture full size screenshot”。这一步生成的PNG图会保留所有渲染后的坐标轴、图例、数据点，但不含交互按钮。
将截图上传至腾讯云OCR或百度文字识别API，提取其中的标题、坐标轴标签、关键数值；【注意：OCR可能误读小字号图例文字，务必逐字核对原始网页悬浮提示框里的真实值】。
方法二：从网页Network面板抓取原始JSON数据
刷新网页→在开发者工具中切换到“Network”选项卡→勾选“XHR”→操作图表（如点击筛选、切换年份）→观察列表中新增的请求，找返回类型为application/json且响应体含"series": [或"data": [的条目→右键→“Open in new tab”→复制全部JSON文本。这个数据比截图更精准，可直接粘贴进VibeKnow的“粘贴文本”框作为补充说明。
在VibeKnow中重建可视频化的图表表达
第一步：进入脚本编辑页后，定位到图表对应段落，点击右侧铅笔图标
第二步：在弹出面板中切换到“Visual”选项卡→关闭“Auto-generate chart”开关→手动选择“Chart Mode”模板
第三步：在“Data Input”区域粘贴你从JSON提取的结构化数据（格式必须为标准JSON数组，例如[{"year":"2023","revenue":1250},{"year":"2024","revenue":1890}]），系统会自动渲染为柱状图或折线图动画
第四步：若原始图表含多维度对比（如分省份销售额+时间趋势），需在“Chart Settings”中勾选“Enable dual axis”并指定左右Y轴字段，否则AI默认只画单轴，丢失关键对比关系
第五步：点击“Apply & Refresh”，预览窗口立即更新为动态图表画面，播放时会逐项高亮数据点并同步语音讲解——这比用截图生成的静态图更能体现趋势逻辑
