天气预报小应用之canvas实现温度走势图
2017-11-17 17:28
316 查看
作者：旺仔
因为前段时间在研究H5的新属性canvas，觉得学习之后就该用一用，所以就在昨天的那个天气预报小应用的基础上对未来五天的温度进行基于canvas的数据可视化，下面是代码：用起来还是挺简单的，代码我已经做了标红及注释，欢迎交流~
欢迎大神们交流经验~
感谢提供api的壮士。
因为前段时间在研究H5的新属性canvas，觉得学习之后就该用一用，所以就在昨天的那个天气预报小应用的基础上对未来五天的温度进行基于canvas的数据可视化，下面是代码：用起来还是挺简单的，代码我已经做了标红及注释，欢迎交流~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
p,ul{margin: 0;padding: 0;}
.div{
width: 50%;
height: 640px;
margin:0 auto;
border: 1px solid #f1f1f1;
}
.div h1{
width: 100%;
height: 50px;
background: #f1f1f1;
line-height: 50px;
font-size: 23px;
text-indent: 1.5em;
}
.div h1 select{
float: right;
margin-top: 17px;
}
.div h1>span{
font-size: 13px;
color: #3a3939;
}
.div .body p{
width: 50%;
float: left;
margin: 10px 0 10px 0;
text-indent: 2em;
}
.div p:last-child{
width: 100%;
float: left;
}
.body{
overflow:hidden;
}
.forword h2{
width: 100%;
height: 50px;
background: #f1f1f1;
line-height: 50px;
font-size: 23px;
text-indent: 1.5em;
}
.forword p{
width: 100%;
height: 50px;
display: flex;
}
.forword p span{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #dddddd;
}
.forword h2{
width: 100%;
height: 50px;
}
.forword li{
width: 100%;
height: 50px;
display: flex;
}
.forword li span{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #dddddd;
}
#canvas{
overflow: hidden;
border: 1px solid #f1f1f1;
margin: 0 auto;
text-align: center;
background: #2f4b7a;
}
.canvas_div{
width: 74%;
margin: 0 auto;
position: relative;
}
.simple_temp {
display: flex;
width: 86%;
height: 50px;
position: absolute;
left: 7.5%;
top: 7px;
color: white;
}
.simple_temp span{
width: 20%;
display: block;
text-align: center;
}
</style>
<body>
<div class="div">
<h1>最新天气实况<span>日期:<span></span></span><select id="select_city"><option>南京</option><option>蚌埠</option><option>南通</option><option>海口</option></select></h1>
<div class="body">
<p>城市：<span></span></p>
<p>天气：<span></span></p>
<p>当前气温：<span></span></p>
<p>风向：<span></span></p>
<p>最高气温：<span></span></p>
<p>最低气温：<span></span></p>
<p>温馨提醒：<span></span></p>
</div>
<div class="forword">
<h2>未来五天天气预报</h2>
<p><span>日期</span><span>天气</span><span>最高气温</span><span>风力</span><span>最低气温</span><span>风向</span></p>
<ul>
<!--<li><span>16日</span><span>20℃</span><span>3-4级</span><span>20℃</span><span>东南</span></li>-->
</ul>
</div>
<div class="canvas_div"><canvas id="canvas"></canvas>
<div class="simple_temp">
<!--<span>周一<br/>20℃</span><span>周二<br/>20℃</span><span>周三<br/>20℃</span><span>周四<br/>20℃</span><span>周五<br/>20℃</span>-->
</div>
</div>
</div>
<script src="../jquery-1.11.2.min.js"></script>
<script>
$(function(){
$("#select_city").change(function(){
switch ($(this).val()){
case "南京":
citykey_val="101190101";
break;
case "蚌埠":
citykey_val="101220201";
break;
case "南通":
b358
citykey_val="101190501";
break;
case "海口":
citykey_val="101310101";
break;
};
$.ajax({
url: 'http://wthrcdn.etouch.cn/weather_mini',
type: 'get',
data: {
citykey:citykey_val
},
dataType: 'json',
success: function (resp) {
console.log(resp);
var date_data=resp.data.forecast[0].date;
var data_len=date_data.substr(0,3);
var data_len_day=date_data.substr(3,3);
console.log(data_len_day);
var date1=new Date();
var dateMon=date1.getMonth()+1;
var dateDay=date1.getDay();
$(".div h1 span span").html(dateMon+'月'+data_len+" "+data_len_day);
$('.body p:first-child span').html(resp.data.city);
$('.body p:nth-child(2) span').html(resp.data.forecast[0].type);
$('.body p:nth-child(3) span').html(resp.data.wendu+"℃");
$('.body p:nth-child(4) span').html(resp.data.forecast[0].fengxiang);
$('.body p:nth-child(5) span').html(resp.data.forecast[0].high);
$('.body p:nth-child(6) span').html(resp.data.forecast[0].low);
$('.body p:nth-child(7) span').html(resp.data.ganmao);
$('.forword ul,.simple_temp').empty();
for(var i=0;i<resp.data.forecast.length;i++){
var str = resp.data.forecast[i].fengli;
var str_fengli=str.substring(9, str.length - 3)
var forword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>";
$('.forword ul').append(forword_day);
$(".simple_temp").append("<span>"+dateMon+'月'+data_len+"<br/>"+resp.data.forecast[i].date.substring(3,resp.data.forecast[i].date.length)+"</span>")
};
//温度走势图start
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=700;
canvas.height=330;
context.translate(50,300);
var item_width = 120;
var line_arr=[50.5,150.5,250.5,350.5,450.5,550.5];
var tem_pexi=(270/40);//计算每像素的温度，单位：px/℃，tem_pexi*high_tep_arr=最高温度所占距底部的像素；最低温度同理
var high_tep_arr=[];
for(x=0;x<resp.data.forecast.length;x++){
var high_tep=(resp.data.forecast[x].high).substring(3,resp.data.forecast[x].high.length-1);
high_tep_arr.push(high_tep);
console.log(high_tep);
}
var low_tep_arr=[];
for(x=0;x<resp.data.forecast.length;x++){
var low_tep=(resp.data.forecast[x].low).substring(3,resp.data.forecast[x].low.length-1);
low_tep_arr.push(low_tep);
console.log(low_tep);
}
console.log(low_tep_arr);
for(var i=0;i<6;i++){
context.beginPath();
context.moveTo(0.5 + i * item_width, -0.5);
context.lineTo(0.5 + i * item_width, -270.5);
context.strokeStyle="#f1f1f1";
context.lineWidth=1;
context.stroke();
context.closePath();
}
//折线走势
var new_high_x=[];
var new_high_y=[];
var high_color_line='white';
var high_color_circle="white";
function draw_line(a){
for(var j=0;j<a.length;j++){//a温度数组
//画点
context.beginPath();
var high_y=parseInt(Number(a[j])*tem_pexi);
var high_x=55.5 + j * item_width;
context.arc(high_x,-high_y,3,0,2*Math.PI,true);
context.strokeStyle="white";
context.stroke();
context.fillStyle=high_color_circle;
context.fill();
context.closePath();
//画线
new_high_x.push(high_x);
new_high_y.push(-high_y);
for(var z=0;z<10;z++){
if(z == 4){
continue;
}
context.beginPath();
context.moveTo(new_high_x[z],new_high_y[z]);
context.lineTo(new_high_x[z+1],new_high_y[z+1]);
context.strokeStyle=high_color_line;
context.lineWidth=1;
context.stroke();
context.closePath();
}
//写文字
if(a==high_tep_arr){
context.beginPath();
context.font = "italic 15px 黑体";
context.fillStyle = high_color_line;
context.fillText(a[j]+"℃",high_x,-high_y-10,50);
context.stroke();
context.closePath();
}else{
context.beginPath();
context.font = "italic 15px 黑体";
context.fillStyle = high_color_line;
context.fillText(a[j]+"℃",high_x,-high_y+20,50);
context.stroke();
context.closePath();
}
}
}
draw_line(high_tep_arr);
draw_line(low_tep_arr);
//温度走势图end
}
})
})
$('#select_city').change();
})
</script>
</body>
</html>这里是截图：欢迎大神们交流经验~
感谢提供api的壮士。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C#实现天气预报
- <Android 应用 之路> 天气预报（二）
- Qt实现天气预报与PM2.5监测系统（2）Qt运行环境
- 正则表达式应用笔记----解析网页，获取并显示“未来三天全国天气预报”（java）
- C#调用WebService天气服务，实现天气预报
- 天气预报的功能实现（使用聚合的提供的外部接口）
- 天气预报功能--查询广州天气的实现
- 基于HTML5 geolocation 实现的天气预报功能
- 用Java实现全国天气预报的api接口调用示例
- android使用soap协议访问webservice实现天气预报功能
- 【Java】-利用天气查询API实现天气预报小窗体应用程序（一）
- <Android 应用 之路> 天气预报（二）
- Android 基于Web Service的应用之天气预报
- JavaScript获取本地城市和天气预报实现
- c++实现查询天气预报
- 应用Canvas实现圆环形进度条
- 天气预报系统——XML应用
- 微信开发（从申请微信到注册上线的一整套流程）第四章 实现天气预报功能
- Qt实现天气预报与PM2.5监测系统（7）今日天气
- 天气预报实现小方案