将SVG从Highcharts数据转换为数据点 [英] Converting svg from Highcharts data into data points

问题描述

我希望从该站点的

I am looking to scrape data from this site's mma data and parsing a few highcharts tables. I am clicking a link with selenium and then switching to the chart. I go to this site and click on +420 in the Artem Lobov row for the Pinnacle column. This creates a pop out chart. Then I switch to the active element. I would like to capture the graph drawn by highcharts in response to the click.

我以以下方式使用硒:

actions = ActionChains(driver)
actions.move_to_element(driver.find_element_by_id(pin_id))
actions.click()
actions.perform()
time.sleep(3)
driver.switch_to_active_element()

我能够单击链接并获得图表，但我对高位图表的工作方式有些迷茫.
我正在尝试解析highcharts-series-group 此处 并获取图表中的值.

I was able to click the link and get the chart but I am a bit lost on how highcharts works.
I am trying to parse highcharts-series-group here and get the values in the chart.

我相信可以通过以下方式找到数据

I believe the data can be found by:

soup = bs4.BeautifulSoup(open(driver.page_source), "lxml")
data = soup.find_all('g', {"class":"highcharts-series-group"})[-1].find_all("path")

但这提供了以下，目前尚不清楚如何从中创建图表数据.如评论中所述，它似乎是svg.

However this provides the following and it it is not clear how a chart is created from the data. As noted in the comments, it appears to be svg.

在检查过程中，数据似乎位于<g class="highcharts-series"和<g class="highcharts-series-tracker中，但是根据该数据尚不清楚的高图表将其绘制成图形.

During inspection the data appears to be in <g class="highcharts-series" and <g class="highcharts-series-tracker but its not clear highcharts graphs it from this data.

highcharts如何显示已保存数据中的图形?是否有一种干净的方法可以从显示的highcharts-series-group中获取数据?

How does highcharts display the graph from data saved? Is there a clean way to get the data from the highcharts-series-group as displayed?

推荐答案

我不知道如何将SVG数据转换为您提到的图形中显示的内容，但是编写了以下Selenium Python脚本:

I could not figure out how to convert SVG data into what is displayed on the graph you mentioned, but wrote the following Selenium Python script:

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('https://www.bestfightodds.com/events/ufc-fight-night-108-swanson-vs-lobov-1258')
actions = webdriver.ActionChains(driver)
actions.move_to_element(driver.find_element_by_id('oID1013467091'))
actions.click()
actions.perform()
time.sleep(3)
driver.switch_to_active_element()
chart_number = driver.find_element_by_id('chart-area').get_attribute('data-highcharts-chart')
chart_data = driver.execute_script('return Highcharts.charts[' + chart_number + '].series[0].options.data')
for point in chart_data:
    e = driver.execute_script('return oneDecToML('+ str(point.get('y')) + ')')
    print(point.get('x'), e)

这里我们使用的是Highcharts API和页面源代码中的一些js，它将此图表的服务器响应转换为我们在图形上看到的内容.

Here we are using Highcharts API and some js from the page sources, that converts server response for this chart to what we see on a graph.

这篇关于将SVG从Highcharts数据转换为数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！