从交互式 highchart.js 图中抓取数据答案

【问题标题】：Scraping data from an interactive highchart.js graph从交互式 highchart.js 图中抓取数据
【发布时间】：2021-04-05 05:46:41
【问题描述】：

我基本上是这个平台上的一个潜伏者，并尝试使用已经提出的问题的答案来解决我的问题，但我找不到当前问题的问题。我尝试使用 scrapy 从这个 website 网站上抓取数据。我已经能够抓取我需要的大部分数据，但是我想从两个交互式高图获取数据。Picture of first graph

到目前为止我尝试了什么：

直接从 html 响应中提取数据，但我只能访问轴值，因此 this 方法不起作用。
通过在浏览器中使用开发工具查找 API 调用来提取数据，类似于this 方法。然而，唯一可见的 XHR 称为 footprint 并且不包含任何响应。在 footproint 的启动器选项卡中是一个指向 https://crowdcircus.com/js/app.js?id=6677107ebf6c7824be09 的请求调用堆栈，但我不知道这是否有帮助，因为我对 json 和网络抓取真的很陌生。

非常感谢您提供如何从本网站抓取此图表数据的提示和/或说明。

要查看图表，您必须登录 here。我创建了一个一次性帐户：电子邮件：mivop31962@aranelab.com，密码：12345，以便您查看数据。

更新：

塞巴斯蒂安的回答为我指明了正确的方向。我最终使用了scarpy_splash，它允许使用 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 格式导出数据。但是，该网站似乎阻止了此功能。

【问题讨论】：

标签： javascript web-scraping highcharts scrapy

【解决方案1】：

这并不完全是一种抓取/获取方法，但在 Highcharts 网站上，您可以使用 Web 控制台工具查看整个图表配置。尝试使用：

console.log(Highcharts.charts) 显示页面上呈现的图表的数组。接下来，转到特定图表 -> 系列 -> 数据，例如：

console.log(Highcharts.charts[0].series[1].data)

【讨论】：