掌握网页图表数据抓取：从鼠标悬停到直接解析JavaScript

在现代网页应用中，数据常以交互式图表的形式呈现，许多详细信息（如价格、日期等）仅在用户将鼠标悬停在特定图表元素上时才通过工具提示（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的某个<script>标签中，作为JavaScript变量的一部分。识别并直接从网页源代码中提取这些数据，是更高效、稳定和推荐的方法。

立即学习“Java免费学习笔记（深入）”；

核心思路：

1. 检查网页源代码： 使用浏览器开发者工具（F12），查看“Elements”或“Sources”标签，或直接“查看页面源代码”（Ctrl+U），搜索与图表数据相关的关键词（如“dataArray”、“chartData”等）。
2. 定位数据模式： 找到数据在JavaScript代码中的存储格式，通常是数组或JSON对象。
3. 使用requests获取页面内容： 避免启动浏览器，直接通过HTTP请求获取HTML文本。
4. 使用正则表达式提取数据： 根据定位到的数据模式，编写正则表达式来精确匹配并提取所需的数据点。
5. 使用pandas进行数据处理： 将提取到的原始数据转换为结构化的DataFrame，便于后续分析。

实战演练：抓取CPU价格历史数据

以CPU Benchmark网站为例，其“Pricing History”图表的数据在页面加载时已作为JavaScript变量dataArray嵌入到HTML中。我们可以直接解析这些数据。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

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"

# 使用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())

代码解析：

1. 导入库： re用于正则表达式操作，pandas用于数据结构化和处理，requests用于发送HTTP请求。
2. 获取HTML： requests.get(url).text直接获取页面的全部HTML内容，避免了浏览器启动的开销。
3. 正则表达式提取：
   • re.findall(r"dataArray\.push\({x: (\d+), y: ([\d.]+)}", html_text)是此方法的核心。
   • dataArray\.push\({x:：匹配JavaScript中数据推送的固定前缀。.需要转义。
   • (\d+)：第一个捕获组，匹配一个或多个数字，用于提取时间戳（x值）。
   • , y:：匹配固定分隔符。
   • ([\d.]+)：第二个捕获组，匹配一个或多个数字或点，用于提取价格（y值）。
   • re.findall会返回所有匹配到的元组列表，每个元组包含两个捕获组的内容。
4. 创建DataFrame： 将re.findall的结果直接传递给pd.DataFrame，并指定列名"time"和"price"。
5. 时间戳转换： 原始的time列是字符串类型的时间戳，且是毫秒级的。
   • df["time"].astype(int)：将时间戳转换为整数类型。
   • // 1000：将毫秒转换为秒。
   • pd.to_datetime(..., unit="s")：将秒级Unix时间戳转换为datetime对象。
6. 结果输出： df.tail()打印数据框的最后几行，展示了抓取并处理后的价格历史数据。

输出示例：

                   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

优势与适用场景

这种直接解析JavaScript嵌入数据的方法具有显著优势：

• 效率高： 无需启动和维护浏览器实例，仅进行HTTP请求和字符串处理，速度极快。
• 稳定性强： 不受页面渲染、动画效果或元素可见性的影响，只要数据模式不变，抓取就稳定。
• 资源消耗低： 内存和CPU占用远低于Selenium。
• 代码简洁： 避免了复杂的Selenium等待和操作逻辑。

适用场景：

• 当目标数据在页面加载时已存在于HTML源代码的<script>标签中，作为JavaScript变量或函数参数。
• 无需模拟复杂的JavaScript执行或用户交互（如点击、滚动、表单填写）。
• 目标是批量获取数据而非模拟用户行为。

注意事项

1. 数据源识别： 在开始抓取前，务必使用浏览器开发者工具仔细检查网页的源代码和网络请求。这是判断数据是否直接嵌入HTML的关键一步。如果数据是通过后续AJAX请求动态加载的，则可能需要模拟这些请求或使用Selenium等待数据加载。
2. 正则表达式的健壮性： 网页结构和JavaScript代码可能会更新，导致正则表达式失效。因此，定期检查和维护正则表达式的准确性是必要的。
3. 反爬机制： 即使使用requests，网站也可能存在反爬机制，如User-Agent检测、IP限制、验证码等。可能需要添加请求头、使用代理IP或处理验证码。
4. Selenium的必要性： 当数据确实需要JavaScript渲染、动态加载、或涉及复杂的登录、点击分页、表单提交等用户交互时，Selenium仍然是不可替代的强大工具。选择哪种工具，应根据具体的抓取任务和目标网站的数据加载方式来决定。

总结

对于网页数据抓取，理解数据是如何呈现和加载的至关重要。并非所有动态显示的数据都需要通过模拟用户交互来获取。通过分析网页源代码，识别并直接解析JavaScript中嵌入的数据，往往是获取图表数据最有效和稳定的方法。这种方法结合requests、正则表达式和pandas，能够构建出高效、健壮的数据抓取解决方案，大大提升爬虫的性能和可靠性。在实际应用中，灵活运用多种工具和技术，根据具体场景选择最佳策略，是成为一名优秀爬虫工程师的关键。

以上就是掌握网页图表数据抓取：从鼠标悬停到直接解析JavaScript的详细内容，更多请关注php中文网其它相关文章！