實現一個天氣預報折現圖功能

 1 <?php
 2 //接收地址
 3 isset($_GET['search'])?$search=$_GET['search']:$search = "shanghai";
 4 // 查詢url
 5 $url = "http://api.k780.com:88/?app=weather.future&weaid={$search}&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json";
 6 $arr = file_get_contents($url);
 7 $json = json_decode($arr,true);
 8 $jsonstr = $json['result'];
 9 // 遍歷 星期  地區  溫度   入庫
10 foreach ($jsonstr as $key=>$val){
11     $week[] = $val['week'];
12     $cityno[] = $val['cityno'];
13     $citynm[] = $val['citynm'];
14     $temperature[] = $val['temperature'];
15     $temperaturearr[] = array((int)$val['temp_low'],(int)$val['temp_high']);
16 }
17 //循環添加入庫
18 $pdo = new PDO("mysql:host=127.0.0.1","root","root");
19 for ($i=0;$i<=6;$i++){
20     $sql = "insert into `mouth861a` (week,cityno,citynm,temperature) values ('$week[$i]','$cityno[$i]','$citynm[$i]','$temperature[$i]')";
21     $pdo->exec($sql);
22 }
23 $data['week'] = $week;
24 $data['temp_low'] = $temperaturearr;
25 $data['search'] = $search;
26 echo json_encode($data);
27 //echo "<pre>";
28 //var_dump($data);

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>天氣預報搜索</title>
 6     <script src="jquery-3.3.1.min.js"></script>
 7     <script src="https://img.highcharts.com.cn/highcharts/highcharts.js"></script>
 8     <script src="https://img.highcharts.com.cn/highcharts/highcharts-more.js"></script>
 9     <script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script>
10     <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
11 </head>
12 <body>
13 <center>
14     <h1>天氣預報</h1>
15     <input type="text" id="search">
16 </center>
17 <div id="container" style="min- 310px; height: 400px; margin: 0 auto"></div>
18 <script>
19     // JS 代码
20     //構造天氣預報溫度方法
21     function weekweudu(data) {
22         var chart = Highcharts.chart('container', {
23             chart: {
24                 type: 'columnrange', // columnrange 依赖 highcharts-more.js
25                 inverted: true
26             },
27             title: {
28                 text: '温度变化范围'
29             },
30             subtitle: {
31                 text: data.search
32             },
33             xAxis: {
34                 categories: data.week
35             },
36             yAxis: {
37                 title: {
38                     text: '温度 ( °C )'
39                 }
40             },
41             tooltip: {
42                 valueSuffix: '°C'
43             },
44             plotOptions: {
45                 columnrange: {
46                     dataLabels: {
47                         enabled: true,
48                         formatter: function () {
49                             return this.y + '°C';
50                         }
51                     }
52                 }
53             },
54             legend: {
55                 enabled: false
56             },
57             series: [{
58                 name: '温度',
59                 data: data.temp_low
60             }]
61         });
62     }
63 </script>
64 </body>
65 </html>
66 <script>
67     $(document).on("blur","#search",function () {
68         //接收id值
69         var search = $("#search").val();
70         //失焦事件判断文本框内容不能为空
71         if (search==""){
72             alert("文本框内容不能为空");
73         }
74         //判断文本值长度不能大于30字符
75         if (search.length>30){
76             alert("文本值长度不能大于30字符");
77         }
78         //判断文本值必须为数字/字母/汉字
79         if (!/[d]|[A-Za-z]|[u4e00-u9fa5]/.test(search)){
80             alert("文本值必须为数字/字母/汉字");
81         }
82         $.ajax({
83             url:"search.php",
84             data:{
85                 search:search,
86             },
87             success:function (data) {
88                 // console.log(data);
89                 var data=JSON.parse(data);
90                 // console.log(data);
91                 //調用天氣預報方法
92                 weekweudu(data);
93             }
94         })
95     })
96 </script>