从使用 Python 和 Selenium 的 Google 可视化工具创建的图表或表格中抓取数据答案

【问题标题】：Scraping data from charts or tables created using Google Visualization tools using Python and Selenium从使用 Python 和 Selenium 的 Google 可视化工具创建的图表或表格中抓取数据
【发布时间】：2020-02-13 18:11:18
【问题描述】：

我正在尝试从该网站的表格和图表中抓取数据： https://www.portfoliovisualizer.com/fund-performance?s=y&symbol=MUB&symbols=VTEB&benchmark=VWITX&startDate=1%2F1%2F2015&endDate=1%2F31%2F2020

该站点包含两个静态表格，我可以使用 requests 和 BeautifulSoup 解析它们而不会出现任何问题，以及一些通过使用 Google Vizualization 工具创建的动态生成的表格和图表。对于动态生成的部分，我使用了 Selenium webdriver，并且能够在生成动态图表和表格之后获取页面源，所以我看到了我想要提取的值。但是，我不知道如何拉取它们，因为它们在页面源代码中显示如下：

块引用

    <div id="chartDiv2" style="width: 900px; height: 500px;"></div>
    <script>
    function getChartData2() {
    var data2 = google.visualization.arrayToDataTable([['Year', 'Vanguard Tax-Exempt Bond ETF', 'iShares 
    National Muni Bond ETF', 'Vanguard Interm-Term Tx-Ex Inv'],['2015', 0.02622989191078684, 
    0.027694140180976934, 0.020218079771240793],['2016', 0.0017793103198122662, -0.0016512224730700353, 
    8.245768963E-4],['2017', 0.04691417159814648, 0.04723004573804612, 0.04534581696422735],['2018', 
    0.010468419206658197, 0.0092958557816043, 0.01252249494095059],['2019', 0.07344514685363279, 
    0.07055205700158873, 0.06781218369439523],['2020', 0.017556966753828895, 0.01659204635238365, 
    0.0158935038009671]]);
    var formatter2 = new google.visualization.NumberFormat({ pattern: '0.00%' });
    formatter2.format(data2, 1);
    formatter2.format(data2, 2);
    formatter2.format(data2, 3);
    var chart2 = new google.visualization.ColumnChart(document.getElementById('chartDiv2'));
    var options2 = { title: 'Annual Returns', legend: { textStyle: { fontSize: 13 } }, hAxis: { title: 
    'Year'}, vAxis: { dummy: false, title: 'Annual Return', format:'0.0%', minValue: 0}, focusTarget: 
    'category'};
    return [chart2, data2, options2];
    }
    </script>

块引用

使用 find 或 find_all 对汤的任何搜索都会在最外面的表（似乎包含整个网页）处绊倒。我对 Python 很陌生，所以任何帮助都将不胜感激。现在，我能想到的唯一方法是将整个页面源保存为文本文件（我已经这样做了），然后通过搜索正在使用的谷歌可视化工具的每个实例并从那里继续来自己解析它）。这将非常乏味，并且在尝试将其用于另一个链接时可能不是很健壮。

非常感谢您的任何建议。

【问题讨论】：

@mattsmith321，如果我不清楚，我很抱歉，实际上我试图抓取的正是图表下方的表格中的数据，对于造成的混乱，我深表歉意。
知道了。我在考虑 PV 在网站上提供的其他一些图表 + 表格组合。我没有足够注意您发送的链接，并且这些图表没有显示相应的数据表。在下面更新我的答案。
感谢您提供更多信息。如何在 BeautifulSoup 中集成以下代码？我的新手理解是，我需要使用 .find 方法从汤中检索一个对象，然后在该对象内部，我运行下面的代码来检索相关数组。我无法从汤中检索到适当的对象。另外，感谢Tiingo的信息，我不知道，我会看看。我在看指数基金，如果他们的历史业绩数据在那里，我可以复制业绩和风险计算。光伏的财务目标更难复制。
我很抱歉。我没有注意您问题的 BeautifulSoup 部分，主要集中在 Selenium 方面。我没有意识到 BS 主要是一个处理 HTML 和 XML 文件并从中提取信息的工具。因此，您是对的，拉动您想要的东西将具有挑战性。但是，如果您切换到使用 Python 来管理 Selenium 无头驱动程序，则可以在访问页面上的对象并处理它们时获得更好的结果。也许看看realpython.com/modern-web-automation-with-python-and-selenium 的提示。
对于像我这样的新手来说，这是一个非常有用的链接，我会详细研究它，希望它能为我指明正确的方向。非常感谢您花时间研究我的问题。

标签： python selenium web-scraping

【解决方案1】：

getChartData2() 函数将图表可视化呈现为页面上的 SVG。这就是图表支持您将鼠标悬停在图表上时所看到的交互功能的方式。您可以尝试从 DOM 中获取该 SVG 并将其保存为 SVG，以查看它是否会在没有交互性的情况下保留图表。或者您可以尝试将其保存为 PNG。不确定最佳方法。

我可以问一下你想要完成什么吗？从表格中抓取数据然后使用这些数据在您的平台上生成您自己的图表和表格可能会更容易。您甚至可以使用相同的 Google 可视化工具。

作为另一种选择，Tiingo 是一个股票市场数据平台，它的 API 具有非常好的免费访问级别。您可以直接与 Tiingo API 集成以提取您想要的数据，而不是从 PV 中抓取。

希望有帮助！

根据上面 Cimerra 的评论更新：

是的，从 getChartData2() 文本中提取数据将具有挑战性。您是否有权通过您的框架执行页面上的任何 JavaScript？当我打开该页面的 Chrome 开发人员工具时，我可以调用 getChartData2() 并返回三个对象。第二个对象是 data2 对象，理论上您可以对其进行操作以获得您想要的结果。

Tf: Array(6)
  0:
    c: Array(4)
      0: {v: "2015"}
      1: {v: 0.02622989191078684, f: "2.62%"}
      2: {v: 0.027694140180976934, f: "2.77%"}
      3: {v: 0.020218079771240793, f: "2.02%"}

如果您仍然无法做到这一点，我建议您找到数据来源（例如 Tiingo（免费）或 CSI Data（付费但 PV 使用）），然后根据您的需要执行您自己的计算。附带的好处是，您实际上会沉浸在金融世界中，并了解所有这些东西是如何计算的。

当然，这变得非常具有挑战性，然后您最终会重建 PV 为您提供的很多东西。我在 Google Sheets + Tiingo 中重建了 PV 的一小部分，但最后还是一团糟。 PV 最近刚刚实现了订阅模式，我订阅了，因为它是一个很棒的网站，拥有很棒的数据，我不想花所有时间尝试重新创建它。

【讨论】：