【数据分析】网页数据提取

huojunan

最近需要用到http://www.aqistudy.cn/里的左侧菜单栏的监测曲线里的PM2.5数据，

监测曲线

之前都是逐个手工输入excel，遇到数据量大的时候就很费时费力了，而且页面会定时刷新，刷新后需要重新设定检索时间段，非常麻烦，所以希望能从网页中提取出不同时间点下的PM2.5数据。

先试了excel的数据导入，但是显示不了窗口，

不显示

但是可以输出SVG文件，右键可以查看源代码，用SVGdeveloper确定了坐标轴和数据点对应的代码，但是理解不了，烦请各位大侠给讲讲，下面是2016年3月13日00：00时单点SVG chart.rar (1.3 KB, 下载次数: 73)

2016-3-14 16:39 上传

点击文件名下载附件

对应的代码

1. <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" width="600" height="400">
   
2.         <desc>Created with Highcharts 3.0.9</desc>
   
3.         <defs>
   
4.                 <clipPath id="highcharts-52">
   
5.                         <rect fill="none" x="0" y="0" width="511" height="309"></rect>
   
6.                 </clipPath>
   
7.         </defs>
   
8.         <rect rx="0" ry="0" fill="#FFFFFF" x="0" y="0" width="600" height="400"></rect>
   
9.         <g class="highcharts-grid"></g>
   
10.         <g class="highcharts-grid">
    
11.                 <path fill="none" d="M 69 57.5 L 580 57.5" stroke="#C0C0C0" stroke-width="1" opacity="1"></path>
    
12.                 <path fill="none" d="M 69 135.5 L 580 135.5" stroke="#C0C0C0" stroke-width="1" opacity="1"></path>
    
13.                 <path fill="none" d="M 69 213.5 L 580 213.5" stroke="#C0C0C0" stroke-width="1" opacity="1"></path>
    
14.                 <path fill="none" d="M 69 290.5 L 580 290.5" stroke="#C0C0C0" stroke-width="1" opacity="1"></path>
    
15.                 <path fill="none" d="M 69 367.5 L 580 367.5" stroke="#C0C0C0" stroke-width="1" opacity="1"></path>
    
16.         </g>
    
17.         <g class="highcharts-axis">
    
18.                 <path fill="none" d="M 324.5 367 L 324.5 372" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
    
19.                 <path fill="none" d="M 69 367.5 L 580 367.5" stroke="#C0D0E0" stroke-width="1" visibility="visible"></path>
    
20.         </g>
    
21.         <g class="highcharts-axis">
    
22.                 <text x="28.25" y="212.5" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#4d759e;font-weight:bold;fill:#4d759e;" text-anchor="middle" transform="translate(0,0) rotate(270 28.25 212.5)" visibility="visible">
    
23.                         <tspan x="28.25">PM2.5(ug/m3)</tspan>
    
24.                 </text>
    
25.         </g>
    
26.         <g class="highcharts-series-group">
    
27.                 <g class="highcharts-series" visibility="visible" transform="translate(69,58) scale(1 1)" clip-path="url(#highcharts-52)">
    
28.                         <path fill="none" d="M 245.5 71.07000000000002 L 265.5 71.07000000000002" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" class=" highcharts-tracker"></path>
    
29.                 </g>
    
30.                 <g class="highcharts-markers highcharts-tracker" visibility="visible" transform="translate(69,58) scale(1 1)" clip-path="none">
    
31.                         <path fill="#2f7ed8" d="M 255 67.07000000000002 C 260.328 67.07000000000002 260.328 75.07000000000002 255 75.07000000000002 C 249.672 75.07000000000002 249.672 67.07000000000002 255 67.07000000000002 Z"></path>
    
32.                 </g>
    
33.         </g>
    
34.         <text x="295" y="25" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:16px;color:#274b6d;fill:#274b6d;" text-anchor="middle" class="highcharts-title">
    
35.                 <tspan x="295">北京PM2.5小时变化趋势</tspan>
    
36.         </text>
    
37.         <text x="295" y="40" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#4d759e;fill:#4d759e;" text-anchor="middle" class="highcharts-subtitle">
    
38.                 <tspan x="295">最小值:154  平均值:154.0  最大值:154</tspan>
    
39.         </text>
    
40.         <g class="highcharts-axis-labels">
    
41.                 <text x="324.5" y="381" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#666;cursor:default;fill:#666;" text-anchor="middle" opacity="1">
    
42.                         <tspan x="324.5">03-13</tspan>
    
43.                 </text>
    
44.         </g>
    
45.         <g class="highcharts-axis-labels">
    
46.                 <text x="61" y="370" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#666;cursor:default;fill:#666;" text-anchor="end" opacity="1">
    
47.                         <tspan x="61">0</tspan>
    
48.                 </text>
    
49.                 <text x="61" y="292.75" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#666;cursor:default;fill:#666;" text-anchor="end" opacity="1">
    
50.                         <tspan x="61">50</tspan>
    
51.                 </text>
    
52.                 <text x="61" y="215.5" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#666;cursor:default;fill:#666;" text-anchor="end" opacity="1">
    
53.                         <tspan x="61">100</tspan>
    
54.                 </text>
    
55.                 <text x="61" y="138.25" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#666;cursor:default;fill:#666;" text-anchor="end" opacity="1">
    
56.                         <tspan x="61">150</tspan>
    
57.                 </text>
    
58.                 <text x="61" y="61" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#666;cursor:default;fill:#666;" text-anchor="end" opacity="1">
    
59.                         <tspan x="61">200</tspan>
    
60.                 </text>
    
61.         </g>
    
62.         <g class="highcharts-tooltip" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-999)">
    
63.                 <rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16" height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></rect>
    
64.                 <rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16" height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></rect>
    
65.                 <rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16" height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></rect>
    
66.                 <rect rx="3" ry="3" fill="rgb(255,255,255)" x="0.5" y="0.5" width="16" height="16" fill-opacity="0.85"></rect>
    
67.                 <text x="8" y="21" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;"></text>
    
68.         </g>
    
69.         <text x="519" y="43" xml:space="preserve" font-family="Microsoft YaHei UI" font-size="12" fill="#FFFFFF" stroke="none" stroke-opacity="0" ></text>
    
70. </svg>
    

复制代码

下面这些是坐标轴的

1. <g class="highcharts-grid" ><path fill="none" d="M 69 57.5 L 580 57.5" stroke="#C0C0C0" stroke-width="1"  opacity="1">
   
2. </path><path fill="none" d="M 69 135.5 L 580 135.5" stroke="#C0C0C0" stroke-width="1"  opacity="1">
   
3.      
   
4. </path><path fill="none" d="M 69 213.5 L 580 213.5" stroke="#C0C0C0" stroke-width="1"  opacity="1">
   
5.      
   
6. </path><path fill="none" d="M 69 290.5 L 580 290.5" stroke="#C0C0C0" stroke-width="1"  opacity="1">
   
7.      
   
8. </path><path fill="none" d="M 69 367.5 L 580 367.5" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g>

复制代码

这个是坐标点的代码：

1. <path fill="#2f7ed8" d="M 255 67.07000000000002 C 260.328 67.07000000000002 260.328 75.07000000000002 255 75.07000000000002 C 249.672 75.07000000000002 249.672 67.07000000000002 255 67.07000000000002 Z">

复制代码

分析到这里时间格式和PM2.5浓度搞不出来，恳请各位大侠相助，谢谢

devcang

没有接口，这样处理太费劲了，，，，，，万一网页稍改变，又得修改代码了

huojunan

devcang 发表于 2016-3-14 19:04
没有接口，这样处理太费劲了，，，，，，万一网页稍改变，又得修改代码了

其实他们的数据也是来自其他的网站 而这个“其他”网站是提供数据接口的，但是这个接口只能提供从你申请之后其的数据，而之前的数据是不能的（没有历史数据查询功能）

junyee

一般的大网站会有 移动版的
,移动版的受限于移动设备屏幕大小,性能(兼顾老手机),HTML代码要简单的多,
LZ可以试着找一找.

beyondsdo8

python水狗一个，这种网页数据用python爬下来应该可以

xyz_123

单从html文件里用规则表达式提取特定字符的话，推荐用AutoIt。
要模拟鼠标点击页面的话，不会。

wlianmin

用lua写个脚本解析一下就好了

liujiaqi

潜水这么多年...冒个泡回答个问题

在浏览器里访问
http://www.aqistudy.cn/html/city_detail.html

按F12 打开浏览器 的调试工具
在 控制台 中运行如下代码 运行，就可以等结果往外复制了，粘贴到excel里可以用 分列 功能分离字段

1. 
   
2. output = "";
   
3. cityparam = encrypt_parameter("北京");//城市
   
4. typeparam = encrypt_parameter(type);
   
5. startTimeparam = encrypt_parameter("2016-03-15 17:00");//开始时间
   
6. endTimeparam = encrypt_parameter("2016-03-16 20:53");//结束时间
   
7. $.ajax({
   
8.     url: '../api/getdata_citydetail.php',
   
9.     data:{'city':cityparam,
   
10.              'type':typeparam,
    
11.              'startTime':startTimeparam,
    
12.              'endTime':endTimeparam
    
13.     },
    
14.     type: "post",
    
15.     success: function (data) {
    
16.         data = eval('(' + decrypt_result(data,cityparam) + ')');
    
17.         if(data.total>0){
    
18.             for(i=0;i<data.rows.length;i++){
    
19.                 output+=data.rows[i].time+" "+data.rows[i].pm2_5+"\r\n";
    
20.             }
    
21.             console.log(output);
    
22.         }
    
23.     }
    
24. });
    

复制代码

huojunan

liujiaqi 发表于 2016-3-16 21:18
潜水这么多年...冒个泡回答个问题

在浏览器里访问

这位先生，这是小的的膝盖，请您收好！

liujiaqi

huojunan 发表于 2016-3-16 23:05
这位先生，这是小的的膝盖，请您收好！

前辈不客气

无意中看了前辈以前的帖子，发现前辈也是化学狗hhhhh

我本科最后一年...开始做毕设的实验了..因为转行所以导师要求很低..比较闲了

前辈现在是在做环境相关的工作哦？