关于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文件
