带有鼠标悬停弹出数据的 Webscrape 交互式 Grafana 图表答案

【问题标题】：Webscrape Interactive Grafana Chart with Mouse Hover Popup Data带有鼠标悬停弹出数据的 Webscrape 交互式 Grafana 图表
【发布时间】：2021-02-03 00:49:48
【问题描述】：

我想知道如何提取当鼠标悬停在图形面板内的某个时间范围时弹出的数据。以演示站点为例，我想从https://play.grafana.org/d/000000012/grafana-play-home?orgId=1中提取特定时间的所有Web服务器名称及其值。

例如：

2020-11-11 15:34:50
web_server_01:  26.75
web_server_02:  55.35
web_server_03:  84.90
web_server_04:  112.95

选择时间并不重要，但在某个时间弹出的数据很重要。实际上有 3 种解决方案，但只有方法 1 或 2 是首选。不幸的是，我不知道如何执行这两种方法。

方法 1 - 使用 Grafana 用于拉入数据并将其绘制在图表上的相同数据存储 API 查询。如图所示，Grafana 没有直接提取数据的 API。

方法 2 - 使用 Selenium 抓取弹出的数据。 https://towardsdatascience.com/scraping-interactive-charts-with-python-2bc20a9c7f5c 有一个解决方案，但这里的区别是我无法捕获弹出消息的 XPATH。它随着鼠标的移动而移动。

方法 3 - 缩短数据时间范围，将其导出为 CSV 格式，然后将数据操作到所需的结果。我想在可能的情况下直接将数据导入脚本而不下载。

【问题讨论】：

标签： python-3.x selenium web-scraping

【解决方案1】：

from selenium.webdriver.common.action_chains import ActionChains

driver.get("https://play.grafana.org/d/000000012/grafana-play-home?orgId=1&from=1612313524334&to=1612316180735")

actions = ActionChains(driver)
canvas=driver.find_element_by_xpath('(//canvas[@class="flot-overlay"])[1]')

actions.move_to_element(canvas).perform()


time.sleep(5)
print(driver.find_element_by_css_selector(
    '[class="graph-tooltip grafana-tooltip"]').text)

使用动作类，然后获取元素

【讨论】：

【解决方案2】：

单击画布后，您会想要突出显示的 div 标签。

wait = WebDriverWait(driver, 5)
driver.get("https://play.grafana.org/d/000000012/grafana-play-home?orgId=1&from=1612313524334&to=1612316180735")
actions = ActionChains(driver)
canvas = wait.until(EC.presence_of_element_located((By.CLASS_NAME, "flot-overlay")))
actions.move_to_element(canvas).perform()
print(wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "div.graph-tooltip-list-item.graph-tooltip-list-item--highlight"))).text)

进口

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait 
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains

输出

web_server_03: 98.70

【讨论】：

你如何获得 XPATH？我在 CSS 面板中没有看到。
鼠标悬停在画布上后弹出。
谢谢。如果我想将光标移动到特定时间，您对如何实现这一点有任何想法吗？我相信 move_to_element_with_offset 是要走的路，但我不确定如何获得 x-offset 和 y-offset 数。
偏移量是画布中心相对于时间的位置。最有可能是画布宽度/12（时间段数）* 索引。
我已将 canvas = wait.until(EC.presence_of_element_located((By.XPATH, '(//canvas[@class="flot-overlay"])[2]'))) 更改为获取完整数据。