本教程探讨了如何高效地从动态网页图表中抓取数据，特别是当数据通过鼠标悬停显示时。我们对比了基于Selenium模拟鼠标悬停的方法与直接解析网页源代码中嵌入的JavaScript数据的方法，并重点介绍了后者，利用requests和正则表达式从HTML中提取结构化数据，结合pandas进行处理，从而实现更稳定、高效的数据抓取。
在现代网页应用中，数据常以交互式图表的形式呈现，许多详细信息（如价格、日期等）仅在用户将鼠标悬停在特定图表元素上时才通过工具提示（tooltip）显示。对于数据抓取任务，初学者可能直观地想到使用selenium等自动化工具来模拟鼠标悬停行为。然而，这种方法在某些场景下可能效率低下且不够稳定。
挑战与传统方法（Selenium）的局限性
当需要抓取图表上所有数据点的鼠标悬停信息时，使用Selenium模拟每个点的鼠标悬停是一个常见的思路。例如，尝试定位图表画布元素，然后循环对其进行鼠标悬停操作。
考虑以下基于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 ECoptions = 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的错误。即使能够正确获取到多个可迭代的元素，模拟逐个鼠标悬停并等待工具提示出现，也存在以下局限性：
效率低下： 每次操作都需要浏览器渲染，速度慢，资源消耗大。稳定性差： 依赖于页面加载速度、元素可见性、动画效果等，容易出现时序问题或元素未找到的错误。复杂性高： 需要处理各种等待条件、异常情况，代码维护成本高。冗余操作： 许多情况下，图表数据在页面加载时就已经存在于HTML或JavaScript代码中，无需模拟用户交互即可直接提取。
高效策略：直接解析JavaScript嵌入数据
对于许多动态图表，其展示的数据通常不是通过AJAX请求在鼠标悬停时才加载的，而是页面加载时就已嵌入在HTML的某个标签中，作为JavaScript变量的一部分。识别并直接从网页源代码中提取这些数据，是更高效、稳定和推荐的方法。
立即学习“Java免费学习笔记（深入）”；
核心思路：
检查网页源代码： 使用浏览器开发者工具（F12），查看“Elements”或“Sources”标签，或直接“查看页面源代码”（Ctrl+U），搜索与图表数据相关的关键词（如“dataArray”、“chartData”等）。定位数据模式： 找到数据在JavaScript代码中的存储格式，通常是数组或JSON对象。使用requests获取页面内容： 避免启动浏览器，直接通过HTTP请求获取HTML文本。使用正则表达式提取数据： 根据定位到的数据模式，编写正则表达式来精确匹配并提取所需的数据点。使用pandas进行数据处理： 将提取到的原始数据转换为结构化的DataFrame，便于后续分析。
实战演练：抓取CPU价格历史数据
以CPU Benchmark网站为例，其“Pricing History”图表的数据在页面加载时已作为JavaScript变量dataArray嵌入到HTML中。我们可以直接解析这些数据。
import reimport pandas as pdimport requests# 目标URLurl = "https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904"# 使用requests获取页面HTML内容html_text = requests.get(url).text# 使用正则表达式从HTML中提取数据# 匹配模式：dataArray.push({x: 数字, y: 数字或小数})# (d+) 捕获x的值（时间戳，整数）# ([d.]+) 捕获y的值（价格，整数或小数）df = pd.DataFrame( re.findall(r"dataArray.push({x: (d+), y: ([d.]+)}", html_text), columns=["time", "price"],)# 将时间戳转换为日期时间格式# 原始时间戳是毫秒，需要除以1000转换为秒，然后指定单位为秒df["time"] = pd.to_datetime(df["time"].astype(int) // 1000, unit="s")# 打印数据框的最后几行print(df.tail())
代码解析：
导入库： re用于正则表达式操作，pandas用于数据结构化和处理，requests用于发送HTTP请求。获取HTML： requests.get(url).text直接获取页面的全部HTML内容，避免了浏览器启动的开销。正则表达式提取：re.findall(r”dataArray.push({x: (d+), y: ([d.]+)}”, html_text)是此方法的核心。dataArray.push({x:：匹配JavaScript中数据推送的固定前缀。.需要转义。(d+)：第一个捕获组，匹配一个或多个数字，用于提取时间戳（x值）。, y:：匹配固定分隔符。([d.]+)：第二个捕获组，匹配一个或多个数字或点，用于提取价格（y值）。re.findall会返回所有匹配到的元组列表，每个元组包含两个捕获组的内容。创建DataFrame： 将re.findall的结果直接传递给pd.DataFrame，并指定列名”time”和”price”。时间戳转换： 原始的time列是字符串类型的时间戳，且是毫秒级的。df[“time”].astype(int)：将时间戳转换为整数类型。// 1000：将毫秒转换为秒。pd.to_datetime(…, unit=”s”)：将秒级Unix时间戳转换为datetime对象。结果输出： df.tail()打印数据框的最后几行，展示了抓取并处理后的价格历史数据。
输出示例：
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
优势与适用场景
这种直接解析JavaScript嵌入数据的方法具有显著优势：
效率高： 无需启动和维护浏览器实例，仅进行HTTP请求和字符串处理，速度极快。稳定性强： 不受页面渲染、动画效果或元素可见性的影响，只要数据模式不变，抓取就稳定。资源消耗低： 内存和CPU占用远低于Selenium。代码简洁： 避免了复杂的Selenium等待和操作逻辑。
适用场景：
当目标数据在页面加载时已存在于HTML源代码的标签中，作为JavaScript变量或函数参数。无需模拟复杂的JavaScript执行或用户交互（如点击、滚动、表单填写）。目标是批量获取数据而非模拟用户行为。
注意事项
数据源识别： 在开始抓取前，务必使用浏览器开发者工具仔细检查网页的源代码和网络请求。这是判断数据是否直接嵌入HTML的关键一步。如果数据是通过后续AJAX请求动态加载的，则可能需要模拟这些请求或使用Selenium等待数据加载。正则表达式的健壮性： 网页结构和JavaScript代码可能会更新，导致正则表达式失效。因此，定期检查和维护正则表达式的准确性是必要的。反爬机制： 即使使用requests，网站也可能存在反爬机制，如User-Agent检测、IP限制、验证码等。可能需要添加请求头、使用代理IP或处理验证码。Selenium的必要性： 当数据确实需要JavaScript渲染、动态加载、或涉及复杂的登录、点击分页、表单提交等用户交互时，Selenium仍然是不可替代的强大工具。选择哪种工具，应根据具体的抓取任务和目标网站的数据加载方式来决定。
总结
对于网页数据抓取，理解数据是如何呈现和加载的至关重要。并非所有动态显示的数据都需要通过模拟用户交互来获取。通过分析网页源代码，识别并直接解析JavaScript中嵌入的数据，往往是获取图表数据最有效和稳定的方法。这种方法结合requests、正则表达式和pandas，能够构建出高效、健壮的数据抓取解决方案，大大提升爬虫的性能和可靠性。在实际应用中，灵活运用多种工具和技术，根据具体场景选择最佳策略，是成为一名优秀爬虫工程师的关键。
以上就是掌握网页图表数据抓取：从鼠标悬停到直接解析JavaScript的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1365761.html
微信扫一扫 
支付宝扫一扫 
