鼠标悬停解析JS，图表数据抓取全攻略

从现在开始，我们要努力学习啦！今天我给大家带来《鼠标悬停到解析JS，网页图表数据抓取全攻略》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

在现代网页应用中，数据常以交互式图表的形式呈现，许多详细信息（如价格、日期等）仅在用户将鼠标悬停在特定图表元素上时才通过工具提示（tooltip）显示。对于数据抓取任务，初学者可能直观地想到使用Selenium等自动化工具来模拟鼠标悬停行为。然而，这种方法在某些场景下可能效率低下且不够稳定。

挑战与传统方法（Selenium）的局限性

当需要抓取图表上所有数据点的鼠标悬停信息时，使用Selenium模拟每个点的鼠标悬停是一个常见的思路。例如，尝试定位图表画布元素，然后循环对其进行鼠标悬停操作。

考虑以下基于Selenium的尝试代码片段：

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = Options()
options.add_argument("start-maximized")
webdriver_service = Service()
driver = webdriver.Chrome(options=options, service=webdriver_service)

driver.get('https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904')
# 尝试定位图表画布元素
element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//*[@id='placeholder']/div/canvas[2]")))

# 错误示例：WebElement对象不可迭代
# for el in element:       
#     ActionChains(driver).move_to_element(el).perform()   
#     mouseover = WebDriverWait(driver, 30).until(EC.visibility_of_element_located((By.SELECTOR, ".placeholder > div > div.canvasjs-chart-tooltip > div > span")))      
#     print(mouseover.text)

上述代码中，WebDriverWait(...).until(EC.presence_of_element_located(...))返回的是一个单独的WebElement对象，代表了匹配到的第一个元素，而不是一个元素列表。因此，尝试对其进行for el in element:迭代会导致'WebElement' object is not iterable的错误。即使能够正确获取到多个可迭代的元素，模拟逐个鼠标悬停并等待工具提示出现，也存在以下局限性：

1. 效率低下： 每次操作都需要浏览器渲染，速度慢，资源消耗大。
2. 稳定性差： 依赖于页面加载速度、元素可见性、动画效果等，容易出现时序问题或元素未找到的错误。
3. 复杂性高： 需要处理各种等待条件、异常情况，代码维护成本高。
4. 冗余操作： 许多情况下，图表数据在页面加载时就已经存在于HTML或JavaScript代码中，无需模拟用户交互即可直接提取。

高效策略：直接解析JavaScript嵌入数据

对于许多动态图表，其展示的数据通常不是通过AJAX请求在鼠标悬停时才加载的，而是页面加载时就已嵌入在HTML的某个