如何抓取鼠标悬停展示不同信息的交互式图表数据

下面是3种可落地的实现方案，按实现成本从低到高排序：

方案1：浏览器自动化模拟操作（最易实现） #

直接用成熟的浏览器自动化框架模拟用户悬停操作，无需分析站点底层逻辑，适配性最强：

• 技术选型可选 Selenium 或 Playwright，更推荐Playwright，自带等待机制，不需要额外处理元素加载超时问题
• 核心实现步骤：
  1. 启动浏览器实例（可配置无头模式后台运行），加载目标图表页面，等待页面所有资源渲染完成
  2. 定位2011年对应的绿色、蓝色柱形元素：可以通过元素类名、data-*自定义属性筛选，也可以通过相对坐标定位
  3. 调用框架内置的悬停方法触发交互，比如Playwright的locator.hover()、Selenium的ActionChains.move_to_element()
  4. 等待悬浮提示框（tooltip）渲染后，提取提示框内的文本内容即可得到目标数据
• 核心代码示例（Playwright Python版本）：

from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("目标页面地址", wait_until="networkidle")
    # 定位2011年绿柱，替换为实际元素选择器
    green_bar = page.locator('[data-year="2011"][data-type="credit"]')
    green_bar.hover()
    # 提取tooltip内容，替换为实际tooltip选择器
    credit_text = page.locator(".chart-tooltip").text_content()
    print(credit_text) # 输出 Credits 6.6B
    browser.close()

方案2：直接提取前端预加载数据（效率最高） #

这类可视化图表的所有数据几乎都会在页面初始化时提前加载到前端，不需要触发交互就能拿到，性能最优：

• 打开浏览器开发者工具的「网络」面板，刷新页面后筛选XHR/Fetch请求，找到返回图表数据集的请求，响应一般为JSON格式，直接提取2011年对应的Credits、Debits数值即可
• 如果数据是内嵌在页面的JS代码块中，直接用正则匹配提取对应数据段，解析为JSON后就能拿到目标值，整个过程不需要渲染页面，速度比自动化方案快10倍以上

方案3：注入JS脚本读取图表实例（适合批量采集） #

如果需要高频采集同类图表数据，可以用浏览器扩展或者自动化框架注入自定义JS，扩展性最好：

• Chartblocks生成的图表实例一般会挂载在对应DOM元素的私有属性上，或者暴露在window全局对象中
• 注入脚本直接读取图表实例的dataset属性，不需要触发悬停事件就能拿到全量数据，适配性和效率兼顾

内容的提问来源于stack exchange，提问作者Jessie