如何从网页的Highcharts趋势图提取数据？附实例页面

一、JavaScript（浏览器控制台直接提取） #

页面用的是Highcharts，图表的所有原始数据都存在浏览器的全局Highcharts实例里，不用费劲解析HTML：

1. 打开目标网页，按F12调出控制台
2. 粘贴这段代码执行：

// 获取页面上的第一个Highcharts图表实例
const chart = Highcharts.charts[0];
// 提取每个数据点的月份、空置率、套数
const vacancyData = chart.series[0].data.map(point => ({
  月份: point.category,
  空置率: `${point.y}%`,
  空置套数: point.options.extra // 若字段不对，可查看point对象属性调整
}));
// 以表格形式打印结果，方便查看
console.table(vacancyData);
// 一键复制到剪贴板
copy(vacancyData);

小技巧：如果point.options.extra不是空置套数字段，可先悬停目标数据点，在控制台输入Highcharts.charts[0].series[0].data[0]（替换索引为对应数据点位置），查看对象属性找到对应字段。

二、Python（自动爬取方案） #

如果需要批量处理或自动化操作，用Playwright模拟浏览器加载页面后提取：

1. 先安装依赖：

pip install playwright
playwright install chromium

2. 运行这段代码：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动可视化浏览器（headless=False可看到窗口，调试用）
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://sqmresearch.com.au/graph_vacancy.php?postcode=2000")
    # 等待图表加载完成
    page.wait_for_selector(".highcharts-container")
    # 执行JS逻辑提取数据
    data = page.evaluate("""
        const chart = Highcharts.charts[0];
        return chart.series[0].data.map(point => ({
            month: point.category,
            vacancy_rate: `${point.y}%`,
            vacancy_count: point.options.extra
        }));
    """)
    # 打印提取结果
    for item in data:
        print(f"{item['month']}：空置率{item['vacancy_rate']}，空置套数{item['vacancy_count']}")
    browser.close()

注意：如果页面加载缓慢，可添加page.wait_for_timeout(3000)（等待3秒）再执行提取逻辑。

核心原理 #

Highcharts渲染图表时，所有原始数据都会存储在图表实例的series.data集合中，鼠标悬停显示的内容只是对这些数据的格式化展示，直接从实例中提取数据比解析HTML隐藏元素更高效可靠。

内容的提问来源于stack exchange，提问作者CyberPlayerOne