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

Question

我主要是这个平台的潜伏者，我尝试使用已经提出的问题的答案来解决我的问题，但我找不到解决我当前问题的问题。我尝试从 website website using scrapy. I'm already able to scrape most of the data I need however, there are two interactive highcharts i'd like to have the data from.Picture of first graph

中抓取数据

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

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

提示 and/or 说明如何从该网站抓取此图表数据将不胜感激。

要查看图表，您必须登录 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 格式导出数据。不过这个网站好像屏蔽了这个功能。

Answer 1

这不完全是一种 scrape/fetching 方法，但是从 Highcharts 站点，您可以使用 Web 控制台工具查看整个图表配置。尝试使用：

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

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

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

Scraping data from an interactive highchart.js graph

javascript

scrapy

highcharts

web-scraping

更新：