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.
I use selenium in the following manner:
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()
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")
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.
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.
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?
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)
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.
When I use the CSS selector "g.highcharts-axis-labels tspan" it returns all the fighter's names and when I use "g.highcharts-data-labels tspan" it returns all the percents for line movement.
So you should be able to use something like
labels = driver.find_elements_by_css_selector("g.highcharts-axis-labels tspan")
data = driver.find_elements_by_css_selector("g.highcharts-data-labels tspan")
for i in range(0, len(labels) - 1)
print("Fighter: " + labels[i] + " (" + data[i] + ")")
An alternative is to use the command that Pawel Fus recommended,
Highcharts.charts[0].series[0].options.data
You should be able to execute that using JSE and it returns an array of arrays. You can then parse through that and get the data you want. It's up to you...
链接地址: http://www.djcxy.com/p/88738.html上一篇: 如何在高图中以编程方式关闭工具提示？