javascript - 从交互式 highchart.js 图中抓取数据
问题描述
我基本上是这个平台上的一个潜伏者,并尝试使用已经提出的问题的答案来解决我的问题,但我找不到当前问题的问题。我尝试使用 scrapy从这个网站上抓取数据。我已经能够抓取我需要的大部分数据,但是有两个交互式高图我想从中获取数据。第一张图的图片
到目前为止我尝试了什么:
- 直接从 html 响应中提取数据,但我只能访问轴值,所以这种方法不起作用。
- 通过在浏览器中使用开发工具查找 API 调用来提取数据,类似于此方法。然而,唯一可见的 XHR 称为足迹,不包含任何响应。在足迹的启动器选项卡中是一个指向https://crowdcircus.com/js/app.js?id=6677107ebf6c7824be09的请求调用堆栈,但我不知道这是否有帮助,因为我对 json 和 webscraping 真的很陌生.
非常感谢您提供如何从本网站抓取此图表数据的提示和/或解释。
要查看图表,您必须在此处登录。我创建了一个一次性帐户:电子邮件:mivop31962@aranelab.com
,密码:12345
所以你可以看到数据。
更新:
塞巴斯蒂安的回答为我指明了正确的方向。我最终使用scarpy_splash
which 允许使用 lua 执行 javascript 代码。使用下面的代码,我可以抓取我需要的所有数据。
LUA_SCRIPT = """
function main(splash)
-- Get cookies from previous session
splash:init_cookies(splash.args.cookies)
assert(splash:go(splash.args.url))
assert(splash:wait(0.5))
-- Extract data from page
-- Read amount of variables in second table
table_2_no_series = splash:evaljs('Highcharts.charts[1].series.length')
-- If second table has more variable then one, get this data aswell
if (table_2_no_series==2) or (table_2_no_series==3) then
table_2_y1_data = splash:evaljs('Highcharts.charts[1].series[0].yData')
table_2_y1_name = splash:evaljs('Highcharts.charts[1].series[0].name')
end
if (table_2_no_series==3) then
table_2_y3_data = splash:evaljs('Highcharts.charts[1].series[2].yData')
table_2_y3_name = splash:evaljs('Highcharts.charts[1].series[2].name')
end
return {
-- Extract webiste title
title = splash:evaljs('document.title'),
-- Extract first table data
table_1_name = splash:evaljs('Highcharts.charts[0].title.textStr'),
-- Extract Timestamps
table_1_x = splash:evaljs('Highcharts.charts[0].series[0].xAxis.categories'),
-- Extract Finanzierungsstand
table_1_y_data = splash:evaljs('Highcharts.charts[0].series[1].yData'),
table_1_y_name = splash:evaljs('Highcharts.charts[0].title.textStr'),
-- Extract second table data
table_2_y1_data,
table_2_y1_name,
table_2_y3_data,
table_2_y3_name,
cookies = splash:get_cookies(),
}
end
"""
SCRAPY_ARGS = {
'lua_source': LUA_SCRIPT,
'cookies' : self.cookies
}
# Look for json data if we sucessfully logged in
yield SplashRequest(url=response.url,
callback=self.parse_highchart_data,
endpoint='execute', args=SCRAPY_ARGS,
session_id="foo")
注意:highchart api 也有一个.getCSV
以 csv 格式导出数据。但是,该站点似乎阻止了此功能。
解决方案
这不完全是一种抓取/获取方法,但是从 Highcharts 站点,您可以使用 Web 控制台工具查看整个图表配置。尝试使用:
console.log(Highcharts.charts)
它显示了页面上呈现的图表的数组。接下来,转到特定图表 -> 系列 -> 数据,例如:
console.log(Highcharts.charts[0].series[1].data)
推荐阅读
- r - 函数“if”应用于每个单元格
- javascript - 通过 JS 开启 CSS 效果
- java - 在不使用任何没有循环的库的情况下检查给定的字符串是否为回文
- wpf - Data Binding multiple items in code on a listbox
- java - 如何在 Flink 中为 Google Cloud Storage 创建 RecoverableWriter
- c# - 如何仅提取数字,而不是任何运算符
- ruby-on-rails - 运行rails服务器时克隆的项目不会启动
- amadeus - 向 Amadeus low-fare-search API 运行获取请求时收到 404 错误
- sql - 在 postgresql 中打开和关闭数量查询
- regex - 正则表达式提取第一个单词以元音结尾的行