本文旨在解决网页图表数据抓取中常见的鼠标悬停（mouse-hover）信息获取难题。针对特定场景，当图表数据已嵌入网页的JavaScript变量中时，通过Python的requests库获取页面内容，结合正则表达式re直接解析并提取数据，再利用pandas进行结构化处理，可实现比模拟鼠标悬停更高效、稳定的数据抓取，并避免Selenium操作的复杂性和性能开销。
1. 问题分析与传统方法局限性
在网页数据抓取过程中，我们经常遇到需要获取图表上鼠标悬停时才显示的数据（如价格历史、性能曲线等）。常见的直觉是使用自动化测试工具如Selenium，模拟用户行为：打开浏览器、定位图表元素、模拟鼠标移动到元素上，然后尝试获取弹出的提示信息。
原始尝试的代码片段展示了这种思路：
from selenium import webdriverfrom selenium.webdriver import ActionChainsfrom selenium.webdriver.chrome.service import Servicefrom selenium.webdriver.chrome.options import Optionsfrom selenium.webdriver.support.ui import WebDriverWaitfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support import expected_conditions as EC# ... (初始化WebDriver代码省略) ...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]")))# 问题所在：element是一个WebElement对象，不可直接迭代for el in element: # 导致 'WebElement' object is not iterable 错误 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的运行时错误。即使修正了迭代问题，模拟大量鼠标悬停操作来获取所有数据，效率也极其低下，且容易因页面加载、元素定位不准确等问题导致抓取失败。
2. 高效解决方案：直接解析JavaScript数据
对于许多动态加载的图表数据，尤其是使用JavaScript库（如CanvasJS、ECharts、Highcharts等）渲染的图表，其数据源往往在页面加载时就已经嵌入到HTML的标签中，或者通过AJAX请求获取。在这种情况下，最高效的方法是直接从网页源代码中解析这些原始数据，而不是通过模拟浏览器行为。
立即学习“Java免费学习笔记（深入）”；
通过检查目标网页的源代码（通常通过浏览器开发者工具），我们发现价格历史数据被存储在一个JavaScript变量中，以dataArray.push({x: …, y: …})的形式存在。这种结构非常适合使用正则表达式进行提取。
3. 核心代码实现与解析
以下是使用requests、re和pandas库实现高效数据抓取的完整代码：
import reimport pandas as pdimport requests# 目标网页URLurl = "https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904"# 1. 使用requests获取网页的HTML内容# requests库可以直接获取页面的原始HTML，不执行JavaScript，速度快。html_text = requests.get(url).text# 2. 使用正则表达式从HTML中提取数据# re.findall() 用于查找所有匹配正则表达式的非重叠匹配项。# 正则表达式 r"dataArray.push({x: (d+), y: ([d.]+)}" 的解释：# - dataArray.push({x: ：匹配字面字符串 "dataArray.push({x:"。注意点号需要转义。# - (d+)：第一个捕获组，匹配一个或多个数字（对应时间戳）。# - , y: ：匹配字面字符串 ", y:"。# - ([d.]+)：第二个捕获组，匹配一个或多个数字或点（对应价格）。# - }：匹配字面字符串 "}"。# 整个模式旨在捕获 `x` 和 `y` 括号内的值。df = pd.DataFrame( re.findall(r"dataArray.push({x: (d+), y: ([d.]+)}", html_text), columns=["time", "price"],)# 3. 数据类型转换与清洗# 原始的时间戳是毫秒级，需要转换为秒级后，再使用pd.to_datetime转换为日期时间格式。# astype(int) 将字符串时间戳转换为整数。# // 1000 将毫秒转换为秒。# unit="s" 指定时间单位为秒。df["time"] = pd.to_datetime(df["time"].astype(int) // 1000, unit="s")# 4. 打印处理后的数据框的尾部几行print(df.tail())
4. 运行结果展示
执行上述代码，将得到一个包含时间和价格的Pandas DataFrame，其尾部数据示例如下：
time price236 2023-05-28 06:00:00 317.86237 2023-05-29 06:00:00 319.43238 2023-05-30 06:00:00 429.99239 2023-05-31 06:00:00 314.64240 2023-06-01 06:00:00 318.9
这清晰地展示了CPU价格随时间变化的趋势数据，并且以结构化的DataFrame形式方便后续分析。
5. 注意事项与适用场景
适用场景： 这种方法适用于数据已经存在于HTML源代码（通常是标签内的JavaScript变量）中的情况。许多图表库在客户端渲染前，会将数据直接嵌入页面。正则表达式的健壮性： 正则表达式依赖于目标网页的特定结构。如果网页结构或JavaScript变量命名方式发生变化，正则表达式可能需要更新。Selenium的必要性： 尽管本例中requests + re更为高效，但Selenium在以下场景仍不可或缺：数据通过AJAX异步加载，且数据接口不直接暴露或难以逆向分析。页面内容完全由JavaScript动态生成，且数据不在原始HTML中。需要模拟用户交互（如点击按钮、填写表单、滚动页面）来触发数据加载。需要处理复杂的验证码或登录流程。数据量： 对于大规模数据抓取，requests + re组合的性能远优于Selenium模拟浏览器，因为它避免了浏览器渲染的开销。网页反爬： 有些网站会检测非浏览器请求（如User-Agent、Referer等），此时可能需要在requests.get()中添加headers参数来模拟浏览器请求。
总结
当目标数据以结构化的JavaScript变量形式存在于网页源代码中时，采用requests库获取页面内容，结合re模块进行正则表达式匹配提取，再利用pandas进行数据整理，是获取图表数据的高效且稳定的最佳实践。这种方法避免了模拟鼠标悬停等复杂且低效的Selenium操作，显著提升了数据抓取的效率和稳定性。在选择抓取策略时，应首先尝试分析页面源代码，判断数据是否可以直接解析，以此作为优先方案。
以上就是如何高效抓取网页图表数据：绕过鼠标悬停，直取JavaScript变量的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1365759.html
微信扫一扫 
支付宝扫一扫 
