关于highcharts基本图表的动态生成

首先，我们从一个python爬虫入手获取想要的动态数值，由于这个程序的使用时间不同获取到的数值自然也不同，首先将python爬虫的代码放出

 1 #!/usr/bin/env python3
 2 # -*- coding: utf-8 -*-
 3 # 获取国内城市 30天内 每天空气质量指数（AQI）
 4 # 数据来源：中华人民共和国环境保护部
 5 import requests
 6 from bs4 import BeautifulSoup
 7 import datetime
 8 import pymysql
 9 
10 ref_url = 'http://datacenter.mep.gov.cn:8099/ths-report/report!list.action'
11 req_url = 'http://datacenter.mep.gov.cn:8099/ths-report/report!list.action'
12 
13 
14 def get_html_content(city='西安', V_DATE='2017-03-01', E_DATE='2017-03-03'):
15     headers = {
16         'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
17         'Accept-Encoding': 'gzip, deflate',
18         'Accept-Language': 'zh-CN,zh;q=0.8',
19         'Content-Type': 'application/x-www-form-urlencoded',
20         'Referer': ref_url,
21         'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36'
22     }
23     data_dict = {
24         'page.pageNo': '1',
25         'xmlname': '1462259560614',
26         'queryflag': 'close',
27         'CITY': city,
28         'isdesignpatterns': 'false',
29         'V_DATE': V_DATE,
30         'E_DATE': E_DATE,
31     }
32     r = requests.post(req_url, data=data_dict, headers=headers, timeout=60)
33     return r.text
34 #制造访问格式 、以及模仿人为浏览
35 
36 def date_format():
37     dd = datetime.datetime.now()
38     E_DATE = dd.strftime('%Y-%m-%d')
39     _31DayAgo = (dd - datetime.timedelta(days=31))
40     V_DATE = _31DayAgo.strftime('%Y-%m-%d')
41     return (V_DATE, E_DATE)
42 #计算起始日期以及终止日期
43 
44 def get_aqi_info(html_content):
45     soup = BeautifulSoup(html_content, 'html.parser')
46     aqi_table = soup.find(id='GridView1')
47     aqi_trs = aqi_table.find_all('tr')[1:]
48     result = {}
49     for aqi_tr in aqi_trs:
50         aqi_tds = aqi_tr.find_all('td')
51         aqi = aqi_tds[3].string
52         dd = aqi_tds[6].string
53         result[dd] = aqi
54     return result
55 
56 
57 if __name__ == '__main__':
58 #获取python文件同目录下的1.txt文件中的城市名称
59     with open('1.txt', 'r', encoding='UTF-8') as fp:
60         dd = fp.read()
61         a = dd.replace('\n', '')
62         city = a
63 #获取目标城市的近30天空气质量指数
64         (V, E) = date_format()
65         content = get_html_content(city, V, E)
66         result = get_aqi_info(content)
67 #        print(city, '最近30天空气质量指数如下：\n')
68         for key in sorted(result.keys()):
69 #            print(result[key],end=',')
70             print(key, '\t', result[key])

通过以上的代码我们能够看到我们想要的城市空气质量数值。然而获取的数值并不符合我们的想象。于是，对后续代码进行修改获取数字串放入目标文本

1             print(result[key],end=',')
2             results=result[key]+','
3 #            print(key, '\t', result[key])
4 #        print(type(key),type(result[key]))
5             f=open('2-1.txt', 'a', encoding='UTF-8')
6             f.writelines(results)

通过修改代码能够在同目录下的2-1.txt中看到想要的数字串

我们知道Highcharts中数据格式如图

采用php的方法获取到所需样式的数字串

1 <?php
2 header('Content-Type:text/html; charset=utf-8');
3 $myfile = fopen("2-1.txt", "r") or die("Unable to open file!");
4 $sss=fread($myfile,filesize("2-1.txt"));
5 echo $sss;
6 $ssss=substr($sss,0,-1);
7 echo $ssss;
8 ?>

在浏览器上能够看到所需的数字串已经成功的获取

将用于测试的Highcharts代码引入

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 7 <script src="http://code.highcharts.com/highcharts.js"></script>
 8 </head>
 9 <body>
10 #获取数字串
11 <?php
12 $myfile = fopen("2-1.txt", "r") or die("Unable to open file!");
13 $sss=fread($myfile,filesize("2-1.txt"));
14 $ssss=substr($sss,0,-1);
15 ?>
16 #获取目标名称
17 <?php
18 $myfile = fopen("1.txt", "r") or die("Unable to open file!");
19 $city=fread($myfile,filesize("1.txt"));
20 ?>
21 <div id="container" style="width: 1000px; height: 600px; margin: 0 auto"></div>
22 <script language="JavaScript">
23 $(document).ready(function() {  
24 
25    var chart = {
26       type: 'column'
27    };
28    var title = {
29       text: '近30天天气质量'   
30    };
31    var subtitle = {
32       text: ''
33    };
34    var xAxis = {
35       categories: [],
36       crosshair: true
37    };
38    var yAxis = {
39       min: 0,
40       title: {
41          text: '空气质量指数(AQI)'         
42       }      
43    };
44    var tooltip = {
45       headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
46       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
47          '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
48       footerFormat: '</table>',
49       shared: true,
50       useHTML: true
51    };
52    var plotOptions = {
53       column: {
54          pointPadding: 0.2,
55          borderWidth: 0
56       }
57    };  
58    var credits = {
59       enabled: false
60    };
61    
62    var series= [{
63         name: '<?php echo $city ?>',
64             data: [<?php echo $ssss ?>]
65  #此处通过php方式将数字串输入在data内       
66    }];     
67       
68    var json = {};   
69    json.chart = chart; 
70    json.title = title;   
71    json.subtitle = subtitle; 
72    json.tooltip = tooltip;
73    json.xAxis = xAxis;
74    json.yAxis = yAxis;  
75    json.series = series;
76    json.plotOptions = plotOptions;  
77    json.credits = credits;
78    $('#container').highcharts(json);
79   
80 });
81 </script>
82 </body>
83 </html>

在浏览器上访问该php文件

 

posted @ 2017-11-20 20:57  BigxBoss  阅读(1166)  评论(0)    收藏  举报