
在网页数据抓取过程中,我们经常遇到需要获取图表上鼠标悬停时才显示的数据(如价格历史、性能曲线等)。常见的直觉是使用自动化测试工具如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
# ... (初始化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的运行时错误。即使修正了迭代问题,模拟大量鼠标悬停操作来获取所有数据,效率也极其低下,且容易因页面加载、元素定位不准确等问题导致抓取失败。
对于许多动态加载的图表数据,尤其是使用JavaScript库(如CanvasJS、ECharts、Highcharts等)渲染的图表,其数据源往往在页面加载时就已经嵌入到HTML的<script>标签中,或者通过AJAX请求获取。在这种情况下,最高效的方法是直接从网页源代码中解析这些原始数据,而不是通过模拟浏览器行为。
立即学习“Java免费学习笔记(深入)”;
通过检查目标网页的源代码(通常通过浏览器开发者工具),我们发现价格历史数据被存储在一个JavaScript变量中,以dataArray.push({x: ..., y: ...})的形式存在。这种结构非常适合使用正则表达式进行提取。
以下是使用requests、re和pandas库实现高效数据抓取的完整代码:
import re
import pandas as pd
import requests
# 目标网页URL
url = "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())执行上述代码,将得到一个包含时间和价格的Pandas DataFrame,其尾部数据示例如下:
time price 236 2023-05-28 06:00:00 317.86 237 2023-05-29 06:00:00 319.43 238 2023-05-30 06:00:00 429.99 239 2023-05-31 06:00:00 314.64 240 2023-06-01 06:00:00 318.9
这清晰地展示了CPU价格随时间变化的趋势数据,并且以结构化的DataFrame形式方便后续分析。
当目标数据以结构化的JavaScript变量形式存在于网页源代码中时,采用requests库获取页面内容,结合re模块进行正则表达式匹配提取,再利用pandas进行数据整理,是获取图表数据的高效且稳定的最佳实践。这种方法避免了模拟鼠标悬停等复杂且低效的Selenium操作,显著提升了数据抓取的效率和稳定性。在选择抓取策略时,应首先尝试分析页面源代码,判断数据是否可以直接解析,以此作为优先方案。
以上就是如何高效抓取网页图表数据:绕过鼠标悬停,直取JavaScript变量的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号