天气温度折线图canvas完整案例

最新推荐文章于 2024-12-21 11:22:27 发布

原创最新推荐文章于 2024-12-21 11:22:27 发布 · 6.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #折线图 #温度天气

本文介绍了一种使用HTML5 Canvas和jQuery实现的天气温度折线图绘制方法。该图表展示了未来一周内每天的最高温和最低温变化趋势，并通过不同颜色区分高低温。通过计算每个温度点的位置并绘制连接线，最终呈现直观的温度走势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>天气温度折线图</title>
</head>
<body>
   <canvas style="border:1px solid #ccc;" id="canvas"></canvas>
   <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
   <script>
       $(function(){
           //温度走势图start
           var forecast=new Array();
           forecast[0]=new Array();
           forecast[1]=new Array();
           forecast[2]=new Array();
           forecast[3]=new Array();
           forecast[4]=new Array();
           forecast[5]=new Array();
           forecast[6]=new Array();
           forecast[0]['high']=25;
           forecast[0]['low']=13;
           forecast[1]['high']=24;
           forecast[1]['low']=10;
           forecast[2]['high']=23;
           forecast[2]['low']=11;
           forecast[3]['high']=25;
           forecast[3]['low']=16;
           forecast[4]['high']=27;
           forecast[4]['low']=18;
           forecast[5]['high']=29;
           forecast[5]['low']=20;
           forecast[6]['high']=22;
           forecast[6]['low']=10;
           var maxTemp=forecast[0]['high'];
           var minTemp=forecast[0]['low'];

           var high_tep_arr=[];
           for(x=0;x<forecast.length;x++){
               var high_tep=forecast[x]['high'];
               if(high_tep>maxTemp){maxTemp=high_tep;}
               high_tep_arr.push(high_tep);
           }
           var low_tep_arr=[];
           for(x=0;x<forecast.length;x++){
               var low_tep=forecast[x]['low'];
               if(low_tep<minTemp){minTemp=low_tep;}
               low_tep_arr.push(low_tep);
           }
           var canvas=document.getElementById("canvas");
           var context=canvas.getContext("2d");
           canvas.style.width='832px';
           canvas.style.height='174px';
           canvas.width=832;
           canvas.height=174;
           var item_width = 120;
           var wencha=maxTemp-minTemp;
           var tem_pexi=(80/(maxTemp-minTemp));//计算每度对应的px。80是自己设定的，这里画布总高是174,所以我设定这几天最高温度和最低温度之间间距为80。
           context.translate(53,maxTemp*tem_pexi+40);//画布的偏移量，53是画布x轴从左向右方向偏移。后面的值是y轴（细说一下：web里面的坐标轴和我们数学知识上学习的坐标系，y轴是相反的。故这里画点为了让温度高的点显示在温度低的上面，我们要取反。取反以后这个点就跑到画布以外去了，所以我们要向正方向偏移出来。偏移的数值，我这里是选择了最高温度所占对应px加上每个点上要写文字的距离，从而计算出来）。
           //折线走势
           var new_high_x=[];
           var new_high_y=[];
           function draw_line(a,high_color_line){
               new_high_x=[];
               new_high_y=[];
               for(var j=0;j<a.length;j++){//a温度数组
                   //画点
               context.beginPath();
               var high_y=parseInt(Number(a[j])*tem_pexi);
               var high_x=j * item_width;
           context.arc(high_x,-high_y,3,0,2*Math.PI,true);
           context.strokeStyle=high_color_line;
           context.stroke();
           context.fillStyle=high_color_line;
           context.fill();
           context.closePath();
           //画线
           new_high_x.push(high_x);
           new_high_y.push(-high_y);
               //写文字
               if(a==high_tep_arr){
               context.beginPath();
               context.font = "18px 微软雅黑";
               context.fillStyle = "#333";
               context.fillText(a[j]+"°",high_x-10,-high_y-20,50);
               context.stroke();
               context.closePath();
               }else{
               context.beginPath();
               context.font = "18px 微软雅黑";
               context.fillStyle = "#333";
               context.fillText(a[j]+"°",high_x-10,-high_y+30,50);
               context.stroke();
               context.closePath();
               }
           }
               for(var z=0;z<14;z++){
                   if(z == 6){
                       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=3;
                   context.stroke();
                   context.closePath();

               }
           }
           draw_line(high_tep_arr,'#fcc370');
           draw_line(low_tep_arr,'#94ccf9');
               //温度走势图end
       })
   </script>
</body>
</html>