Python通达信数据接口完整指南：免费获取A股行情与财务数据的终极解决方案
2026/6/11 15:27:50
影刀RPA进阶教程：图表数据提取——折线图、柱状图、饼图的数据获取方法
网页上不是所有数据都在表格里。
仪表盘的折线图、销售报表的柱状图、市场分析的饼图——这些可视化的图表，常规的「获取元素文本」指令根本拿不到数据。
图表数据的来源有三种：有接口的、有绑定的、只有图片的。这篇文章按难度递进，讲清楚三种场景的处理方法。
一、先判别属于哪种图表
打开目标页面，按F12打开开发者工具，找到图表所在的DOM区域。
按来源分三种：
| 类型 | 特征 | 提取难度 |
|---|---|---|
| SVG图表 | DOM里能看到<svg>+<rect><circle><path> | ★★ 中等 |
| Canvas图表 | DOM里只有一个<canvas>标签，看不到子元素 | ★★★★ 困难 |
| 图片图表 | 直接是一张<img src="xxx.png"> | ★★★★★ 极难 |
影刀适合处理的是SVG图表——数据以结构化的方式存在DOM里，可以定位子元素。Canvas只能靠截屏+OCR，图片只能上OCR。
二、SVG图表的数据提取（最常见场景）
ECharts、Highcharts、Recharts 等主流图表库都输出SVG。我们以最常见的ECharts为例。
步骤1：找到SVG结构
打开页面 → F12 → 点击元素选择器 → 点击图表 → 在Elements面板里找到<svg>标签。
展开SVG，你会看到：
<svg><gclass="bar"><rectx="50"y="200"width="30"height="100"fill="#5470c6"/><rectx="100"y="150"width="30"height="150"fill="#91cc75"/><rectx="150"y="100"width="30"height="200"fill="#fac858"/></g><gclass="axis">[video(video-oNZ5q7rB-1781112933008)(type-csdn)(url-https://live.csdn.net/v/embed/525010)(image-https://v-blog.csdnimg.cn/asset/f4faa587144cb7070f19e8b36813806b/cover/Cover0.jpg)(title-店群矩阵自动化突破运营极限！)]<textx="65"y="280">1月</text><textx="115"y="280">2月</text><textx="165"y="280">3月</text></g></svg>柱状图每个柱子就是一个<rect>，高度(height)就是数值，标签在<text>里。
步骤2：用影刀捕获元素列表
在影刀里，图表中的每个柱子都是「相似元素」。用「获取相似元素列表」可以把所有柱子都抓到。
# 捕获柱状图的所有rect获取相似元素列表("图表柱子")->柱子列表# 遍历提取数据=[]遍历列表(柱子列表,柱子):height=获取元素属性值(柱子,"height")# SVG属性数据追加(数据,整数(height))输出日志(f"提取到的值：{数据}")# 输出: [100, 150, 200, 180, 220]步骤3：还原真实数值
SVG里存的是像素值，要还原成真实数据。比如图表最大高度200px代表销售额100万，那高度100px的柱子就是50万。
公式：
真实值 = (像素高度 / 图表最大像素高度) × 数据最大值# 假设：图表最大像素200px，数据范围0~100万图表最大像素=200数据最大值=1000000还原值=[]遍历列表(所有高度值,像素值):比例=像素值/图表最大像素 真实=round(比例*数据最大值,2)还原值追加(真实)有些图表会直接在SVG里用data-value属性存真实值，那就更简单了，直接读属性就行。
三、折线图的数据提取
折线图的数据藏在<path>标签的d属性里，格式是SVG路径命令：
<pathd="M50,200 L100,150 L150,100 L200,180"/>M50,200是起点坐标，L100,150是从(50,200)画线到(100,150)。y坐标越小，在屏幕上位置越高，数值越大。
Python代码指令做解析
# 在影刀的Python代码指令里执行importre# 假设从元素属性拿到了path的d值d_attr="M50,200 L100,150 L150,100 L200,180 L250,140"# 用正则提取所有坐标coords=re.findall(r'([\d.]+),([\d.]+)',d_attr)# 只取y坐标（第2个值，越小数值越大）y_values=[float(y)forx,yincoords]print(f"折线图的Y坐标序列:{y_values}")# 输出: [200.0, 150.0, 100.0, 180.0, 140.0]# 计算真实值（假设200对应0，100对应最大值）y_min=min(y_values)y_max=max(y_values)chart_range=1000# 假设数据范围0~1000real_values=[]foryiny_values:# y越小值越大，所以要倒转real=round((y_max-y)/(y_max-y_min)*chart_range,2)real_values.append(real)print(f"还原后的真实值:{real_values}")# 输出: [0.0, 500.0, 1000.0, 200.0, 600.0]四、饼图的数据提取
饼图在SVG里用<path>画扇形，数据通常以文本标签的形式直接显示在图例里。
方法：直接读图例元素
图例通常是单独的DOM结构，放在图表旁边：
<divclass="legend"><spanclass="legend-item">品类A: 35%</span><spanclass="legend-item">品类B: 28%</span><spanclass="legend-item">品类C: 22%</span><spanclass="legend-item">品类D: 15%</span></div>这种情况下直接用「获取相似元素列表」+「获取元素文本」就行，比从SVG里抠数据快得多。
# 捕获饼图图例获取相似元素列表("饼图图例项")->图例列表 结果=[]遍历列表(图例列表,图例项):文本=获取元素文本(图例项)结果追加(文本)# 输出: ["品类A: 35%", "品类B: 28%", "品类C: 22%", "品类D: 15%"]如果没有图例，饼图的扇形数据可以用弧线的stroke-dasharray属性计算角度，但过于复杂，建议换方案。
五、Canvas图表怎么处理
Canvas只有一个<canvas>元素，内部全是像素，没有可捕获的子元素。
方案A：数据来源于API（最佳方案）
打开F12 → Network面板 → 刷新页面 → 按XHR/Fetch过滤。
图表的数据几乎都是通过API接口返回的。找到返回JSON的那条请求：
{"data":{"jan":12000,"feb":15000,"mar":18000}}然后在影刀里用「HTTP请求」指令直接调这个接口，不用管图表怎么画的。
temu店群自动化报活动案例
# 直接调图表背后的APIHTTP请求(方法="GET",地址="https://api.example.com/dashboard/sales",请求头={"Authorization":"Bearer xxx"})->响应结果 图表数据=JSON解析(响应结果["data"])# 直接拿到真实数据，精度100%方案B：截屏+OCR（兜底方案）
如果API拿不到，最后的手段就是对Canvas区域截屏，然后用OCR识别。
# 1. 截取图表区域截取元素截图("图表区域")->截图文件# 2. 用影刀的OCR指令识别OCR识别(截图文件)->识别文本# 3. 用正则提取数字importre 数字列表=re.findall(r'\d+[\.,]?\d*',识别文本)OCR的准确率取决于图表清晰度，可能漏数字或识别错，建议只当兜底。
六、稳定性建议
图表加载等待
和普通元素不同，图表是JS渲染的。页面加载完不代表图表渲染完。
打开网页("https://dashboard.example.com")# 等待图表容器出现等待元素出现("图表容器",10秒)# 额外等2秒让JS渲染完成（图表库一般需要额外渲染时间）固定等待(2秒)# 然后再开始提取获取相似元素列表("图表柱子")数据核对
提取完后加一步自动核对：提取到的数据条数和图例显示的条目数一致。
提取到的图例数量=列表长度(图例列表)提取到的柱子数量=列表长度(柱子列表)如果 提取到的图例数量!=提取到的柱子数量:输出日志(f"警告：数据条数不匹配！图例{提取到的图例数量}vs 柱子{提取到的柱子数量}")七、推荐资源
- ECharts官方文档：echarts.apache.org — 了解常见图表的数据格式，有助于逆向API
- Chrome DevTools Network面板使用指南 — 学会拦截API请求，大量图表数据都可以跳过前端直接拿
作者：林焱
本文为《影刀RPA学习手册》系列文章之一，内容源于实操经验的整理与分享。